HTMLとCSSとは？仕組みから理解することで今後の理解を深める

HTMLとCSSを勉強しようとする方は、おそらくインターネットで調べて覚えていく方が多いかと思います。それだと、HTMLとCSSの作られ方の仕組みについては知らないまま覚えていくことになるケースが多いのではないでしょうか。ここでご紹介する仕組みを知っておいた方が、より理解が深まると思いますし、人によっては、より興味が沸くのではないかと思います。

私は、世界標準という仕組みについて深く考える仕事をしていましたので、その経験も踏まえてHTMLの仕組みについて簡単にご説明します。

HTMLとは

HTMLは、「HyperText Markup Language」の略です。マークアップ言語のひとつです。

それだけでは、おそらくこのページにきていただけた方にとって何の説明にもなってないですが、マークアップ言語というのは、何やら難しそうなプログラミング言語とは別物として考えてください。マークアップ言語は私からすれば英単語を覚えるのよりもよっぽど覚える量も少ないですし、簡単です。

<p>文章をここに書く<p>

これがHTMLです。<p></p>の間に書かれた内容は文章として扱われます。それが文章である、ということをコンピューターに示すのに<p>とマークしている、ということです。他の例として、テキストリンクは、<a>テキストリンク</a>と書けば、テキストリンクとして扱われます。HTML以外にもマークアップ言語はあり、このように、<>でマークしていく言語をマークアップ言語と呼びます。

「コンピューターに示す」と先述しましたが、HTMLの場合、示す先がほぼウェブブラウザに限定されます。ブラウザは、HTML（とそれ以外の言語の組み合わせ）の内容を解釈して、描画しているのです。

CSSとは

CSSは、「Cascading Style Sheets」の略です。そのため、CSSという呼び方ではなく、「スタイルシート」と呼ぶ人もいると思います。HTMLより少し複雑ですが、やはりプログラミング言語ではありません。

p { color: #fff; background-color: #000; text-align: center; }

これで、先ほど示した<p>文章をここに書</p>というHTMLが、次のようにブラウザで表示されるようになります。

※ このサイトではフォントの指定をしているので、厳密にはこの記述だけだと、その点は表示のされ方が異なります。

文章をここに書く

color: #fff;でテキストの色を白に、background-color: #000;でテキストの背景を黒に、text-align: center;でテキストの左右方向の表示位置を中央に指定しているという内容です。
特に最近になって、条件によって指定の仕方を変えられるようになっているため、HTMLより複雑と先述したのは、その点だけです。

HTMLとCSSって誰が決めてるの？

本題に入っていきます。
HTMLやCSSなどウェブの技術について、「W3C」と略される「World Wide Web Consortium」という団体が仕様を定めてきました。URLにつく「www.」はここからきています。
（そもそも、「www.」と付けなければならないなんていう決まりはないのですが）

W3Cは、標準化団体です。法人ではありません。利益を得てません。しかし、世界中の有名企業が参加しています。有識者が議論して仕様を決めているのです。つまり、HTMLの仕様を決めるのにかかるコストは企業が支払っているともいえます。

ただW3Cは仕様の案ができてから正式なものとして勧告をするまでに世界中から自由に意見を募るということをするなど、しっかりしたプロセスを経る代わりに相当に時間がかかっていました。そして仕様の内容と現場が求めるものが乖離しているということに不満を持ったメンバー、Apple社、Mozilla社、Opera社によって2004年にWHATWGが誕生します。WHATWGがW3Cが定めるHTMLの仕様とは別にHTMLの仕様を定めてブラウザに実装し、結局その仕様がW3Cが定めるHTMLに取り込まれる、という流れがしばらく続きましたが、2021年1月28日、W3CはW3Cが定めてきたHTML5を廃止し、WHATWGが定めるHTML Living Standardが正式なものとなりました。

どうしてW3CやWHATWGが活動するのか

ただの物好きが集まっているわけではありません。ブラウザは、どこが作っているでしょうか？そうです、企業です。ブラウザでどう表示したくて、それにはどういう仕様がよいのか、というのをそれぞれの企業が持ち寄っている形になっています。自社にとって不利にならないように、有利に運べるように、というのが企業としての狙いとしては少なからずあるはずです。

標準仕様の重要性

Internet Explorer（以下、IE）のサポートが2022年6月15日（米国時間）で終わりましたが、IEはどうしてシェアを失ったのでしょうか？

IEのシェアが下がり始めた頃、MicroSoftはSilverlightというHTMLに置き換わり得る技術を推進していました。AdobeのFlashに似たような技術です。その頃は「HTML5 vs Flash vs Silverlight」という議論が活発でした。私もどの技術が勝ち残るか、その頃は読めなかったです。ブラウザ依存がなく、諸々Microsoftだけで完結し、アクセシビリティの対応など進んでいたSilverlightに勝ち目はあると思っていたのですが、結果はHTML5の圧勝でした。その時点では表現の自由度、アクセシビリティの対応などで必ずしもHTMLが有利とも言えない状況ではあったのですが、特定の企業に依存する技術が普及するというのは他の企業にとって不利なので、その点でHTMLが勝ち残ったというのもあるのではと思います。
私はこの頃にW3Cの活動にも多少ながら参加しています。そして、いかに標準仕様というのが重要で、素晴らしいかを実感しています。

標準化団体が定めた仕様を、実際にブラウザでどう表示するかは、ブラウザの仕様を決める企業が決めることです。IEは、HTMLで定められていった新しい仕様のサポートがされない部分が多かったです。そうするとコンテンツ開発者は、IEのために特別な対応を強いられます。コンテンツ開発者が対応しきれないと、エンドユーザーが不便を強いられます。
HTMLを参照するもの（これをユーザーエージェントと呼びます）のひとつに、スクリーンリーダーもあります。スクリーンリーダーは主に視覚障がい者が画面を読み上げながらウェブを利用するためのものです。スクリーンリーダーも、標準仕様を踏まえて読み上げ方を決めています。例えば<a>テキストリンク</a>であれば、それがテキストリンクであると解釈して、エンドユーザーに読み上げてそう伝えるのです。

Googleが重視する「サイト閲覧者のため」であるので、ウェブ標準仕様に沿っているかどうかは、SEOにも強く影響します。事実、不思議と上位に表示されてないようなサイトのコードを見ると、ウェブの標準仕様からかけ離れたものであるということが多いです。

コンテンツ開発者も標準仕様を意識するべき

ブラウザによっては、標準仕様に従ったコーディングではなくても、ある程度よきに計らってくれます。しかし、コンテンツ開発者がそれに甘えていると、「技術仕様の検討」、「ブラウザの開発」、「コンテンツの開発」、この3者間に負の循環が生まれます。エンドユーザーも、標準仕様に従ったコーディングになっている方が慣れていて使いやすいと感じることが多いはずです。私は、ウェブに関わる全てのステークホルダーは、標準仕様を強く意識するべきだと思っています。
このような仕組み、背景をよく知っているので、私は標準仕様を常に意識しながらデザインをしています。最近は、CSSに新しい仕様がどんどん加わり、それに対するブラウザの対応も進んでいるので、デザインの自由度が高く、私もウェブデザインが楽しいと思うようになりました（以前は、制約との戦いが主でした）。

まとめ

この記事でHTMLの仕組みについて少しでも分かった、という方がいれば幸いです。
そして、ウェブ標準を意識したサイトを制作したい方、ぜひお問い合わせください！