最終更新日：2021.04.01
公開日：2021.03.06

ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL06HTMLファイルを作成する

今回はトップページのHTMLコーディングを始めていきます。HTMLを書いていくにあたって、トップページの構造をイメージしながら、実際にHTMLファイルを作成していきます。

この記事のポイント

WEBサイト全体のページ構成と確認する
トップページのデザインからHTMLの大まかな構造をイメージする
HTMLファイルを作成して、HTMLの宣言文を書く

WEBサイトのページ構成を考える

今回からいよいよHTMLのコーディングに入っていきます。

まずはWEBサイトの全体の構成を改めて確認しましょう。
今回作るWEBサイトは次の3ページ構成です。

トップページ、お知らせページ、お問い合わせページの3ページなので、最終的には3つのHTMLファイルを作成します。
今回はそのうち、1つ目のトップページのHTMLをコーディングしていきます。

デスクトップなど分かりやすい場所に「profile」という名前のフォルダを作成してください。

続いて、「profile」フォルダの中に「index.html」というファイルを1つ作成してください。

「index.html」がトップページのHTMLファイルになります。
ファイル名はなぜ「top.html」や「first.html」ではなく「index.html」なのかというと、WEBサーバーが一番最初に開くファイル名は「index.html」に設定されていることが多いためです。
そのため、ほとんどのWEBサイトではトップページが「index.html」になっています。

トップページのHTMLファイル「index.html」が用意できたので、このファイルにHTMLを書いていきましょう。

デザインからHTML構造を考える

今回から作成するトップページのデザインは以下のものになります。

デザインをみてHTMLを書いていくとき、まずは大まかにコンテンツのグループ分けをして構造をイメージします。
今回作成するトップページであれば、次のようにヘッダー、コンテンツ1、コンテンツ2、フッターの4つに分けられそうです。

トップページではこの4つのグループが上から順に縦に4つ並ぶイメージになります。
この構造のイメージを頭に入れながら、HTMLのコードを書いていきます。

HTMLの宣言を書く

ここからは「VOL03 HTMLの基礎文法と書き方」の復習になります。

HTMLを描き始めるとき、まず最初に「HTMLのコードが書いてあります」という宣言を書く必要があります。
この宣言が書かれていると、ブラウザで「index.html」を開いたときに「お、HTMLが書かれているぞ」と判断して内容を表示することができるようになります。

先ほど作ったトップページのHTMLファイル「index.html」をテキストエディタで開いて、以下のコードを入力してください。

HTML コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
  </body>
</html>

1行目は「このテキストファイルはHTMLが書かれています」と宣言しています。
HTMLファイルを作るうえで最も大切なコードです。

宣言に続いて、html要素（htmlタグ)を記述します。
html要素も非常に重要で、HTMLファイルに必ず1つ書かれている必要があります。

続いて、html要素の内側にhead要素とbody要素を配置します。
以下のコードの赤字になっている箇所です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
  </body>
</html>

html要素の内側には必ずhead要素とbody要素を1つずつ配置する必要があります。

head要素の内側には、ページのタイトルや読み込むファイルなどページの設定に関連した情報を記述します。
今回はページの文字コードを指定するmeta要素と、ページのタイトル（題名）を設定するtitle要素を1つずつ指定します。

特にtitle要素で書いた「PROFILE」はブラウザのタブやGoogleの検索結果に表示されます。
また、1つのWEBサイトに同じタイトルを持つページを複数設定することはできません。

body要素にはページのコンテンツを書いていきます。
次回に続きます。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。