画像の他にも沢山の「HTMLのリンクファイル」があります。リンクされているのは「CSS」と「JavaScript」、その他にも沢山のWebサービスがあります。今回は「CSS」をメインに見ていくことにしましょう。複雑なレイアウトをHTMLだけで実現するのは「しんどい」HTMLだけでは複雑なレイアウトが実現できない、というお話をしましたが、昔はHTMLだけで何とかしようとしていました。鍵のシルエットに文字が回り込んでいるように見ますよね。実は、これ<table>タグという、本来は「表」を書くためのタグを使い、表の罫線の太さをゼロにして見えないようにする複雑なレイアウトで作られているのです。昔、こういったHTMLの使い方が大流行しました。Cherokee)のサイトだと筆者は思っています。実は細切れで「表」になっていました!〕その当時、こういったレイアウトは、革新的で「なぜ、こんなことができるんだ」「やってみたい!」となりましたが、テキストがばらばらに表のセルに入っている状態では、検索エンジンも読み上げソフトも、まともに文章を読むことができませんでした。HTMLを書く人(コーダー)は、この文字の回り込みの表を組むことに大変な時間をかけていました。Sheets))」です。[2]した「文書を世界で共有する」というハイパーテキストの理想がどこかに行ってしまいます。そこで、W3C(HTMLなどについて決める国際組織)は1996年に「CSS」について勧告を行い、「あまり複雑なことはHTMLにさせず、別で定めるスタイル設定ファイルに任せてください」と呼びかけたのです。ようは、「レイアウトなどの指示は別のファイルで指定してください」というわけです。最初はスタイルシートという部分だけが知られるようになり、文字のサイズなどをHTMLの中の必要な場所に随時書き込むようにしていました。HTMLの中の要素がどんどん増え、関係も複雑になり、その都度指示をするような場当たり的な書き方ではうまくいかなくなりました。そこで、CSSは別ファイルにしてHTMLからリンクすることでファイルの内容をブラウザに伝え、どの順番でどのページを表示しても、矛盾なくレイアウトが表示できるようになりました。して、CSSはHTMLからのリンクファイルとなったのです。パソコンで見ているときとスマホで見ているときの表示が違うサイトが多ですよね。実はこれ、HTMLは1つのものですが、パソコン表示用CSS、スマホ表示用CSSで切り替えて、パソコンとスマホで違う表示ができるという仕組みになっているものが多いのです。他にも、Webページの中に「印刷する」ボタンを置いて、それをクリックしたら印刷用のCSSに切り替えているので、ヘッダーやフッターを表示せずにページの内容だけ印刷できる、といった工夫も行われています。HTMLの基本構造を説明いたします。HTMLは大きく分けると2つの部品からできています。ここまでが「ボディ」(本文)</html>HTMLの上の方は「ヘッダー」です。ブラウザなどに対して基本的な情報を伝え、表示のための準備をさせるためのエリアです。ここに書いたものはブラウザに表示されません。ヘッダーの下には本文部分「ボディ」があり、この中に書いた内容がブラウザの窓の中に表示されます。ブラウザは先にヘッダーを読んでからボディの読み込みを始め、ボディに書かれたものを表示しようとします。ヘッダーの中にCSSのリンクを書いておけば、確実にボディの表示よりも先に情報を受け取ってくれて、表示に間に合うわけです。次に、基本的なCSSのリンクの書き方を説明します。HTMLのヘッダーにリンクを貼るタグを書き込みます。href="/css/layout.css"/>まさに「リンクします」というタグです。「rel(レル)」というのは「relation」の略で、関係を表します。リンク元のHTMLにとって、このリンクファイルはスタイルシートであるという、関係を表すのですね。「href(エイチレフ)」は以前にもご説明したとおり、ハイパーテキストリファレンスの略で、参照相手を表します。href以下は「ここのCSSファイルを参照してください」という意味です。ちなみに、CSSファイルは拡張子が「.css」となります。CSSのリンクタグには他にも入れられるものがあります。印刷(プリントアウト)したいときに使うスタイル。/>上記のように、「媒体は印刷です」と入れてやれば印刷時のスタイルを指定することができます。スマホで見たときはこちらなど、最近ではヘッダーの中からたくさんのCSSファイルにリンクするのが普通になっています。WebサービスとしてCSSのファイルを貸し出すものもあり、CSSのhrefが別ドメインになっているサイトも増えていますね。CSSのリンクが切れると裸のHTMLが表示されてしまう!実際にCSSがどんな働きをしているかを見ていきましょう。テストHTMLを見てください〔図7-4〕。CSSのリンクがあるもの、ないものをそれぞれブラウザで表示した様子を並べています。左はCSSのリンクがあるテストHTMLです。全体に赤い背景色がついていて、文章は4段落あります。他にも文字の大きさや色、その背景の色が変わっていることがわかります。この簡単なレイアウトは主に、HTMLからリンクされた外部のCSSファイルによって決められています。このCSSのリンクを切るとブラウザ表示は右のようになります。背景色も消え、一定の文字サイズを保った裸のHTMLになってしまいます。CSSがどんな働きをしているかイメージが沸きましたでしょうか?次のページには、もっと詳しくCSSを知りたい方のために、「HTMLとCSSの記述に何が書かれているのか」についてを説明します。()HTMLとCSSの記述HTMLとCSSの記述には具体的に何を書いているのかを説明いたします。HTMLのヘッダーまずはHTMLの記述〔図7-5〕です。テストHTMLの記述〕ヘッダー部(<head>~</head>)には、どのHTMLにも書いてあるページタイトル(<title>~</title>)の他に、スタイルシートへのリンクがあります。href="./test.css">前述した通り、「rel」は「これからリンクするファイルは、このHTMLにとってスタイルシートです」とブラウザに教えています。「href」は、「リンク先のファイルは「test.css」というファイルです」という指定になります。ファイル名の前の「./」というのはブラウザにファイルのありかを教えるものです。「今いる〈※1〉ディレクトリ(フォルダ)にありますよ」ということを意味します。※1ディレクトリ(directory)とは英語で「住所録」などを意味する言葉です。MacやWindows上でデータファイルを整理する際に紙ばさみの姿を使って「フォルダ」としているのと同じです。インターネットを主に動かしているUNIXなどの世界では紙ばさみのたとえ話がありませんので、UNIXでは同じ意味のものを「ディレクトリ」と言います。本文部分(<body>~</body>)を見ると、段落タグ(<p>~</p>、paragraphの略)が4つだけある、というシンプルな構成になっていることがわかります。段落タグは文章を段落に分けてくれるタグなので、勝手に1行ずつ開けて読みやすくしてくれます。これはCSSがリンク切れしても変わりません。HTMLには文章の構造だけ示して、レイアウトはCSSでやりましょう、という原則がありますが、段落は「文章の構造」の側に属している、と考えてください。id="chuui">とIDがつけられています。IDはネットでは普通に使われる言葉になっていますが、「identification」の略で元は「身分証明」のこと。他と区別するための記号ということです。2番目と3番目の段落は、他と違うということを示しています。CSSの記述さて、CSSの記述〔図7-6〕を見て行きましょう。CSSでは「body」「p」「#kyouchou」「#chuui」の4つの決め事が書かれています。「body」では周囲に20ピクセルの空き(margin)をとり、背景色(background-color)はピンク寄りの赤(#FFCCCC)にしています。bodyは本文部分全体を意味するものなので、全体に空きができ、色がついています。ここには文字のサイズなどは決められていません。pという段落タグ全体に、このサンプルでは文字サイズ(font-size)は「小さい」という指定がついています。同じpでも「kyouchou」というIDがついたものだけは文字サイズは「普通(中ぐらい)」、文字の太さ(font-weight)は「太字」。背景色はグレーがかった青(#CCCCFF)、内側に空き(padding)を5ピクセルとるという指定です。「chuui」というIDの段落は、文字サイズを指定せず、背景色は赤(#FF0000)、文字色(color)は白(#FFFFFF)、内側に空きを5ピクセルとるという指定です。文字のサイズについて何も指定していませんが、その場合にはp全体の指定が活かされ、文字は小さい文字になっています。親要素「p」につけた指定が子要素「chuui」にも引き継がれる、「カスケーディング」の一番簡単な例です。CSSの働き(再掲)〕このCSSをHTMLにリンクすると、ブラウザがそれを解釈して、指定通り表示してくれるわけです。IDやディレクトリ名はまともな英語を使うようにしようテストHTMLではわかりやすく日本語でIDをつけています。kyouchou=強調chuui=注意しかし、これはネット上で決められているルールではありません。IDには、他と区別する言葉なら何でも任意に名前をつけて良いのです。「kyouchou」や「chuui」などの日本語を使うと超ダサいので、皆さんはもっとかっこいい名前をつけてくださいね。私も仕事の中でこんな日本語名をつけることはカッコ悪いのでしませんが、まともな英語(emphsisやattention)を使うと読んだ方が、「正式にはこれを使うのか」と思ってしまう可能性もあるので、あえてこんな言葉にしています。基本的には、任意に名前をつけていいものにはまともな英語を使うようにしてください。ネットやプログラム言語上のルールとして使われている言葉(予約語と言います)を使うとややこしいので、その言葉は避けた方が良いのですが、ダブルコーテーション記号("")の中は自由に英語を使って大丈夫です。したややこしさを避けるために、HTMLのタグでは英語を元にした略語が使われています。reference)など、無理やりな略が多いですが、考えている人たちは一生懸命ダブらないように略を考えているので、覚えてあげてください。次回はもうひとつ、HTMLからリンクしていろいろな働きをさせることができるファイル「JavaScript」について解説していきましょう。[1])について、「画像が多くても重くてもページの表示には影響がない」というご指摘があったので、少し追記しておきましょう。確かに回線は速くなり、昔ほど重くはなくなりました。今でも誰もが最速の環境でサイトを見ているわけではありません。町中でスマホでWebサイトを見ているときには、「HTMLは来ているけど、画像が表示されない」状態の画面を皆さんも日常的に見ているのではないかと思います。上記はパソコンでキャプチャーしたものですが、検索して出てきたサイトを順番に見てみてください。した「HTMLは来ているのに、重い大きな画像が来ていない状態」が次々に現れて、決して珍しくないことがわかります。回線が早くなった現在でも起こりえる現象ですので、皆さんも油断なく、ご自身のサイトを点検してください。問題がありそうなら、サイトパフォーマンス向上の専門企業にぜひご相談を。ほんとに、全然変わりますから。http://b.hatena.ne.jp/entry/https%3A%2F%2Fwebtan.impress.co.jp%2Fe%2F2019%2F05%2F22%2F32304。