HTMLの学習を始める前に、制作環境を整えます。
Web制作の環境構築
Webサイトを制作するための環境構築を解説します。
Google Chromeをインストールする
Webサイトを閲覧するには、ブラウザが必要です。
WindowsならEdge、MacならSafariが最初から入っていますが、Web制作にはGoogle Chromeがおすすめです。
以下のページからインストールできます。
Google Chrome – 高速かつ安全でカスタマイズ可能なブラウザ
Visual Studio Codeをインストールする
HTML/CSSはテキストエディタで書きます。
テキストエディタは無料のVisual Studio Codeが便利で最も利用されておりおすすめです。
Visual Studio Codeは、以下のページからインストールできます。
そのままでは英語の表示なので、以下のパッケージをプラグインを入れて日本語に対応させます。
Japanese Language Pack for Visual Studio Code
簡単なHTMLを書いて、ブラウザ（Google Chrome）に表示させる方法を解説します。
フォルダとファイルを作成
パソコンの任意の場所（例：デスクトップ）に「my-web-site」フォルダを作成してください。
Visual Studio Codeのツールバーにある「ファイル」の「フォルダーを開く」で「my-web-site」を開きます。
「index.html」という名前でファイルを作成してください。HTMLでサイトを作成する場合、トップページはindex.htmlのファイル名にします。
HTMLを書いてみよう
index.htmlには以下のコードを記述します。
<p>テキスト</p>HTMLのコードは、<開始タグ>~</終了タグ>の形が基本になります。
pタグは段落（paragraph）を表示させるために使います。
<開始タグ>~</終了タグ>を要素と言います。
上記コードのようにpタグで囲まれた<p>テキスト</p>の部分を、p要素と言います。
<h1>タイトル</h1>
<p>テキスト</p>h1は見出し（heading）に使われるタグです。
h1の他に、h2、h3、h4、h5、h6があります。
h1は主にタイトルに使われ、h2~h6は主に本文の見出しに使用されます。
<div>
<h1>見出し</h1>
<p>テキスト</p>
</div>このように、HTMLタグは入れ子にすることができます。
入れ子であると分かるように、divの中にあるタグの前にスペースを4つ入れて見やすくします。これをインデントと言います。
インデントはスペース2つのパターンや、スペース4つ分（または2つ分）のタブを入れるパターンなど、人や組織によってやり方は異なりますが、この講座ではスペース4つ分で統一します。
divタグはpやh1と違い、それ自体に意味を持ちません。タグをグループ化する時などに使用します。
<div>
<h1>見出し</h1>
<p>テキスト<br>テキスト</p>
</div>brタグは改行です。pタグのような囲んで使うのではなく、単体で使用します。
<br>または<br />のような形で使います。HTML5では前者の/を省略した形で記述します。
今回は、ブラウザに画像を表示させる方法を紹介します。
画像を表示させる
次に、画像を表示させます。
フリー素材をダウンロード
以下のサイトは無料でフリー素材をダウンロードできるサイトです。
4.200万点以上の高品質なフリー画像素材 – Pixabay – Pixabay
小さめの画像で良いので、こちらから画像をダウンロードしておいてください。
説明がしやすいようにJPG（拡張子が.jpg）の画像をダウンロードしてください。
ダウンロードしたら、名前を「image.jpg」に変更してください。
フォルダを作成
今回作成した「my-web-site」フォルダの中に、「image」フォルダを作成してください。
「image」フォルダの中に、「image.jpg」を移動またはコピーしてください。
フォルダに保存した画像を表示させるには、以下のようなコードを書きます。
<div>
<h1>見出し</h1>
<p>テキスト<br>テキスト</p>
<p>
<img src="images/image.jpg" alt="サンプル画像です">
</p>
</div>imgタグで画像が表示されます。src="画像のパス"の形で画像を指定します。
HTMLタグには、srcのように情報を追加することができます。srcの部分を属性、”images/image.jpg”を値と言います。
alt属性は、画像が表示されなかった時に表示されたり、検索エンジンに画像の内容を伝えたりなどのために指定するものです。imgタグにはalt属性を指定するのは必須となっています。
それでは、属性を追加してみましょう。
<div>
<h1>見出し</h1>
<p>テキスト<br>テキスト</p>
<p>
<img src="images/image.jpg" alt="サンプル画像です" width="1280" height="853">
</p>
</div>width属性は画像の幅、height属性は画像の高さを指定します。
画像には幅と高さを指定するのが推奨されていますので、できるだけ入れるようにしましょう。
リストを表示させる
箇条書きのリストを表示させる方法を紹介します。
index.htmlのコードを一旦削除して、以下のように記述してください。
<ul>
<li>にんじん</li>
<li>玉ねぎ</li>
<li>かぼちゃ</li>
</ul>ulタグでliタグを囲む形で記述します。
ランキングのように、リストの順番に意味がある場合は、olタグを使います。
<h1>日本の山、標高ランキング</h1>
<ol>
<li>富士山</li>
<li>北岳</li>
<li>奥穂高岳</li>
</ol>ulは「unordered list（順序がないリスト）」の略、olは「ordered list（順序があるリスト）」の略です。
コメントアウト
コメントアウトは、ブラウザには表示されない文字情報です。
例えば、メモを書いたり、共同で制作する人のために注意書きを書いたり、見やすく区切ったりするために使用します。
<p>このテキストはブラウザに表示されます。</p>
<!-- このテキストはブラウザに表示されません --><!-- から -->までがコメントアウトで、その中に記述した文字はブラウザに表示されません。
<!-- <p>一時的に非表示にしたいテキスト</p> -->このように、要素を一時的に非表示にしたい時に使うこともあります。