HTMLとCSS　【岡嶋教授のデジタル指南】

　いまやウェブページはなくてはならないインフラです。どんなパソコンやスマートフォンからでも、距離や時間を気にせずアクセスして情報を見たり、サービスを受けたりできる便利な仕組みです。

　自分自身で作る機会も多いウェブページが、どういう仕掛けになっているのかを見てみましょう。私たちが現在使っているページのきれいなデザインや、構造化された文章、音声読み上げに対応した写真―。その裏側にどんな技術があるのでしょうか。

　がっちり理解しておくべき中核部分はHTMLとCSSです。

　HTML（HyperText Markup Language）はウェブページの骨格を作る技術です。名前のなかにマークアップ言語とあるように、情報の中にマーク（印）をつけます。その印のことを「タグ」と呼んでいます。

　ページの見出し、本文、写真、リンク、リスト。こうした要素の一つひとつ、<h1>や<p>といったタグで囲んで記述するのです。こんな感じです。

　　　<h1>共同通信のページへようこそ</h1>

　　　<p>ここが本文です</p>

　　　<a href="https://example.com">別のページへ</a>

　h1は見出し、pは段落、aはリンクといった具合です。

　こうしておくと、情報を効率よく管理・利用することができます。例えば、「このページをそのまま書籍にしたいぞ」と思ったとき、見出しの部分だけを集めてくればすぐに目次をつくることができます。目の不自由な方のために読み上げをするときも、「写真部分は付与された説明文を読もう」などと調整することが可能です。

　これに対して、彩りを施すのがCSS（Cascading Style Sheets）の役割です。「見出しの文字をでかくする」「この部分を赤字にする」「写真を回り込むように文章を配置する」といったように、見た目を整えるための指示を記述します。

　　　h1 {

　　　color: navy;

　　　font-size: 20px;

　　　}

　例えば、こんなふうに書きます。これは、「見出し部分は字の色をネイビーにして、字の大きさは20ピクセルだ！」という意味です。見出しだから、目立つ色で、大きな字にしたわけです。

　実は以前はHTMLにどちらの仕事もさせていました。でも、その場合、「ここは大きな字にしたい」と言って<h1>タグをつけるようなページも出てきます。<h1>タグをつければ結果として大きな字で表示するブラウザーが多いですが、本来は「大きな字」ではなく「見出し」を意味するタグです。

　すると、見出しではないところに、「見出しだよ」という意味が付与されるわけで、あとで「見出しを集めて目次を作るぞ」なんてときに文書がしっちゃかめっちゃかになります。それはまずいということで、骨格のHTMLと、見た目のCSSを分離したのです。

　「サイトが少し古くなったので、デザインをガラっと変えたい」なんてときも、CSSを書き換えるだけで、構造はそのままに見た目を一新することができます。

　ウェブページは情報とデザインを別々に管理している。その構造を知っておくだけで、ウェブに関わるときの自由度が大きく広がり、単なる閲覧者から一歩進んだ視点でウェブを使いこなすことができるようになるでしょう。

　例えば、HTMLで文書構造をきちんと記しておけば、リーダーによる音声読み上げや、キーボード操作だけでのページ内移動など、障害のある方にとっても使いやすいページになります。見た目の装飾だけでなく、情報の意味を正しく伝えることができるわけです。

【著者略歴】

　岡嶋　裕史（おかじま　ゆうし）　中央大学国際情報学部教授／中央大学政策文化総合研究所所長。富士総合研究所、関東学院大学情報科学センター所長を経て現職。著書多数。近著に「思考からの逃走」「プログラミング/システム」（日本経済新聞出版）、「インターネットというリアル」（ミネルヴァ書房）、「メタバースとは何か」「Web3とは何か」（光文社新書）、「機動戦士ガンダム ジオン軍事技術の系譜シリーズ」（KADOKAWA）。Eテレ スマホ講座講師など。