「ホームページを作ってみたい！」
まずは知っておこう！
「ホームページを作ってみたい！」
そう思ったことはありませんか？
突然の思い付きで始めていくには敷居が高く感じてしまうホームページ制作ですが、実は誰でも簡単に作れるんです！
今回の記事は、誰でも簡単にチャレンジできるホームページ制作の基礎部分を解説していきます。
はじめに
ホームページを制作するうえで必須の知識は「HTML」と「CSS」です。
用途によっては「PHP」「Javascript」「Ruby」など、さまざまな言語も使用します。
ホームページ制作で使用する言語はどれも非常に奥が深く、すべて覚えるには多大な時間を要してしまいます。
なので、すぐに必要な物を準備して、まずは作ってみる事をおススメします。
私が初めてホームページ制作にチャレンジした時も、とりあえず作る事から始めました。
制作しながら知識を得ていけば十分です。
ホームページの仕組み
それではホームページの仕組みから確認していきましょう。
特に、仕事にしようと考えられている方はご依頼者への提案の幅が広がるので知識は付けておきましょう。
ホームページとは
インターネットの情報を見る際、ブラウザに表示されるページの事を「ホームページ」もしくは「WEBサイト（ページ）」と呼びます。
厳密には「ホームページ」「WEBサイト」「WEBページ」は、それぞれ若干意味合いが違いますが、どの呼び方をしても問題はありません。
なお、それぞれの正しい意味は以下の通りです。
- ホームページ ・・・ WEBサイトで主となるトップページのこと。
- WEBサイト ・・・ 複数のWEBページをひとまとまりにしたもの。
- WEBページ ・・・ ブラウザに表示される個々のページのこと。
これらを厳密に使い分けているケースはそれほど多くないため、どの呼び方でも意味は通じます。
ここでは昔から使われている呼び方の「ホームページ」を使用して解説しています。
HTMLとは
HTMLとは、コンピューターにホームページの文章構成の指示を出す言語で、「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略です。
HTMLは「タグ」と呼ばれる命令文を使って文章構成の指示を送ります。
タグを組んでいく事で、ページの骨組みを作っていく事になります。
詳しくは「HTMLの組み方」で解説します。
CSSとは
CSSとは、ホームページのスタイル（装飾）を指定する言語で、「カスケーディング・スタイル・シート（Cascading Style Sheets）」の略です。
CSSはHTMLと組み合わせて使用する言語で、HTMLで組み立てた文章構成に装飾していく役割を持ちます。
フォントサイズや色、レイアウトなど、ホームページをどのように魅せるかを指定することができます。
実はHTMLでもCSSの代用はできます。
ですが、HTMLはあくまでも「コンピューターに文章構成を指示する言語」で、CSSとは役割が全く違います。
本来の役割と違う用途で使用すると命令文がでたらめになってしまい、ブラウザの種類によってはレイアウトが崩れてしまったり、検索エンジンに命令文が理解されなかったりと様々な不都合が生じます。
しっかりと使い分けるようにしましょう。
CSSについては「ゼロから始めるホームページ制作 ～CSS基礎編～」で解説していますので、ぜひ読んでみてください。
まずは準備から
それでは必要な物をチェックしていきましょう。
準備する物
▶ パソコン
スマホやタブレット端末でも可能かもしれませんが、ファイル管理などの観点からパソコンで作業することを推奨します。
▶ テキストエディタ
Windows付属の「メモ帳」でもOK。
「Visual Studio Code」や「Adobe Dreamweaver」などのコードエディタを使用するとメモ帳より楽に作れます。
ですが、色々な機能が付いているので最初は戸惑うかもしれません。
ちなみに私は「メモ帳」からスタートし、現在は「Adobe Dreamweaver」を使用しています。
▶ ブラウザ
「Google Chrome」「Microsoft Edge」「safari」「Firefox」などのホームページを表示するためのアプリケーションです。
普段愛用しているブラウザでOK。
インターネット上に公開する場合は、可能であれば複数のOSとブラウザでレイアウト崩れが無いか確認しておきましょう。
インターネット上に公開する場合
▶ インターネット環境
特にプロバイダーなどの指定はありません。
インターネットに接続されていれば良いので、現在お使いのインターネット環境で問題ありません。
▶ サーバー
「ConoHa WING」「X server」「ロリポップ」など、レンタルサーバーを使用します。
各社で色々なプランが用意されているので、運用目的に合った物を選びましょう。
なお、このブログは「ConoHa WING」のサーバーを利用しています。
他にも自宅サーバーを作るという方法もあります。
ですが、意外とコストと手間がかかるので自宅サーバーの設置はおススメはできません。
準備ができたら実践！
それではHTMLの組み方、「コーディング」について解説していきます。
HTMLで使用する命令文「タグ」は数多く存在するので、すべて覚える必要はありません。
使った物を順次覚えていきましょう。
HTMLの組み方
タグの組み方ですが、難しく考える必要はありません。
例えば見出しを付けたい場合は、「見出しタグ」で見出しにしたい文章を挟むだけです。
実際に以下の文章にタグをつけてみましょう。
見出しテキスト 本文テキスト
見出しタグは、本文には段落を定義する
を使用します。
タグの終わりは</>で定義します。
終了タグは記述漏れしやすいので気を付けましょう。
<h1>見出しテキスト</h> <p>本文テキスト</p>
では、この要領でHTML文書を定義させるタグを組んでみましょう。
ホームページは<html><head><body>の3つのタグで構造を定義します。
<html>
<head></head>
<body></body>
<html>
<html> ～ </html>間に記述されている内容がHTML文書として認識されます。
<head> ～ </head>間はホームページのタイトル等のヘッダ情報を記述していきます。
<body> ～ </body>間はブラウザに表示させる本文を記述していきます。
先ほどの見出しをブラウザに表示させる場合の記述はこのようになります。
<html>
<head></head>
<body>
<h1>見出しテキスト</h>
<p>本文テキスト</p>
</body>
<html>
ブラウザに表示させると
このように表示されます。
次は、ホームページのタイトルを定義してみましょう。
タイトルはブラウザのタブやインターネット検索した際に表示されます。
タイトルは<head> ～ </head>間に<title>タグを使って定義します。
<html>
<head>
<title>NewWorld</title>
</head>
<body>
<h1>見出しテキスト</h>
<p>本文テキスト</p>
</body>
<html>
これでホームページタイトルが「New World」と定義されました。
タブの表記が「NewWorld.html」から「New World」に変わっているのが確認できますね。
このようにHTMLを記述してホームページを作成していきます。
最後に忘れてはいけない「保存」
HTML文書の拡張子は「.html」です。
メモ帳の場合は「.txt」になっているので、保存後に拡張子を「.html」に変更しましょう。
ローカル環境でもhtmlファイルを開くことでブラウザに表示されるホームページを確認することができます。
完成！
CSSで装飾はしていませんが、ひとまずこれでホームページが完成です！
いかがでしょう？
意外と簡単に作れませんでしたか？
ホームページを作ること自体は簡単です。
CSS、つまり装飾に拘れば拘るほど、難易度は上がっていきます。
まずは簡単にコンテンツを載せるだけのホームページを作って練習していきましょう。
カテゴリ：ホームページ制作