LPI WDEを使いこなす #3: CSSでプロを目指す

このシリーズの前回の記事では、HTML言語と、それがテキスト要素に意味的な構造を与える方法について説明しました。ウェブサイトの構造が出来上がったら、それをグラフィカルな観点からカスタマイズする必要があります。スタイルがなければ、どのウェブサイトも白地に黒文字の単純な組み合わせとなり、おそらくリンクや画像など他の単純な要素で装飾されたものとなるでしょう。CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、私たちを救ってくれる。

なぜスタイルシートなのか？

HTMLページを作成し、段落、リスト、画像、リンクで構成することを想像してみてください。コンテンツをより見やすくするために、視覚的な方法を決めたいと思うでしょう。CSSスタイル・シートは、まさにこの目的を果たすものです。CSSスタイル・シートを使えば、文書の範囲をプレゼンテーションから切り離すことができ、さまざまなHTML要素を視覚的にどのように表現すべきかを指定することができます。

CSSを抜きにしてHTMLを語ることは無意味であり、その逆もまた然りです。この2つの言語の相互関係は非常に密接です： 完全で視覚的に魅力的なウェブページを作成するには、両方の言語の基礎を知る必要があります。CSSを使えば、ウェブページをカスタマイズすることができます：

• 背景の追加
• ボーダーとマージンを追加する
• テキスト、単語、またはテキストの一部の色を変更する
• フォントとサイズを変更する-つまり、テキストの書式を定義する
• 明確な方法でコンテンツを配置する
• リストで使用する箇条書きや番号の種類を指定する

スタイル・シートは、ウェブ・ページ内の要素または要素グループのプロパティを指定するルールのセットだと考えてください。CSSルールは、セレクタと1つ以上の宣言から構成されます。セレクタは、文書内の1つまたは複数の要素を選び出します。宣言は、選択された要素のプロパティを設定します。たとえば、段落のテキストをすべて赤色にしたり、特定の単語の背景に色をつけたり、文書内のリンクのスタイルを変更したりといったことが可能です。最終的な目標は、ウェブサイトのレイアウト全体を管理し、エンドユーザーにとって視覚的に魅力的なものにすることです。

Linux Professional Institute (LPI)のWeb Development Essentials認定資格では、Webページにスタイルを追加するための基本的なCSSルールの作成方法を学びます。しかし、CSSは単純な静的ルールのセット以上のものです。

CSSのパワー

インターネット・ユーザーはさまざまなモニターを持ち、それぞれが幅広い解像度を提供している。さらに近年では、スマートフォンやタブレットでウェブサイトを閲覧する人が増え続けています。モバイル機器の表示領域は、コンピュータのモニターとは大きく異なります。

従って、こう問うのはもっともなことだ：

「どのデバイスでも正しく表示されるウェブサイトを作るにはどうすればいいのか？

現在、ウェブサイトはレスポンシブでなければなりません。レスポンシブとは、ウェブサイトが表示されるディスプレイのサイズに応じて異なる反応を示すことを意味します。ウェブ開発者は、エンドユーザーがコンテンツを読みながら閲覧するページのサイズをできるだけ変更しないようにしなければなりません。企業の優れたマーケティングには、コンピューター、タブレット、スマートフォンなど、最新のデバイスに対応できるこの種のウェブサイトが不可欠です。

これを実現するには、いわゆるメディアクエリを使用する必要があります。メディアクエリとは、デバイスまたはその特徴の1つ（最大または最小の画面幅など）を識別し、それに基づいて異なるスタイルを適用する特別なCSS宣言です。メディアクエリを使用することで、CSSは使用するデバイスの解像度に基づいて動作を管理し、要素を非表示にしたりサイズを変更したり、異なるウェブページのレイアウトをスクリーンサイズに適応させたりすることができます。また、画像やナビゲーションメニュー、広告など、不要と思われるものを削除することで、印刷時にドキュメントの構造を変更することも可能です。

メディアクエリはまた、次のようなことも可能です。

理論から実践へ

HTMLと同様、スタイル・シートはPCのテキストエディタ、または前のレッスンで説明したエディタやIDE環境のいずれかを使って簡単に作成できます。HTMLファイル内の特定のセクションにCSSルールを挿入したり、HTMLファイルが参照する新しい外部ファイルを作成したりすることができます。最初の選択肢は、CSSルールの数が限られているスタイル・シートには理想的ですが、後者の選択肢には大きな利点があります：

• 外部スタイルシートは、複数のページで使用したり共有したりすることができます。
• 外部スタイルシートはブラウザのキャッシュに保存されるため、読み込み時間が短縮されます。
• コンテンツとプレゼンテーションが明確に分離され、コードが整理され、メンテナンスが容易になる。

あとは実験して、ウェブページの魅力的なレイアウトを作るだけだ。HTMLとCSSの中間に位置するフロントエンド側の最後のピースはJavaScriptで、ウェブページをダイナミックにし、エンドユーザーとのインタラクションを可能にするために使われるスクリプト言語です。JavaScriptについては、次回のエピソードで取り上げます。

<<このシリーズの前の記事を読む