今さら人に聞けない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の記述に何が書かれているのか」についてを説明します。(次回は、JavaScriptについて説明予定。)

次のページへ

ページ

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

PPC
クリック課金型の広告の総称。しばしば、検索連動型広告のことを指して使われることも ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]