この記事では、Cascading Style Sheets (CSS) を使用して、Dreamweaver でページ上のテキストの書式を設定する方法について説明します。 CSS を使用すると、HTML ではできない方法でテキストの書式設定や配置を行うことができ、ページの外観をより柔軟に制御できるようになります。
CSS について
カスケード スタイル シート (CSS) は、Web ページ上のコンテンツの外観を制御する一連の書式設定ルールです。 CSS を使用してページをフォーマットすると、コンテンツとプレゼンテーションは分離されたままになります。ページ コンテンツ (HTML コード) は独自の HTML ファイル内にありますが、コードの表現を定義する CSS ルールは別のファイル (外部スタイル シート) または HTML ドキュメントの別の部分 (通常はセクション) 内にあります。 CSS を使用すると、正確なレイアウトの位置から特定のフォントやスタイルに至るまで、ページの外観を非常に柔軟に制御できます。
CSS を使用すると、HTML だけでは制御できない多くのプロパティを制御できます。たとえば、選択したテキストにさまざまなフォント サイズや単位 (ピクセル、ポイントなど) を指定できます。 CSS を使用してフォント サイズをピクセル単位で設定することにより、複数のブラウザー間でページのレイアウトと外観に対するより一貫したアプローチを確保することもできます。
CSS 書式設定ルールは、セレクターと宣言の 2 つの部分で構成されます。セレクターは書式設定された要素 (P、H1、クラス名、ID など) を識別する用語であり、宣言はスタイル要素を定義するために使用されます。
次の例では、H1
がセレクターであり、中括弧 ({}) の間はすべて宣言です。
引用
された内容は次の
とおり
です
。
宣言は、プロパティ (font-family など) と値 (Helvetica など) の 2 つの部分で構成されます。上の例では、H1 タグのスタイルを作成します。このスタイルにリンクされているすべての H1 タグのテキストのサイズは 16 ピクセルで、Helvetica フォントと太字が使用されます。
「カスケード」という用語は、同じ要素または Web ページに複数のスタイルを適用できる機能を指します。たとえば、色を適用する CSS ルールとマージンを適用する別のルールを作成し、両方をページ上の同じテキストに適用することができます。定義されたスタイルは Web ページ上の要素に「カスケード」され、最終的に希望のデザインを作成します。
CSS の主な利点は、更新が簡単であることです。1 つの CSS ルールが更新される限り、定義されたスタイルを使用するすべてのドキュメントの書式設定が新しいスタイルに自動的に更新されます。
Dreamweaver では、次のルール タイプを定義できます。
カスタム CSS ルール (「クラス スタイル」とも呼ばれる) を使用すると、任意のテキスト範囲またはテキスト ブロックにスタイル プロパティを適用できます。すべてのクラス スタイルはピリオド (.) で始まります。たとえば、.red というクラス スタイルを作成し、ルールの color プロパティを赤に設定して、そのスタイルをスタイル付き段落テキストの一部に適用できます。
HTML タグ ルールは、特定のタグ (p や h1 など) の形式を再定義します。 h1 タグの CSS ルールを作成または変更すると、h1 タグで書式設定されたすべてのテキストがすぐに更新されます。
CSS セレクター ルール (高度なスタイル) は、要素の特定の組み合わせの書式設定、または CSS で許可される他のセレクター フォームを再定義します (たとえば、表のセル内に h2 見出しが表示される場合は必ずセレクター td h2 を適用します)。高度なスタイルでは、特定の id 属性を含むタグの形式を再定義することもできます (たとえば、#myStyle で定義されたスタイルは、属性と値のペア id="myStyle" を含むすべてのタグに適用できます)。
新しいスタイルシートを作成する
まず、段落テキスト スタイルを定義する CSS ルールを含む外部スタイル シートを作成します。外部スタイル シートでスタイルを作成すると、各 Web ページに個別にスタイルを設定することなく、複数の Web ページの外観を中央の場所から同時に制御できます。
CSS ルールは次の場所にあります。
外部 CSS スタイル シートは、別の外部 .css ファイル (HTML ファイルではありません) に保存されている一連の CSS ルールです。 .css ファイルは、ドキュメントの先頭セクションにあるリンクを使用して、Web サイト内の 1 つ以上のページにリンクされています。
内部 (または埋め込み) CSS スタイル シートは、HTML ドキュメントの head セクションの style タグ内に含まれる一連の CSS ルールです。たとえば、次の例では、段落タグが設定されているドキュメント内のすべてのテキストのフォント サイズを定義します。
:<head>
<スタイル>
p{
フォントサイズ:80px
}
</スタイル>
</head>：
インライン スタイルは、HTML ドキュメント内の特定のタグ インスタンス内で定義されます。例えば、
"p style="font-size: 9px""
インライン スタイルを含むタグでフォーマットされた段落のフォント サイズのみを定義します。
Dreamweaver は、適用されるほとんどのスタイル プロパティをレンダリングし、ドキュメント ウィンドウに表示します。ブラウザ ウィンドウでドキュメントをプレビューして、スタイルがどのように適用されるかを確認することもできます。一部の CSS スタイル プロパティは、Microsoft Internet Explorer、Netscape Navigator、Opera、および Apple Safari では表示が異なります。
「ファイル」＞「新規」を選択します。
[新しいドキュメント] ダイアログ ボックスで、[カテゴリ] 列で [ベース ページ] を選択し、[ベース ページ] 列で [CSS] を選択して、[作成] をクリックします。
空のスタイルシートがドキュメントウィンドウに表示されます。 [デザイン ビュー] ボタンと [コード ビュー] ボタンが無効になりました。 CSS スタイル シートはプレーン テキスト ファイルであり、その内容はブラウザでの表示には使用されません。
このページをcafe_townsend.cssとして保存(「ファイル」>「保存」)します。
スタイル シートを保存するときは、必ず Cafe_townsend フォルダー (Web サイトのルート フォルダー) に保存してください。
スタイルシートに次のコードを入力します:
p{
フォントファミリー: Verdana、サンセリフ;
フォントサイズ: 11px;
色: #000000;
行の高さ: 18px;
パディング: 3px;
}
コードを入力すると、Dreamweaver はコードヒントを使用して、入力を完了するためのオプションを提案します。 Dreamweaver に完了させたいコードが表示されたら、Enter キー (Windows) または Return キー (Macintosh) を押します。
各行の末尾の属性値の後にセミコロンを追加することを忘れないでください。
完成したコードは次の例のようになります。
ガイドを表示するには、[ヘルプ] > [参照] を選択し、[参照] パネルのポップアップ メニューから [O'Reilly CSS Reference] を選択します。スタイルシートを保存します。
付属のスタイルシート
スタイル シートを Web ページに添付すると、スタイル シートで定義されたルールがページ上の対応する要素に適用されます。たとえば、cafe_townsend.css スタイル シートをindex.html ページに添付すると、すべての段落テキスト (HTML コード内のタグでフォーマットされたテキスト) は、定義した CSS ルールに従ってフォーマットされます。
[ドキュメント]ウィンドウで、Cafe Townsendのindex.htmlファイルを開きます。 (ファイルがすでに開いている場合は、そのタブをクリックします。)
「チュートリアル: ページにコンテンツを追加する」でページに貼り付けた最初のテキストを選択します。
プロパティインスペクタを見て、段落タグを使用して段落が書式設定されていることを確認します。
プロパティインスペクターの「書式」ポップアップメニューに「段落」と表示されている場合、その段落は段落タグを使用して書式設定されています。プロパティインスペクターの「書式」ポップアップメニューに「なし」またはその他の表示がある場合は、「段落」を選択して段落を書式設定します。
2 番目の段落に対して手順 3 を繰り返します。
[CSS スタイル] パネル ([ウィンドウ] > [CSS スタイル]) で、パネルの右下隅にある [スタイル シートをアタッチ] ボタンをクリックします。
「外部スタイルシートのアタッチ」ダイアログボックスで「参照」をクリックし、前のセクションで作成したcafe_townsend.cssファイルを参照します。
「OK」をクリックします。
ドキュメント ウィンドウ内のテキストは、外部スタイル シートの CSS ルールに従って書式設定されます。
「CSS スタイル」パネルを探索する
[CSS スタイル] パネルでは、現在選択されているページ要素またはドキュメント全体に影響する CSS ルールとプロパティを追跡し、外部スタイル シートを開かずに CSS プロパティを変更できます。
「ドキュメント」ウィンドウで「index.html」ページが開いていることを確認してください。
[CSS スタイル] パネル ([ウィンドウ] > [CSS スタイル]) で、パネル上部の [すべて] をクリックし、CSS ルールを確認します。
「すべて」モードでは、CSS パネルには、外部スタイル シートにあるか独自のドキュメントにあるかに関係なく、現在のドキュメントに適用されるすべての CSS ルールが表示されます。 [すべてのルール] ウィンドウに、タグ カテゴリと Cafe_townsend.css カテゴリという 2 つの主要カテゴリが表示されます。
ラベル カテゴリが展開されていない場合は、プラス記号 (+) をクリックしてカテゴリを展開します。
本文ルールをクリックします。
値 #000000 の背景色のプロパティが、下部の [プロパティ] ペインに表示されます。
CSS スタイル パネル全体を表示するには、[ファイル] パネルなどの他のパネルを折りたたむ必要がある場合があります。また、ペイン間の境界線をドラッグして CSS スタイル パネルの長さを変更することもできることに注意してください。
ページの背景色は、「チュートリアル: テーブルベースのページ レイアウトの作成」で、[ページ プロパティの変更] ダイアログ ボックスを使用して設定します。この方法でページのプロパティを設定すると、Dreamweaver はドキュメントに組み込まれる CSS スタイルを作成します。
プラス記号 (+) をクリックして、cafe_townsend.css カテゴリを展開します。
「pRule」をクリックします。
p ルールの外部スタイル シートで定義されているすべてのプロパティと値が、下の [プロパティ] ペインに表示されます。
[ドキュメント] ウィンドウで、書式設定した 2 つの段落内の任意の場所を 1 回クリックします。
[CSS スタイル] パネルで、パネル上部の [現在] をクリックし、CSS スタイルを調べます。現在モードでは、CSS パネルに現在の選択項目のプロパティの概要が表示されます。表示されるプロパティは、外部スタイル シートの p ルールのプロパティに対応します。
次のセクションでは、[CSS スタイル] パネルを使用して新しいルールを作成します。 [CSS スタイル] パネルを使用して新しいルールを作成することは、最初に外部スタイル シートを作成したときと同様に、ルールを手動で入力するよりもはるかに簡単です。
新しい CSS ルールを作成する
このセクションでは、[CSS スタイル] パネルを使用してカスタム CSS ルールまたはクラス スタイルを作成します。クラス スタイルを使用すると、テキストの任意の範囲またはブロックのスタイル プロパティを設定でき、任意の HTML タグに適用できます。さまざまなタイプの CSS ルールの詳細については、「CSS について」を参照してください。
[CSS スタイル] パネルで、パネルの右下隅にある [新しい CSS ルール] をクリックします。
[新しい CSS ルール] ダイアログ ボックスで、[セレクター タイプ] オプションから [クラス] を選択します。このオプションはデフォルトで選択されている必要があります。
[名前] テキスト ボックスに「.bold」と入力します。
「太字」という単語の前に必ずピリオド (.) を入力してください。すべてのクラス スタイルはピリオドで始まる必要があります。
[定義先] ポップアップ メニューで、cafe_townsend.css を選択します。このファイルはデフォルトで選択されている必要があります。
「OK」をクリックします。
[CSS ルール定義] ダイアログ ボックスが表示され、cafe_townsend.css ファイルに .bold というクラス スタイルを作成していることが示されます。
[CSS ルール定義] ダイアログ ボックスで、次の操作を実行します。
[フォント] テキスト ボックスに、「Verdana, sans-serif」と入力します。
[サイズ] テキスト ボックスに 11 と入力し、すぐ右側のポップアップ メニューで [ピクセル] を選択します。
「行の高さ」テキストボックスに「18」と入力し、すぐ右側のポップアップメニューで「ピクセル」を選択します。
「重み」ポップアップメニューから「太字」を選択します。
[色] テキスト ボックスに #990000 と入力します。
ヒント CSS プロパティの詳細については、Dreamweaver に付属の『O'Reilly Reference Guide』を参照してください。ガイドを表示するには、[ヘルプ] > [参照] を選択し、[参照] パネルのポップアップ メニューから [O'Reilly CSS Reference] を選択します。
「OK」をクリックします。
「CSS スタイル」パネルの上部にある「すべて」ボタンをクリックします。
[cafe_townsend.css] カテゴリが展開されていない場合は、カテゴリの横にあるプラス (+) ボタンをクリックします。
Dreamweaver によって、外部スタイル シートで定義されたルールのリストに .bold クラス スタイルが追加されたことがわかります。 [すべてのルール] ペインで .bold ルールをクリックすると、そのルールのプロパティが [プロパティ] ペインに表示されます。新しいルールは、プロパティインスペクタの「スタイル」ポップアップメニューにも表示されます。
クラススタイルをテキストに適用する
これで、クラス ルールを作成し、それを段落テキストに適用しました。
[ドキュメント] ウィンドウで、最初の段落のテキストの最初の 4 つの単語を選択します: Cafe Townsend の先見の明のあるシェフ。
プロパティインスペクタ（「ウィンドウ」→「プロパティ」）で、「スタイル」ポップアップメニューから「太字」を選択します。
「太字」スタイルがテキストに適用されます。
手順 2 を繰り返して、2 番目の段落の最初の 4 つの単語に「太字」スタイルを適用します。
ページを保存します。
ナビゲーション バーのテキストの書式設定
次に、CSS を使用して、ナビゲーション バーのリンク テキストにスタイルを適用します。多くの Web ページでは、テキストが埋め込まれた色付きの長方形の画像を使用してナビゲーション バーを作成しています。ただし、CSS を使用する場合、設定する必要があるのはリンク テキストといくつかの書式設定だけです。 display: block プロパティを使用してブロックの幅を設定すると、追加の画像を使用せずに効果的に四角形を作成できます。
ナビゲーション用の新しいルールを作成する
Cafe_townsend.css ファイルをまだ開いていない場合は開きます。または、そのタブをクリックしてファイルを表示します。
ファイル内の .bold クラス スタイルの後に次のコードを入力して、新しいルールを定義します。
.navigation {
}
これは空のルールです。
ファイル内のコードは次の例のようになります。
Cafe_townsend.css ファイルを保存します。
次に、[CSS スタイル] パネルを使用してルールにプロパティを追加します。
Index.html ファイルが開いていない場合は、ファイルを開きます。
[CSS スタイル] パネルで、[すべて] モードが選択されていることを確認し、新しい .navigation ルールを選択して、パネルの右下隅にある [スタイルの編集] をクリックします。
[CSS ルール定義] ダイアログ ボックスで、次の操作を実行します。
[フォント] テキスト ボックスに、「Verdana, sans-serif」と入力します。
「サイズ」ポップアップメニューから「16」を選択し、そのすぐ右側のポップアップメニューから「ピクセル」を選択します。
「スタイル」ポップアップメニューから「標準」を選択します。
「変更」リストから「なし」を選択します。
「重み」ポップアップメニューから「太字」を選択します。
[色] テキスト ボックスに「#FFFFFF」と入力します。
ガイドを表示するには、[ヘルプ] > [参照] を選択し、[参照] パネルのポップアップ メニューから [O'Reilly CSS Reference] を選択します。
「OK」をクリックします。
ここで、[CSS スタイル] パネルを使用して、.navigation ルールにさらにプロパティを追加します。
[CSS スタイル] パネルで、.navigation ルールが選択されていることを確認し、[リスト ビューの表示] をクリックします。
リスト ビューでは、[プロパティ] ペインに使用可能なすべてのプロパティがアルファベット順に表示されます (設定済みのプロパティのみを表示する [プロパティの設定] ビューとは異なります)。
「background-color」プロパティの右側の列をクリックします。
プロパティの完全な内容を表示するには、マウス ポインタをプロパティの上に置きます。
16 進値 #993300 を入力し、Enter キー (Windows) または Return キー (Macintosh) を押します。
ヒント 外部スタイル シートに対する作業の影響を確認するには、作業中、ドキュメント ウィンドウで Cafe_townsend.css ファイルを開いたままにしてください。 [CSS スタイル] パネルで選択を行うと、Dreamweaver がスタイル シートに CSS コードを記述することも表示されます。
表示プロパティを見つけて (下にスクロールする必要がある場合があります)、右側の列を 1 回クリックして、ポップアップ メニューからブロックを選択します。
パディング プロパティを見つけて、右側の列を 1 回クリックし、値 8px を入力して、Enter キー (Windows) または Return キー (Macintosh) を押します。
width プロパティを見つけて、右側の列を 1 回クリックし、最初のテキスト ボックスに 140 と入力し、ポップアップ メニューから [ピクセル] を選択して、Enter (Windows) または Return (Macintosh) を押します。
「設定プロパティの表示」をクリックすると、「プロパティ」ペインで設定したプロパティのみが表示されます。
Cafe_townsend.css ファイルをクリックして表示します。 Dreamweaver によって、指定したすべてのプロパティがファイルに追加されたことがわかります。
Cafe_townsend.css ファイルを保存して閉じます。
これで、ナビゲーション バーのテキストをフォーマットするルールが作成されました。次に、選択したリンクにルールを適用します。
ルールを適用する
ドキュメント ウィンドウでindex.html ページを開いた状態で、「Cuisine」という単語をクリックして、単語内のどこかに挿入ポイントを置きます。
ラベル セレクターで、右端のラベルをクリックします。
この操作では、指定したラベルまたはリンクのすべてのテキストが選択されます。
プロパティインスペクタ（「ウィンドウ」→「プロパティ」）で、「スタイル」ポップアップメニューから「ナビゲーション」を選択します。
ドキュメント ウィンドウで、Cuisine テキストの外観が完全に変わりました。前のセクションで .navigation ルールに対して定義したプロパティに基づいて、テキストがナビゲーション バー ボタンとしてフォーマットされます。
ナビゲーション バーのリンクごとに手順 1 ～ 3 を繰り返します。
各ラベルまたはリンクにナビゲーション クラス スタイルを割り当てる必要があるため、ラベル セレクターを使用して各リンクを個別に選択し、クラス スタイルを各リンクに 1 つずつ割り当てることが重要です。
リンク テキストの書式設定に問題がある場合は、リンクされた各単語 (または単語のグループ) の間にスペース (改行ではなく) があることを確認してください。また、2 つのリンク間のスペース自体がリンクされていないことを確認してください。スペースがリンクされている場合は、リンクされたスペースを慎重に選択し、プロパティインスペクターの「リンク」テキストボックスをクリアして、Enter キー (Windows) または Return キー (Macintosh) を押します。
ナビゲーション バーのすべての単語の書式設定が完了したら、ページを保存し、ブラウザで作業をプレビューします ([ファイル] > [ブラウザでプレビュー])。
リンクをクリックして、機能することを確認できます。
マウスオーバー効果を追加する
次に、マウス ポインタがリンク上を通過するたびにナビゲーション バーの背景色を変更するロールオーバー効果を追加します。マウスオーバー効果を追加するには、:hover 疑似クラスを含む新しいルールを追加します。
About... About:hover 疑似クラス 疑似クラスは、HTML ドキュメント自体の HTML コードではなく、Web ブラウザによって適用される他の外部条件に基づいて、HTML ドキュメント内の特定の要素に影響を与える方法です。疑似クラスは動的にすることができます。つまり、ユーザーがドキュメントを操作すると、ページ上の要素が疑似クラスを取得したり失ったりする可能性があります。
:hover 疑似クラスは、ユーザーが要素の上にマウス ポインタを置いたときに、フォーマットされたページ要素への変更に影響を与えます。たとえば、:hover 疑似クラスを .navigation クラス スタイル (.navigation:hover) に追加して新しいルールを作成すると、.navigation ルールで書式設定されたすべてのテキスト要素が .navigation のプロパティに基づいて変更されます。ホバールール。
Cafe_townsend.css ファイルを開きます。
.navigation ルール全体を選択します。
テキストをコピーします (「編集」>「コピー」)。
ルールの末尾を 1 回クリックし、Enter (Windows) または Return (Macintosh) を数回押してスペースを作成します。
コピーしたテキストを、作成したスペースに貼り付けます (「編集」>「貼り付け」)。
次のように、貼り付けた .navigation セレクターに :hover 疑似クラスを追加します。
新しい .navigation:hover ルールで、現在の背景色 (#993300) を #D03D03 に置き換えます。
ファイルを保存して閉じます。
ドキュメント ウィンドウでindex.html ファイルを開き、ブラウザでページをプレビューします ([ファイル] > [ブラウザでプレビュー])。
マウス ポインタをリンク上に置くと、新しいマウスオーバー効果が表示されます。