WEBサイトを作る上で必ず触ることになると思われるHTMLとCSS。
ざっくりいうと「タグで囲むやつ」とか「見た目を調整するやつ」なんですが、最近これらはどういったものか説明する機会があったので、今回自分なりの解釈を書いておこうと思います。
既に習熟されている方には今更な内容だと思いますのでスキップ推奨です。
HTMLとはなんぞや
「Hyper Text Markup Language」の略。日本語にすると「文書構造や表示の仕方を指定できる言語」。
もう少し簡単に言うと、題名や見出し等の文書構造を、好きな見た目で表示できる言語ですね。で、これを使って作る 文書 が色んなWEBサイトで使われているHTMLファイルなわけです。
文書、つまり基本的にHTMLファイルは拡張子が.htmlなだけのテキストファイルですので、windowsに最初からインストールされているメモ帳等のツールでも作ることができます。
HTMLの基本文書構造
HTMLの基本的な構造は大きく分けて以下の3つです。
- DOCTYPE
HTMLはいくつかのバージョンがあり、XHTML、HTML4.1、HTML5等があり、現在はHTML5が主流です。
バージョンによっては多少ルールが変わる箇所もあるため、どのバージョンのHTML文書なのかを明記する必要があります。
これはhtml文書の1行目に記述します。 - HEAD
文書自体の情報を指定する部分で、メタデータとも呼ばれます。
書籍で言うところの「題名」「著者」「どんな分野の書籍なのか」「内容の概要」といった情報を記述します。 - BODY
ブラウザ(chrome)等で実際に表示される部分です。
WEBサイトを見るときに表示されている「見出し」や「本文」等のテキストや、画像等はこの部分に記述します。
また、CSSはこの部分の見た目を調整する際に利用します。
HTMLのタグ
HTMLの基本文書構造は上述の通りですが、実際にHTML文書を作る場合には、どこからどこまでが「DOCTYPE」で、どこからどこまでが「HEAD」「BODY」なのでしょうか？
ここまでご紹介した要素で例を挙げてみます。
<!DOCTYPE html>
<html>
<head>
メタデータ
</head>
<body>
コンテンツ
</body>
</html>
上記の例で使われているタグの意味合いは以下のようになります。
-
<html> ~ </html>
<html>がhtml文書の開始を、</html>が終了を表します。
この2つの間に記述された内容がhtml文書です。 -
<head> ~ </head>
<head>がhead部分の開始を、</head>が終了を表します。
この2つの間に記述された内容がhead情報、いわゆる文書自体の情報を記述する部分です。 -
<body> ~ </body>
<body>がbody部分の開始を、<body>が終了を表します。
この2つの間に記述された内容がbody情報、つまり実際に表示される内容を記述する部分です。
上記のように、どこからどこまでがその要素かを指定しているのが タグ です。
<body>のようにその要素の開始を表すものを 開始タグ。
</body>のようにその要素の終了を表すものを 閉じタグ と言います。
また、タグは「見出しを表すもの」や「文節を表すもの」等、ここでは紹介しきれないほどの種類がありますので、そちらについては他の参考サイトや書籍等を探してみてください。中には閉じタグが不要なものもあります。
ちなみに<!DOCTYPE html>はDOCTYPE宣言と呼ばれるもので、どのバージョンのhtml文書を作成するかで書き方が決まっています。例に記載されているものはhtml5のものです。
HTMLは四角形と文字だけ
次は目に見える部分であるBODYのお話です。
HTMLで目に見える部分は、基本的に四角形と文字だけで構成されています。
ブロック要素 、インライン要素 と呼ばれるものなのですが、
最初のうちは四角形がブロック要素、文字がインライン要素。と考えるとよいと思います。
しかし「え？WEBサイトって丸いのとか三角もあるよね？」って思う初心者の方は多いはず。
あれらは実は
四角形の角を円になるまで丸くしたもの とか
四角形を斜めに回転させて一部を見えなくしたもの とか
四角形の中に丸や波型の画像を表示させているもの です。
以下に例を挙げてみます。
まず下のような赤・緑・青で、幅100px・高さ100pxの四角形をHTMLとCSSを使って作ってみました。
これをCSSを使って、
赤を 四角形の角を円になるまで丸く
緑を 四角形を斜めに回転させて一部を見えなく
青を 四角形の中に丸や波型の画像を表示させる
させてみます。
少しイメージしづらいかもしれませんが、これらの赤・緑・青は見た目こそ円形であったり三角形となっていますが、実際は全て幅100px・高さ100pxの四角形の範囲を持ったままとなっています。よってHTML上でレイアウトする際にも、四角形のものとしてレイアウトすることになります。
基本的にWEBサイトのHTMLは、こういった 四角形の中に四角形、もしくは文字を配置する。 の繰り返しで構成されています。
まとめ
HTML/CSSを始めて触る、もしくは触りたての方向けに、主にHTMLとはどんなものかについて書いてみました。
HTMLとか一般生活で使うものじゃないしよくわかんない・・・という方に、少しでもなるほどな～と思っていただけたら嬉しいです。
とはいえ今回はあくまでHTMLの触りの部分の内容ですし、自由なレイアウトを作れるようになるためにはCSSという知識も必要になってきます。なかなか結構奥が深い世界ではありますが、CSSについて書き始めると記事一つでは終わらなくなっちゃうので今回はこの辺で。
ここまで読んでいただきありがとうございました。