目的
- 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つ
- 文字コード
- ブラウザタブに表示されるページタイトル
- リンクするCSSファイルのファイルパスかファイル名
※設定の記載内容は下記で詳しく説明する。
- ④
metaタグのcharset属性で文字コードを指定する。
文字コードは特に意図がない場合utf-8を指定する。
- ⑤
titleタグでページのタイトルを指定する。
titleタグ囲んだ文字がページのタイトルとなり、ブラウザのタブに表示される。
- ⑥
linkタグのrel属性でstylesheetを与えることによりCSSファイルを読み込む設定をする。
linkタグのhref属性でCSSのファイルパスかファイル名を与えることによりCSSファイルを読み込む。
※CSSファイルの場所による記載方法の違いは本記事に後述する。
- ⑦
bodyタグを作成しHTMLで実際に表示させたい内容を記載していく。
bodyタグ内に作成する要素の基本は下記の3つ
※この部分は好みなので鵜呑みにしなくてOK!
- headerタグ
- divタグ(クラス名はmain)
- 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
上記のファイル構成の場合はtropical_fish.htmlのheadのlinkにて下記のようにCSSファイルを指定する。
<link rel="stylesheet" href="./LOVE_CSS/preference_file.css">
まとめ
- HTMLファイルのひな型の記載をまとめた。
- CSSファイルの設定にはHTMLファイルとの位置関係を意識する。
超重要な追記(2019/07/09)
※下記の内容はVisual Studio Codeエディタを使用して