トップ > スキル : Web > CSS知識

Web

CSSとHTML文書の関係

最初にデザインを担当するCSSとページ内容を担当するHTML文書(HTMLソース)の関係をまず頭に入れておく必要があります。例えば、下の図を見てください。
1つのCSSファイル(スタイルシートファイル)に対して複数のHTML文書がリンクされています。このようにすることによって、すべてのHTML文書に対してデザインを一括に管理することができます。Webサイト内のすべてのWebページのレイアウトは、同一Webサイト内では一貫性を持たせないと閲覧している人にとって、不親切な設計と言われます。どこまでがこのWebサイトなのかをはっきりと示すためにも、なるべく同じようなデザイン化が求められます。

cssとhtmlの関係

CSSファイルですべてのWebページの管理はできますが、特定のページとか特定の部分だけをデザインするには、CSSファイルという形でなく、HTML文書ファイル内にCSSを記述することで実現することができます。それでは、CSSはどこに記述するかを説明することにしましょう。

CSSの記述場所には3種類あります。1つ目の記述場所は、タグ内に属性という形式で直接記述するやり方(インライン方式)、2つ目がページのheader内に内部参照という形で記述する方法(埋め込み式)です。そして、3つ目はCSSファイルを別に作成して、それを参照するという外部参照の形式で記述する方法(外部リンク方式)です。
どの方法を使っても良いのですが、Webサイト内のデザインやレイアウトを統一するという原則を考えると、すべてのデザインを管理できる外部参照を用いる方法が得策と言えます。

WebサイトのデザインをCSSに持たせるのであれば、必ずmeta要素を1つ記述する必要があります。記述するmeta要素の形式は決まっていますので、下の図を見て覚えましょう。

css例

この記述は、HTML文書はテキスト形式のCSS(スタイルシート)を利用するという宣言のようなものです。お決まりの文句だと思って、必ずhead要素内に記述するようにしましょう。

では、CSSの記述場所を1つずつ紹介していきます。

インライン方式

スタイルシートの最も簡単な記述方法が、HTMLタグに直接記述するインライン方式です。これは、「style属性」を指定して、プロパティと値を対にして記述を行います。
このインライン方式は、文書内のある特定の部分だけにほかの部分と全く異なったデザインを適応したい場合に使用します。簡単に言えば、「ここだけにこのデザインを付けたい。」という時に使用します。

ただ、このインライン方式でページ全体のデザインを行うことは、とても大変な作業となり、現実的ではありません。補足的な場合のみに限定するようにします。
記述は、要素の開始タグの属性に「style」を使って、値をCSSの基本に従って記述します。

例えば、ある段落(p要素)に文字色を「赤」、フォントサイズを「16px」のデザインを適用するには以下のように記述します。

インライン方式例

p要素の開始タグに「style属性」を使って、値にCSSの記述方法で書きます。

埋め込み方式(内部参照)

この方式は、HTML文書のhead要素内に<style>タグを記述する方法です。ブラウザの種類によっては、style属性を認識しないものがあり、スタイルシートの記述そのものがブラウザ上で表示されることがあります。これを防ぐためにコメントタグ「<!-- -->」で挟んで記述します。

記述する基本は下図のようになりますが、見やすくするためにインデントを挿入しています。

埋め込み方式例

この埋め込み方式は、そのページだけのスタイルとして適用したい場合に使用します。「このページだけのデザインで、ほかのページでは使わない」といった指定で使いますが、id名やclass名を使ってまとめてCSSとして記述するのであれば、外部ファイルを使った方式の方が効率的です。それにhead部分も短くなり、SEO的な有利さも働きます。

外部リンク方式(外部参照)

本来のCSSの便利さを効果的に出せるのが外部リンク方式です。HTML文書とは別にCSSファイルを用意して、HTMLページからCSSファイルにリンクさせます。head要素内の情報としてlink要素を使用して、リンク先のCSSファイルへのパスを記述します。

すべてのページのレイアウトやデザインを統一する場合に、この外部リンク方式を用います。この方式によって、HTMLファイルの軽量化、表示速度のスピードアップにも繋がります。

外部リンク方式例

【CSSとHTML文書の関係】