HTMLとCSSがよくわからないあなたへ。歴史を学んで少しだけ理解を深めてみませんか？

html_history

どうも、あめたま（@ametama_l2l）です。

一昔前はホームページが作れるっていうと、結構重宝されるというか、すごいねーなんて言われていました。というか学校の授業で初心者向けに麻雀の解説サイトを作った20年前が懐かしいです。

話はちょっとそれますが、ホームページっていつのまにかWebサイトって呼ばれるようになってましたよね。私もなんとなくかっこいいのでWebサイトって呼ぶようになりました。

今はブログが主流ですね。無料ブログとか誰でも簡単に作れるし。なんならHTMLタグなんて意味を知らなくたって登録すればその瞬間からブログ運営ができちゃいます。

さて、今回はそんな時代にHTMLとかCSSの意味をちゃんと理解して書こうぜ！っていう自分が出来てもいないことを偉そうに書いていきます。

最後まで読み進めても細かいテクニックは書いてないので、意味がわからなくなったら、遠慮なく離脱してくださいﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ

1 HTMLとCSSの関係
2 タグの意味を考える
- 2.1 <div>、タグについて
- 2.2 タグについて
3 今回のまとめ

HTMLとCSSの関係

HTMLって言語なんですよ。~~プログラミング言語の一種で~~（*）、正式名称は「HyperText Markup Language（ハイパーテキストマークアップラングエージ）」です。

ハイパーテキストっていうのをマークアップする言語です。

普段目にしているブログやWebサイトはこのHTML言語で書かれていて、それをブラウザ（IEとかChromeとか）で表示しているわけです。

（*）狭義の意味でプログラミングにカテゴライズされることがありますが、厳密にはマークアップ言語です。コメントでご意見をいただいたので修正いたします。

HTMLの仕組み

で、こいつは超簡単に言うと「タグっていうのを使って普通のテキストよりちょっといろんなことを出来るようにしちゃおうぜ」ってものです。

なので仕組みは超簡単。タグに囲まれた部分に意味を持たせるのがHTMLの仕組みです。

例えばPタグは段落を意味します。そこでとで挟むことで、その間にあるものが一つの段落だと教えてあげるわけですね。

例：ここは段落だよ

こうすることでどこまでが段落なのかを明示して、ブラウザ側はそれにあわせて表示してくれるんです。

HTMLのバージョン

HTML 4.0とかHTML5とかバージョンがあるのはご存知でしょうか？

間にXMLとかXHTMLとかってのもあるんですが、HTMLって言ってもいろいろあるんだなーぐらいの理解でOKです。

HTML 4.0からいきなり参入障壁が上がりました。その理由はスタイルシートの登場です。

CSSの登場

CSSはCascading Style Sheetsの頭文字を取ったもので、スタイルシートと呼ばれます。

それはHTMLの書き方を大きく変える革命でした。少なくとも私にとって。

CSSの登場以前は文字の色やサイズを変えるにはタグを使っていました。

例：文字を大きくしたい　大きくしたい文字

細かい値は気にせず、まぁそういうもんなんだなって思っててください。とにかくフォントを弄りたいならタグで囲めばよかったわけです。

CSSの登場によって、ここに革命が起きます。HTMLには文書構造に関するものしか書かないようにしようぜって動きが出てきたのです。

よくわかりませんか。要はタグは文字の色や大きさとかを決めるタグです。それって装飾です。装飾は直接文書構造に関係ないから使うなって言い出したんですよ。偉い人が。

いやぁ、びっくりしました。装飾はCSSでやれって言うんですから。

それまで主流のテキストサイトでは当然CSSなんて使わずに文字の大きさや色を直接指定して書かれていました。それが急に「それそのうちNGにすっから」なんて言うわけです。

HTMLとCSSの関係のまとめ

現在主流の考え方は

HTML：文書構造
CSS：装飾

という風に役割を完全に分けています。

それによって、昔はOKだった見栄えのためのタグは非推奨になりました。<center>タグで真ん中に寄せたり、タグで文字の色や大きさを変えたりってのがダメってことです。

先ほどちらっと書きましたが、最新のHTMLバージョンはHTML5です。なんとHTML5では<center>やは非推奨どころか廃止されました。そういうことはCSSでやってねって話なわけです。

タイトルの話はここまでなので、HTMLとCSSの関係がなんとなくわかってもらえれば万々歳です。

タグの意味を考える

さて、長々と書いてきましたが、実はここからが私の書きたかった本題になります。

まだ離脱をされていないということは、「HTMLは文書構造を示すための言語で、装飾はCSSを使う」というところまでは理解してもらっていることと思います。

ここからはさらにマニアックなお話になりますよ。

<div>、タグについて

一気に離れていく姿が目に浮かびますが、書いていきます。

これ、私の中ではかなり曲者なタグです。

<div>ももこれ自体は意味を持たないタグで、違いはブロック要素かインライン要素かということ。まぁ、ブロックだとかインラインだとかっていうのはこの際どうでもいいんですが、意味を持たないタグっておかしくない？！って話です。

実際の使用方法としては、<div>はデザイン調整に使われることが多く、は文字の装飾に使われることが多いです。

それぞれのタグで囲んだ内容をCSSで装飾することで、細かい見栄えの調整をするわけです。

でもね。

HTMLは文書構造なんですよね？

でもdivやspanは意味を持たないんですよね？

本当に使って大丈夫？

また突然廃止にならない？

という懸念を持ちつつ、他に代替手段がないので、使用しています。

タグについて

タグは改行タグです。いまだに結構使われている方も多いのですが、個人的には要注意タグの一つです。

まず、書き方が鬱陶しい。

HTML4.0： （スラッシュ不要）
XHTML（*）： （スラッシュが必要）
HTML5： （どっちでもいい）

これに関しては、<img>タグのように挟まないタグ全般に言えることなので、brだけの話ではないんですけどね。

次に、行間の調整用に使っている場合が多いということです。

WordPressの場合、改行のためにエンターキーを押すと、下に1行分の空白が出来ます。これはエンターキーは段落を作るためで、タグで囲われた一つの段落だとみなされるからです。

シフトキーを押しながら、エンターキーを押すと、空白を作らずに改行することが出来ます。これが タグです。2回押して とすれば見た目は同じになります。

では、 という書き方とタグはどう違うのか。ここまで着いて来てくれた方なら、もうおわかりでしょう。 は見た目調整なんです。CSSでやるべきことなんです。

で改行するなら、ちゃんと文章が終わった、意味のある改行を使ってください。文字弄りのために文章の途中で を使う人をたまに見かけますが、閲覧環境によってめちゃくちゃ見辛くなりますから…。

（*）コメントにてご指摘をいただいたので修正しました。

今回のまとめ

久しぶりに思うがままに、下調べもせず、勢いで書きたいように書いてやりましたよ。ここまでで約3,000文字。1時間。

偉そうに書きましたが、このブログだと、h2タグのmargin-topをあまり取っていないので、装飾目的で空のタグ使ってますﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ

あ、アイキャッチ画像はあめたまびよりのCSSの最初の方です(　´,_ゝ`)ｲﾋ

※2015/09/06 追記

勢いで書くといろいろとツッコミどころが満載になっちゃいますね。ご指摘いただいた方々、ありがとうございます。

今回、私が一番伝えたかったのは、「HTMLは文書構造、CSSは装飾だよ」ということです。この記事でHTMLやCSSに興味を持っていただければ幸いです。