スタイルシートの設定方法

スタイルシートの設定方法とその特徴、設定方法の紹介です。

スタイルシートには３つの設定方法がありますが、どれが最も良い方法か？
スタイルシートの外部記述
- スタイルシートは外部ファイルで設定するのがベスト
- 外部スタイルシートを用意するには？
スタイルシートのページ内記述
- ページ内記述の方法
スタイルシートのライン内記述
- ライン内記述の方法

スタイルシートには３つの設定方法がありますが、どれが最も良い方法か？

スタイルシートの設定方法には、次の３つの方法があります。その特徴とともに紹介します。

① 特定の箇所だけに適用する（ライン内記述）

タグ内に直接スタイルを記述し、スタイルを個別に指定する。

CSS の特徴を活かせない
ただし、同じタグへのスタイルの指定は、こちらで指定したものが最優先となる。

② 一つのページのみに適用する（ページ内記述）

head 要素内にスタイルの指定をまとめて記述する。

head 要素が CSS であふれてしまう
スタイルの優先は、①についで②の方法が次の優先順位となる。

③ 複数のページに適用する（外部記述）

外部の一つのCSS ファイルに複数ページのスタイルの指定をまとめて記述する。

デザインの統一・メンテナンスが容易
優先順位は３つの中では最低となる。

スタイルシートを使用する場合には、③が最も良い方法といえるでしょう。

スタイルの優先順位

要素に一番近いところで記述されているものが最優先となります。従って、同じ要素の属性への記述をした場合、①ライン内記述、②ページ内記述、③外部記述、の順となります。

ページトップへ

スタイルシートの外部記述

スタイルシートは外部ファイルで設定するのがベスト

スタイルを設定したい HTML ページとは別に、スタイルシート用の外部ファイルを作り、スタイルの指定をまとめて記述し、サイト全体（複数のWebページ）で共有できるという方法です。

この方法ではサイト全体のデザインを統一できるため、メンテナンスが容易になります。

外部スタイルシートを用意するには？

スタイルシート用の外部ファイルはホームページビルダーのスタイルエクスプレスを使って、外部スタイルシートの作成と削除を行います。スタイルエクスプレスースタイルシートの表示、追加、削除、編集を参照ください。

あるいはツール「CSS エディタ」を使って新規に作成・保管します。作成方法は、CSS ファイルの新規作成と編集を参照します。

「メモ帳」などのテキストエディタでテキストファイルを新規作成し、スタイルの指定を記述したら、「.css」という拡張子をつけて保存する方法もあります。

作成したスタイルシート用の外部ファイルを読み込むときには、ページの head 要素に link 要素を用いて対象となる外部スタイルシートファイルを指定します。

XHTMLソース：
- <link rel="stylesheet" href="styles/style01.css" type="text/css" />

link 要素 について

link 要素は、(X)HTML文書とほかのリソースを関連付ける役割を持ちます。主にスタイルシートの読み込みに使用されることが多い。

link 要素では、関連付けられたリソースとの関係を示す rel 属性 （順方向リンク）または rev 属性 （逆方向リンク）と、そのリソースの場所を指定する href 属性とを組み合わせて使用されます。

上の例では、rel 属性に "stylesheet" を指定することで、文書にスタイルシートを関連付けています。この場合、この文書から見たスタイルシートは「styles/style01.css」で、そのファイルのメディアタイプは「text/css」である、という意味になります。

rel 属性 について

href 属性で指定されたリンク先のリソースを、現在のページ（始点）から見た関係で示します。属性値にはリンク先のリソースとの関係を示すリンクタイプと呼ばれるキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません。title 属性を組み合わせてリンク先の説明を記述することで、HTTP ユーザーエージェントはその内容を使ってメニューを構成することが期待されます。

alternate　
- この文書の代替にあたる文書を示す
appendix　
- この文書の付属書にあたる文書を示す
bookmark　
- 文書内の重要なアンカーへのリンクを示す
contents　
- この文書の目次にあたる文書を示す
copyright　
- 著作権に関する記述のある文書を示す
glossary　
- 指定する文書が用語集であることを示す
help　
- この文書のヘルプにあたる文書を示す
index　
- この文書の索引にあたる文書を示す
next　
- この文書の次の文書であることを示す
prev　
- この文書の前の文書であることを示す
start　
- 一連の文書の中で最初の文書を示す
chapter　
- 一連の文書の中で章にあたる文書を示す
section　
- 一連の文書の中で節にあたる文書を示す
subsection　
- 一連の文書の中で項にあたる文書を示す
stylesheet　
- スタイルシートの参照を示す
複数指定する場合は、半角スペースで区切って列記（例：rel="prev help"）します。

rev 属性 について

href 属性で指定されたリンク先のリソース（終点）から見た、現在のページに対する関係を示します。属性値にはリンク先のリソースと現在のページの関係を示すリンクタイプを指定します。また、rev 属性にのみ指定できるリンクタイプのキーワードに "made" があります。"made" とはその文書の制作者を示し、href 属性の値にはユーザーがコンタクトをとれるように制作者がもっている E-メールアドレスなどを指定するのが一般的です。