ども！てばさきです。
Webデザインの復習がてら、学習した知識を書き留めておこうと思います。
本記事では
- HTMLファイルの作り方
- HTMLファイルの基本構造（骨組み）
この２点を説明していきたいと思います。
Contents
HTMLファイルを作ろう
まず始めにテキストエディタにコードを打ちます。
テキストエディタはメモ帳でも何でも構いませんが、私はAtomを使っています。
コードは書籍のサンプルコードを打ち込みました。こんな感じです。
[pz-linkcard-auto-replace url="https://twitter.com/teba_saki_/status/1184490203836108800"]
実際に打ち込んだコード
いきなりこんなの見せられても意味不明だと思うので後で解説します！
拡張子「◯◯.html」をファイル名に付ける
んで、HTMLのファイルにするためには、それ相応の名前をつけないといけません。
それが「.html」という拡張子です。
ファイル名の語尾に決められた拡張子を名付けるだけで、HTMLファイルは完成します。
「index.html」で保存します。
トップページにはこの名前で保存するのが基本みたいですね。
https://www.example.com/index.html
[pz-linkcard-auto-replace url="https://www.example.com/"]みたいにURLの入力を省略できるからってのが理由なんだって。
でもまぁ『.html』が語尾ならちゃんとHTMLファイルになってブラウザに表示されますので。（そこわかってなかった人←）
他にも拡張子には「.css」「.jpg」などの種類があります。
その他のhtmlファイル名のルール
語尾が『.html』なら問題ナシ！！みたいに言いましたが、他にも細かなルールがあるのでまとめておきます。
- 日本語、全角英数字は使えない
- 記号は『-ハイフン』『_アンダースコア』以外使えない
- 空白は使えない
- 小文字に統一する
まあイメージとしては、メアドやパスワードに使えないもんはHTMLのファイルにも使えないって感じですかね。
厳密に言えば、記号の『/スラッシュ』も使えるのですが、フォルダを区別する時に使うもんなんでファイル名に使うのは避けましょう。
HTMLの基本構造【頭と身体をイメージしよう】
先程作ったHTMLファイルに打ち込んだコードがHTMLの基本の骨組みになります。
毎回打ち込むコードになるので暗記必須です！
超ザックリですが、構造的にはこんな感じ。
バージョンがHTML５＞日本語のhtml文章＞頭（head）,身体（body）
といった具合に階層的な構造になっています。これで１ページ。
イラストにして見ると、日本語のhtmlさんが頭（head）と身体（body）で構成されたコンテンツくん（勝手に命名）を包み込んでるイメージですね！
んで、この日本語htmlさんはHTML５属性（炎タイプ？）を持ってるって感じですw
ザックリイメージしてもらえたところで、次に１つ１つのコードの内容を簡単に説明したいと思います。
<!doctype html>
<!doctype html>＝ドクタイプ宣言です。
HTMLの仕様がいつのバージョンのものかを表すために一番始めに示します。
バージョンの種類には
- HTML4.01
- XHTML 1.1
- HTML5
があり、HTML５が最新のバージョンになっています。
ヒトカゲ（HTML4.01）がリザードン（HTML5）に進化したようなもんです。
どうせ使うならレベル高いほうが良いし、ほのおタイプ以外にひこうタイプも持ってるリザードンなら「そらをとぶ」だって使えますからね。
使いこなすにはトレーナーレベルを上げないといけませんけどね＾＾頑張りましょ！
つまるところ
<!doctype html>＝ドクタイプ宣言＝HTML５
と覚えておけばとりあえず問題ないです！！！
<html>〜</html>
ドクタイプ宣言をした直後に書く、HTMLの文章だよ〜！って意味のコードです。
後に出てくる頭と身体を囲うイメージなので、タグ締め</>も忘れずにね！
最初の部分だけ<html>じゃなくて、<html lang=”ja”>みたいに変な感じになってますけど、これで正解です！！てかずっとコレです！！
<html>っていうシンプルなコードは書く機会が無いと思っておきましょう！とりあえずね！！
言語（language）=日本語（japanese）だよ〜！って意味なんで、指定しておきましょう！
<head>〜</head>
head＝頭の部分です！つまりページのタイトルや説明文などのページの情報を書いてます。
この頭の中にメタ要素とかページのタイトルとかが記述されてます＾＾
大枠の内容を示しているので、サンプルのコードで言えば『猫のことが書かれたページ』くらいの感じです。
ちなみにブラウザには表示されないです。あくまでページの情報なので！
<meta charset=”UTF-8″>
メタ要素です。このコードは文字コードを「UTF-8」にしてねって意味。
ここミスったら普通に文字化けしますw
[pz-linkcard-auto-replace url="https://twitter.com/teba_saki_/status/1187758575457714176"] [pz-linkcard-auto-replace url="https://twitter.com/teba_saki_/status/1187760434398416897"]
コレまさにUTF-8の記述ミスでの文字化けです。
文字コードのメタ要素の重要さに痛感させられますねw
<title>〜</title>
ページのタイトルを記述するためのコードです。
サンプルコードでいうと『猫の実態』って名前のページってことですね。
タブにこんな感じでページのタイトル名が表示されます。（パソコンでググるとよく見るやつ）
<meta name=”description” content=”〜”>
コレもメタ要素ですね。ページの説明文を書く場所です。
サンプルコードで言うと、『猫の好きなもの、日々の生活を紹介』の部分です。
余談ではありますが、WordPressの管理画面にディスクリプション設定の欄があって、ここに書き込んだ内容が検索結果として反映され、ページタイトル（猫の実態）の下のページの説明文（猫の好きな〜）として表示されます。
コレを示すコードが<meta name=”description” content=”〜”>と言うことですね。
説明文は普通にググったら出てくる部分なので一度じっくりと見てみましょう！
<body>〜</body>
body＝身体です！つまりはブラウザに表示される文章を書く場所です。
sサンプルコードで言うと、
『猫の一日』→記事タイトル
『ひたすら寝ています』→記事内容（本文）
という感じ。いわばコンテンツの内容が書かれている部分ですね。端的に言えば記事です。
headがページの情報なら、bodyはページの内容を示してるわけですね。
脳にあるイメージをジェスチャーで表現するみたいなもんですw
まとめ：HTMLの基本をイメージで理解しよう
HTMLの基本について流れに沿って再度まとめました。
コレ押さえとけばとりあえずこの先のHTMLの学習を進めることができると思います。
- ファイル名は『◯◯.html』で保存
- ドクタイプ宣言をする…<!doctype html>
- HTMLの文章を表す……<html lang=”ja”>〜</html>
- ページの情報…………<head>〜</head>
- 文字コード……………<meta charset=”UTF-8″>
- ページのタイトル……<title>〜</title>
- ページの説明文………<meta name=”description” content=”〜”>
- HTML文書の本体（記事）…<body>〜</body>
毎回書く型なので嫌でも覚えます＾＾
でもなんとなくで良いから、それぞれのコードの意味を理解しておくと、この先の学習も進めやすいんじゃないかなぁと思います。
参考にした書籍はコチラ（どちらかと言えばMacユーザー向けかもです。）
ではまたノシ
