こんにちは、Akira(Type-EDGE)です。

最近の社会変化を見ていて、プログラミングが一般的に行われるようになってきたと感じていますが、あなたはそう思いませんか？

私が初めてプログラミングを始めた2000年頃は、まだまだプログラミングはオタクの世界という雰囲気がありました。

カフェでプログラミングをしていると、「なんかキーボード打ってニヤついているよ」な目で見られていたのを今でも覚えています（ニヤついていたら、誰もがヤバいやつって思いますね）。

そんな私にプログラミングについて、このような質問がありました。

「入力フォームを作るのに、htmlとcssはどうして両方必要なのですか？」

結論から言うと、

• 一般的にはhtmlとcssを使って作った方が良い。
• テスト段階とか、装飾を気にしないならばhtmlだけで十分。

この理由、あなたはピンときますか？

この記事では、「どうしてhtmlとcssが必要なの？」を分かりやすく解説します。

htmlとcssの違いは何？　両方を使う必要はどうしてあるの？

そもそもhtmlとcssって何が違うの？

htmlとcssは別々の名前なのに、ホームページ等を作る際には一緒に使用されています。

それだったら、そもそも1つの名前にしてしまった方が覚えやすいように感じますよね。

実は、htmlとcssは求められている機能が全然違います。

だから、一緒にしても良いけれど、別々にしておいた方が覚えやすいし、扱いやすいのだと私は理解しています。

htmlとcssの役割をドキュメントで例えてみると？

分かりやすくドキュメント風に例えますと、htmlとcssは次の通りです。

• html:文章とタグ
• css:タグを装飾する書式設定

つまるところ、htmlが中核的な役割を成し、cssは「どう表示するか？」を決めています。

htmlの役割

ドキュメントソフトで資料を作る際、以下のような感じにフォントサイズやアクセントをつけて、タイトルや見出しを本文と区別していませんか。

• タイトルをフォントサイズ32px
• 章の見出しをフォントサイズ22px
• 節の見出しをフォントサイズ18pxで下線付き
• 本文をフォントサイズ18px

このように文字サイズやアクセントをつけることで、私たち人は「その文章がどのような構成になっているか」や「文章の中で重要なことは何か」を認識しやすくしています。

しかし、上記の状態だと機械やシステムがタイトルや章、節を認識できない可能性があるのです。

上記の例ではタイトルを32pxのフォントサイズと書きましたが、別のタイミングでは文字数が多いので28pxにしたいかもしれません。場合によっては22pxにして章の見出しと揃えたいかもしれません。

「そんなの見ればわかるでしょ」と言いたいかもしれません。

これは私たち人でも起きることで、上記に書いたフォントサイズの区分けを私は文章の区分けとして認識できますが、別の方は違う区分けを想定していて、私の認識と異なる可能性が出てきます。

このような問題は機械やシステムも同様で、一定の条件を満たす値としなければタイトルや章・節の見出し、本文として認識できません。

文章の作成者の意図が、作成者以外の方に伝わるようにするには、文章のセクションごとにルールを決める必要があります。

このルールがhtmlのタグです。

htmlは文章をタグで括ることで、文章の構成を一定のルールに当てはめて、作成者以外の方や機械・システムが作成者と同じ認識を持てる役割を果たします。

上記のドキュメントの例をhtml風に書き改めるとこのようになります。

• h1(タイトル)をフォントサイズ32px
• h2(章の見出し)をフォントサイズ22px
• h3(節の見出し)をフォントサイズ18pxで下線付き
• pやli(本文)をフォントサイズ18px

cssの役割

htmlは、作成者の意図を第三者や機械・システムに伝える役割を持つことを説明しました。

もしも、上記のドキュメントの例が次のようだったら、あなたはどう感じますか？

• h1(タイトル)をフォントサイズ18px
• h2(章の見出し)をフォントサイズ18px
• h3(節の見出し)をフォントサイズ18pxで下線付き
• pやli(本文)をフォントサイズ18px

文章の上から下まで、ずっと同じフォントサイズで書かれた文章です。

もちろんタグを読めば、どれがタイトルや見出し、本文なのかは一目瞭然です。

機械やシステムだったら、タグで差別化して読んでいるので、もしも「タイトルを抽出して」とアプリケーションから指示があったら、h1のタグを直ぐに出力できます。

対して、私たち人は文章を読むときにタグごとに読んでいません。

むしろタグなどという区分けを用いず、サイズ違いや色、装飾といった書式の違いによって文章の役割を直感的に差別化しています。

この書式の違いがcssが果たす役割です。

cssは、機械やシステムにとっては不要だけれども、私たち人が文章を読む上で認識しやすくする為に必要な書式設定を行っています。

タグごとに書式設定を設けることで、文章全体が統一感のある書式となり、私たち人にとって読みやすい文章になります。

上記のドキュメントの例をcss風に書き改めます。

• h1(タイトル)の書式設定はフォントサイズ32px
• h2(章の見出し)の書式設定はフォントサイズ22px
• h3(節の見出し)の書式設定はフォントサイズ18pxで下線付き
• pやli(本文)の書式設定はフォントサイズ18px

 htmlとcssによる文章のセクション化は大切です。

htmlとcssの役割について今回は書かせて頂きました。

初歩的なことと軽視しがちですが、役割の違いを理解すると「今、どのようなコードを打っているのか」が明確になるので、求めている結果に到達しやすくなります。

最後に今回の内容について復習します。

htmlとcssについて、分かりやすくドキュメント風に例えると次の通りです。

• html:文章とタグ
• css:タグを装飾する書式設定

同じソースの中で2つの異なる言語が扱われているのは、その役割が明確に異なっているからだと私は考えています。

もちろん、htmlのタグにstyleを指定すれば書式設定を行えますが、この方法は保守・運用がし辛くなるばかりか、一定のルールに沿った表示ができなくなります。

文章の役割、役割ごとの表示ルールを明確に差別化した方が私たちも機械・システムも判読しやすくなります。

今回の記事はいかがでしたか？

私はパソコンやプログラミング、ガジェットに関する情報を分かりやすく記事にして配信していますので、「これって何だろう？」と悩んでいることがありましたら、ぜひコメント欄やお問い合わせフォームからお願いします。

もし今回の記事が良かったと思った方や評価したいと思った方は、コメントを残して頂けると嬉しいです。 

また、私はパソコン以外にも記事を書いていますので、そちらも読んでいただけると幸いです。