スタイルシートの設定方法には、次の3つの方法があります。その特徴とともに紹介します。
① 特定の箇所だけに適用する(ライン内記述)
タグ内に直接スタイルを記述し、スタイルを個別に指定する。
② 一つのページのみに適用する(ページ内記述)
head 要素内にスタイルの指定をまとめて記述する。
③ 複数のページに適用する(外部記述)
外部の一つのCSS ファイルに複数ページのスタイルの指定をまとめて記述する。
スタイルシートを使用する場合には、③が最も良い方法といえるでしょう。
スタイルの優先順位
要素に一番近いところで記述されているものが最優先となります。従って、同じ要素の属性への記述をした場合、①ライン内記述、②ページ内記述、③外部記述、の順となります。
スタイルを設定したい HTML ページとは別に、スタイルシート用の外部ファイルを作り、スタイルの指定をまとめて記述し、サイト全体(複数のWebページ)で共有できるという方法です。
この方法ではサイト全体のデザインを統一できるため、メンテナンスが容易になります。
スタイルシート用の外部ファイルはホームページビルダーのスタイルエクスプレスを使って、外部スタイルシートの作成と削除を行います。スタイルエクスプレス ー スタイルシートの表示、追加、削除、編集を参照ください。
あるいはツール 「CSS エディタ」 を使って新規に作成・保管します。作成方法は、CSS ファイルの新規作成と編集を参照します。
「メモ帳」 などのテキストエディタでテキストファイルを新規作成し、スタイルの指定を記述したら、「.css」 という拡張子をつけて保存する方法もあります。
作成したスタイルシート用の外部ファイルを読み込むときには、ページの head 要素に link 要素を用いて対象となる外部スタイルシートファイルを指定します。
link 要素 について
link 要素は、(X)HTML文書とほかのリソースを関連付ける役割を持ちます。主にスタイルシートの読み込みに使用されることが多い。
link 要素では、関連付けられたリソースとの関係を示す rel 属性 (順方向リンク) または rev 属性 (逆方向リンク) と、そのリソースの場所を指定する href 属性とを組み合わせて使用されます。
上の例では、rel 属性に "stylesheet" を指定することで、文書にスタイルシートを関連付けています。この場合、この文書から見たスタイルシートは 「styles/style01.css」 で、そのファイルのメディアタイプは 「text/css」 である、という意味になります。
rel 属性 について
href 属性で指定されたリンク先のリソースを、現在のページ(始点)から見た関係で示します。属性値にはリンク先のリソースとの関係を示すリンクタイプと呼ばれるキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません。title 属性を組み合わせてリンク先の説明を記述することで、HTTP ユーザーエージェントはその内容を使ってメニューを構成することが期待されます。
rev 属性 について
href 属性で指定されたリンク先のリソース(終点)から見た、現在のページに対する関係を示します。属性値にはリンク先のリソースと現在のページの関係を示すリンクタイプを指定します。また、rev 属性にのみ指定できるリンクタイプのキーワードに "made" があります。"made" とはその文書の制作者を示し、href 属性の値にはユーザーがコンタクトをとれるように制作者がもっている E-メールアドレスなどを指定するのが一般的です。
(X)HTML文書の head 要素に style 要素を挿入し、その中で CSS を記述します。style 要素は head 要素内に複数記述できます。
スタイルシートであることを宣言するために、定義全体を <style type="text/css"> ~ </style> で囲みます。定義内容はHTMLタグではないため、開始を <!--、終了を --> で囲みコメント化します。
スタイルを適用したい要素に style 属性を付加して、直接スタイルを指定します。
インラインスタイルとも呼ばれます。
インラインでスタイルを設定するには、ページ編集画面で設定したい要素を右クリックして [スタイルの設定] を選択します。[スタイルの設定] ダイアログが開くので、任意のタブで設定します。