今さら人に聞けないWebの仕組み
CSSはレイアウトの専門家。HTMLでは表現できないものを実現する【第7回】
HTMLでは複雑なレイアウトはできません。そこで助けてくれるのが「CSS」ですが、CSSって一体何なのか、どういう働きをしているのかを解説します。
Webを記述するメインの言語は、「研究論文を共有する」という要望から生まれたHTMLです。HTMLは普通のテキストにタグと呼ばれるさまざまな指令を書き込むと、太字にしたり色を変えたり、さまざまな表現ができます。
しかし、画像や動画を表示したい、Webページ上で計算したり、リアルタイムに表示を変えたりしたい、もっと複雑なレイアウトを実現したい、という要望はHTMLだけではかなえられません。HTMLだけでは表現力が弱いのです。
そこで、WebサイトはHTMLファイルにいろいろな別ファイルをリンクすることでそうした要望をかなえてきました。
たとえば画像です。1996年ごろには1つのHTMLに5つぐらいの画像がリンクされているだけでしたが、その後はどんどん増えてきた、という話を前回（第6回）にしました。
画像の他にも沢山の「HTMLのリンクファイル」があります。主にリンクされているのは「CSS」と「JavaScript」、その他にも沢山のWebサービスがあります。
今回は「CSS」をメインに見ていくことにしましょう。
複雑なレイアウトをHTMLだけで実現するのは「しんどい」
HTMLだけでは複雑なレイアウトが実現できない、というお話をしましたが、昔はHTMLだけで何とかしようとしていました。
たとえば、下図を見てください。鍵のシルエットに文字が回り込んでいるように見ますよね。
〔図7-1 鍵のシルエットに文字が回り込んでいる〕
実は、これ<table>タグという、本来は「表」を書くためのタグを使い、表の罫線の太さをゼロにして見えないようにする複雑なレイアウトで作られているのです。昔、こういったHTMLの使い方が大流行しました。流行のきっかけは、1996年ごろのアメリカのジープ・チェロキー（Jeep Cherokee）のサイトだと筆者は思っています。
〔図7-2 実は細切れで「表」になっていました！〕
その当時、こういったレイアウトは、革新的で「なぜ、こんなことができるんだ」「やってみたい！」となりましたが、テキストがばらばらに表のセルに入っている状態では、検索エンジンも読み上げソフトも、まともに文章を読むことができませんでした。
そして、HTMLを書く人（コーダー）は、この文字の回り込みの表を組むことに大変な時間をかけていました。それを救うように出てきたのが「CSS（カスケーディング・スタイル・シート（Cascading Style Sheets））」です。
レイアウトは「CSS」に任せよう
HTMLの記述がどんどん複雑になり、レイアウトのために文章を表で細切れにしてしまうようになると、第3回で解説した「文書を世界で共有する」というハイパーテキストの理想がどこかに行ってしまいます。
そこで、W3C(HTMLなどについて決める国際組織)は1996年に「CSS」について勧告を行い、「あまり複雑なことはHTMLにさせず、別で定めるスタイル設定ファイルに任せてください」と呼びかけたのです。ようは、「レイアウトなどの指示は別のファイルで指定してください」というわけです。
〔図7-3 レイアウトの専門家CSS〕
最初はスタイルシートという部分だけが知られるようになり、文字のサイズなどをHTMLの中の必要な場所に随時書き込むようにしていました。
しかし、HTMLの中の要素がどんどん増え、関係も複雑になり、その都度指示をするような場当たり的な書き方ではうまくいかなくなりました。
そこで、CSSは別ファイルにしてHTMLからリンクすることでファイルの内容をブラウザに伝え、どの順番でどのページを表示しても、矛盾なくレイアウトが表示できるようになりました。こうして、CSSはHTMLからのリンクファイルとなったのです。
たとえば、パソコンで見ているときとスマホで見ているときの表示が違うサイトが多ですよね。実はこれ、HTMLは1つのものですが、パソコン表示用CSS、スマホ表示用CSSで切り替えて、パソコンとスマホで違う表示ができるという仕組みになっているものが多いのです。
他にも、Webページの中に「印刷する」ボタンを置いて、それをクリックしたら印刷用のCSSに切り替えているので、ヘッダーやフッターを表示せずにページの内容だけ印刷できる、といった工夫も行われています。
CSSはHTMLヘッダーの中からリンクさせる
CSSをHTMLにリンクファイルとして入れるにはどうしたらいいでしょうか？ まずはHTMLの基本構造を説明いたします。
HTMLは大きく分けると2つの部品からできています。
<html> <head> ここから </head> ここまでが「ヘッダー」 <body> ここから </body> ここまでが「ボディ」（本文） </html>
HTMLの上の方は「ヘッダー」です。ブラウザなどに対して基本的な情報を伝え、表示のための準備をさせるためのエリアです。ここに書いたものはブラウザに表示されません。
ヘッダーの下には本文部分「ボディ」があり、この中に書いた内容がブラウザの窓の中に表示されます。
ブラウザは先にヘッダーを読んでからボディの読み込みを始め、ボディに書かれたものを表示しようとします。だからヘッダーの中にCSSのリンクを書いておけば、確実にボディの表示よりも先に情報を受け取ってくれて、表示に間に合うわけです。
CSSのリンクの書き方
次に、基本的なCSSのリンクの書き方を説明します。HTMLのヘッダーにリンクを貼るタグを書き込みます。
<link rel="stylesheet" href="/css/layout.css"/>
まさに「リンクします」というタグです。「rel（レル）」というのは「relation」の略で、関係を表します。つまり、リンク元のHTMLにとって、このリンクファイルはスタイルシートであるという、関係を表すのですね。
「href（エイチレフ）」は以前にもご説明したとおり、ハイパーテキストリファレンスの略で、参照相手を表します。href以下は「ここのCSSファイルを参照してください」という意味です。ちなみに、CSSファイルは拡張子が「.css」となります。
CSSのリンクタグには他にも入れられるものがあります。たとえば印刷（プリントアウト）したいときに使うスタイル。
<link rel="stylesheet" href="/css/layout.css" media="print" />
上記のように、「媒体は印刷です」と入れてやれば印刷時のスタイルを指定することができます。
スマホで見たときはこちらなど、最近ではヘッダーの中からたくさんのCSSファイルにリンクするのが普通になっています。WebサービスとしてCSSのファイルを貸し出すものもあり、CSSのhrefが別ドメインになっているサイトも増えていますね。
CSSのリンクが切れると裸のHTMLが表示されてしまう！
実際にCSSがどんな働きをしているかを見ていきましょう。テストHTMLを見てください〔図7-4〕。
CSSのリンクがあるもの、ないものをそれぞれブラウザで表示した様子を並べています。
〔図7-4 CSSの働き〕
左はCSSのリンクがあるテストHTMLです。全体に赤い背景色がついていて、文章は4段落あります。他にも文字の大きさや色、その背景の色が変わっていることがわかります。
この簡単なレイアウトは主に、HTMLからリンクされた外部のCSSファイルによって決められています。
そして、このCSSのリンクを切るとブラウザ表示は右のようになります。背景色も消え、一定の文字サイズを保った裸のHTMLになってしまいます。
CSSがどんな働きをしているかイメージが沸きましたでしょうか？
次のページには、もっと詳しくCSSを知りたい方のために、「HTMLとCSSの記述に何が書かれているのか」についてを説明します。
「直帰率」という言葉の生みの親として知られるこの記事の筆者・石井研二氏がWeb改善の基本を解説する時間の講座を受けてみませんか？
» 今さら人に聞けないWebの仕組み のバックナンバーを見る
関連記事:
これは広告です
石井 研二（MILS）
株式会社ミルズ 主任研究員
雑誌編集、通販カタログ企画を経て、95年からウェブプロデューサ。Web黎明期からアクセス解析を使い、多くの企業サイトを成功に導く。「直帰率」という言葉の生みの親として知られる。
Webそのもののコンサルティングから、Webを絡めた売上向上やコスト削減など経営全般に関わるコンサルティングが増えてきたため、企業分析と企業Web分析を組み合わせて「すべてを見る」ことをコンセプトとした分析会社「ミルズ」を設立。株式会社ミルズ主任研究員。
著書に『ウェブ立地論 ～“来てほしい人にアプローチする"集客につながる顧客目線のウェブの作り方』『ガッチリ成果を出すWeb担当者の教科書 ～便利テンプレートデータで実務を効率化！』（技術評論社）、『改訂新版アクセス解析の教科書』（翔泳社）等がある。
これは広告です
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
デジタルマーケティングの即戦力を2日間で育てます！ 第24期「企業Web担当者 初級講座」6/13・6/14【2024年6月度】
4,867 いいね！「第6回 Googleアナリティクス4実践講座～GA4を使いこなす！ 計測設定からレポート・分析活用まで」オンライン開催
1,164 いいね！Web担 編集後記 2024年3月
441 いいね！ライオンでアドビのCMSを導入！ 導入の背景や活用方法を聞いた
431 いいね！話題の「ChatGPT」こんなに使えたら本当にすごい！ 目からウロコの使い方を解説｜GPTs活用事例も
289 いいね！【広告主・マーケター限定】デジタルマーケターズサミット 2024 Winter 2/28、29オンラインLIVE配信
258 いいね！【満員御礼】「GA4祭り」をテーマにアクセス解析の専門家が集結！ 3月21日（木）＠渋谷【Web担当者Forum Meet UP #2】
88 いいね！生成AI「Copilot」でMicrosoft 広告はどう変わる？ ―Web担編集長・四谷が根掘り葉掘り聞いてきた！
85 いいね！STUDIO導入・内製化で運用コストが40分の1に！ パシフィコ横浜のWebサイトフルリニューアルの成果
82 いいね！
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!