HTML のひな型の記載方法

Last updated at 2021-02-10Posted at 2019-07-09

目的

HTMLファイルのひな型の記載方法をまとめる。

この記事のターゲット

HTMLファイルの最初の記載方法がわからない方
HTMLを書きたいが最初に何をすれば良いかわからない方
HTMLファイルのひな型を知りたい方
HTMLひな型を一から学んでいて嫌になってしまった方
ひな型のテンプレートをコピーしたい方

押さえておきたいポイント

HTMLファイルを書くにはひな型が必要になる
HTMLファイルのひな型とは、HTMLファイルが正常に表示されるようにする設定のこと
ひな型はテンプレートのようなものなのでHTMLファイルを作成したら最初に記載する

ひな型の書き方

ひな型本体の説明は後述する。

「ページタイトル」には任意のタイトル(ブラウザのタブ表示される文字)を記入する。
「CSSファイルまでのパスとファイル名」はひな型を書くHTMLファイルからCSSファイルまでのファイルパスを相対パスで記載する。
※HTMLファイルとCSSファイル同じフォルダ階層に設置している場合はCSSファイル名のみの指定でOK
※ひな型が必要な方は下記をそのままコピーして上記の必要箇所を記入すれば使用できます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="CSSファイルまでのパスとファイル名">
  </head>
  <body>
    <header>
    </header>
    <div class="main">
    </div>
    <footer>
    </footer>
  </body>
</html>

ひな型の内容の説明

下記のひな型の番号にリンクした説明を下記に記す。

①
文章の解釈に使用するDTD(Document Type Definition)と呼ばれる文書の型を宣言している。
宣言したHTMLのバージョンで使用する要素(タグ)や属性の名前などの情報が定義される。
②
htmlタグで囲まれた文書がHTML文書で記載することを指定している。
※ちなみにHTMLは「Hyper Text Markup Language」の頭文字を取ったもの
③
headタグの中に本HTMLファイルの設定を記載する。
設定する最低限の内容は下記の3つ
1. 文字コード
2. ブラウザタブに表示されるページタイトル
3. リンクするCSSファイルのファイルパスかファイル名

※設定の記載内容は下記で詳しく説明する。

④
metaタグのcharset属性で文字コードを指定する。
文字コードは特に意図がない場合utf-8を指定する。
⑤
titleタグでページのタイトルを指定する。
titleタグ囲んだ文字がページのタイトルとなり、ブラウザのタブに表示される。
⑥
linkタグのrel属性でstylesheetを与えることによりCSSファイルを読み込む設定をする。
linkタグのhref属性でCSSのファイルパスかファイル名を与えることによりCSSファイルを読み込む。
※CSSファイルの場所による記載方法の違いは本記事に後述する。
⑦
bodyタグを作成しHTMLで実際に表示させたい内容を記載していく。
bodyタグ内に作成する要素の基本は下記の3つ
※この部分は好みなので鵜呑みにしなくてOK！
1. headerタグ
2. divタグ(クラス名はmain)
3. footerタグ
⑧
headerタグを作成する。
表示させる内容のheaderに当たる部分を記載する。
⑨
クラス名を mainとしたdivタグを作成する。
表示させる内容のmainに当たる部分を記載する。
⑩
footerタグを作成する。
表示させる内容のfooterに当たる部分を記載する。

<!-- ① -->
<!DOCTYPE html>

<!-- ② -->
<html>

  <!-- ③ -->
  <head>

    <!-- ④ -->
    <meta charset="utf-8">

    <!-- ⑤ -->
    <title>ページタイトル</title>

    <!-- ⑥ -->
    <link rel="stylesheet" href="CSSファイルまでのパスとファイル名">

  </head>

  <!-- ⑦ -->
  <body>

    <!-- ⑧ -->
    <header>
    </header>

    <!-- ⑨ -->
    <div class="main">
    </div>

    <!-- ⑩ -->
    <footer>
    </footer>
  </body>
</html>

CSSの設置場所の違いによる指定方法時の違い

具体的な例を用いてhead内でのCSSファイルの読み込み指定方法の違いをまとめる。
また、HTMLファイル名は「tropical_fish.html」とし、CSSファイル名は「preference_file.css」とする。

CSSファイルがHTMLファイルと同じフォルダ階層に存在するとき

フォルダ階層を下記に記載する。

# HTMLファイルが設置してあるフォルダ内の構成

tropical_fish.html
preference_file.css

上記のファイル構成の場合はtropical_fish.htmlのheadのlinkにて下記のようにCSSファイルを指定する。

<link rel="stylesheet" href="preference_file.css">

CSSファイルがHTMLファイルの一つ下のフォルダ「LOVE_CSS」の中に存在するとき

※本来CSSファイルを格納するフォルダはわかりやすい名前にするべきです。
フォルダ階層を下記に記載する。

tropical_fish.html
LOVE_CSSフォルダ
    ┗preference_file.css