デフォルトでは、リンクに青い下線が付いています。訪問したリンクは紫になります。これらは視覚的なサインとして広く認識されていますが、モダンなデザインにはほとんどフィットしません。最近は、下線を取り除き、ポイントしたときにリンクの見た目を変えるという方法が一般的です。様々な状態を示すリンクのスタイルを作成するには、CSSで擬似クラスを使用します。これらが擬似クラスと呼ばれるのは、通常のクラスとは異なり、クラスの属性を要素に追加しないためです。擬似クラスは、ブラウザーがスタイルシートのスタイルを動的に適用します。

擬似クラスはコロンで始まり、セレクターに直接追加されます。リンクに使用される擬似クラスは次のとおりです。

リンクのスタイルを設定する場合、ここにリストしたのと同じ順序で擬似クラスを使用することが重要です。そうしないと、スタイルが不適切に適用されます。多くのユーザーが、L oV e-HA teという語呂合わせで、正しい順序を覚えています。Dreamweaverのコードのヒントも、擬似クラスを同じ順序でリストするので役立ちます。:focus 擬似クラスを含めることは、ラップトップまたはデスクトップでブラウズしているときにマウスを使用できない、または使用しないユーザーのアクセシビリティのために重要です。

必要に応じて、セレクターペインのセレクターをドラッグ＆ドロップして、スタイルルールの順序を変更できます。水平の太い線は、スタイルシートのどの位置にセレクターが挿入されるかを示します。

現時点では、すべてのリンクに同じスタイルが設定されています。ナビゲーションリンクは別のスタイルに設定する必要があります。しかし最初は、低解像度の小さな画面のナビゲーションメニュー用にトリガーリンクを作成する必要があります。

スマートフォンなどの低解像度の小さな画面の場合は、ナビゲーションメニューは通常は非表示とし、メニューボタンのクリックまたはタップ時に、画面にスライドして表示されるようにします。このセクションでは、順序なしリストにIDを指定し、リンクを設定した第2レベルの見出しをリストに追加します。高解像度の画面では、メニューのリンクはCSSによって非表示になります。小さい画面のナビゲーションメニューのスライド動作は、CSSとJavaScriptの組み合わせにより制御されます。

ライブビューにフォーカスがあるときに上向き矢印キーを押すと、選択範囲がHTMLの1つ上の階層に上がります。リストの中央のリスト項目が選択された状態で、上向き矢印キーを一度押すと、ひとつ前のリスト項目の タグ（ハイパーリンク）が選択されます。もう一度上向き矢印キーを押すと、リンクの親要素の

要素を選択してエレメントディスプレイのプラスボタンをクリックし、表示されるフィールドに#navlinks と入力して、順序なしリストにIDのnavlinks を割り当てます。変更を確定するには、Tabキーを押すか、EnterキーまたはReturnキーを押します。responsive.css がポップアップパネルのソースを選択 ドロップダウンメニューで選択されていることを確認して、外側をクリックします。

注意： エレメントディスプレイを使用してIDまたはクラスを要素に追加する場合、DreamweaverはCSSにスタイルルールが存在していないと、自動的にそのIDまたはクラスの空のスタイルルールを作成します。 スタイルルールを作成しない場合は、Escキーを押して、ポップアップパネルを消します。スタイルルールの自動作成は、エレメントディスプレイによってクラスまたはIDを割り当てる場合にのみ実行されます。DOMパネルまたはプロパティインスペクターを使用している場合は作成されません。

これにより、同じページにnavlinks というIDを持つ要素へのリンク（ナビゲーションリンクの順序なしリスト）が作成されます。

要素と

要素のID属性の値は# で始まらないことに注意してください。ただし、リンクのhref 属性の値は# で始まります。これは、この値が「このIDを見つける」という意味だからです。

エレメントディスプレイまたはDOMパネルでIDの先頭に# を付ける理由は、クラスと見分けるためです。CSSでは、IDセレクターは# で始まり、クラスセレクターはドットまたはピリオドで始まるため、DreamweaverはIDやクラスを要素に適用する場合に、同じ命名ルールを使用します。

注意：IDは1ページに1回しか利用できませんが、クラスは複数の要素で利用できます。IDとクラス名にスペースを使用しないでください。単語を区切るには、ハイフンまたはアンダースコアを使用します。または、キャメルケース（後続の各単語の最初の文字を大文字にする）を使用します。特殊文字やその他の区切り文字を使用しないでください。

1. #navlinks セレクターを#menulink のすぐ下に移動します。

トリガーリンクは、

の見出しの内側にネストされます。デフォルトで、ブラウザーは第2レベルの見出しを大きな太字のフォントで表示します。ですが、ここではもっと小さく細いフォントをデザインに使用します。モバイルデバイスで使用されるため、リンクは簡単にタップできる必要があります。このため、テキストだけではなく、見出しの領域全体を使用する必要があります。

1. また、次のプロパティと値を設定します。

これで、テキストはwrapper

1. #menulinkの子孫セレクター#menulink a を作成します。次に、プロパティペインのテキストセクションで、次のプロパティと値を設定します。

1. アイコンをクリックして「レイアウト」セクションに戻り、次のプロパティと値を設定します。

ナビゲーションリンクは順序なしリストになっています。これらにスタイルを設定するために、まずはブラウザーがリストに適用するデフォルトの箇条書き、マージン、パディングの各スタイルを削除する必要があります。また、トリガーリンクと同じテクニックを利用して、幅全体をクリックできるようにします。

1. アイコンをクリックしてテキストのプロパティに移動し、text-alignをcenter に設定します。
   

2. 「テキスト」セクションの最後まで下にスクロールして、list-style-type プロパティをnone に設定し、箇条書きを削除します。
   

3. アイコンをクリックして背景のプロパティに移動し、background-color のカラーボックスをクリックしてカラーピッカーを開きます。デフォルトでは黒に設定されています。ここでは、黒のベタ塗りではなく、半透明にしてみましょう。
   
   カラーピッカーの下部にあるRGBa ボタンを選択して、アルファスライダー（右側にある3番目）を3分の1程度下方向にドラッグします。左下にあるフィールドの値を、rgba(0,0,0,0.65) くらいにします（図を8参照）。

RGBaのカラーフォーマットは、4つのコンマ区切りの値で構成されています。最初の3つは、0から255の範囲の整数を使用して、R （赤）、G （緑）B （青）の原色の量を設定します。最後の値はa （アルファ）で、透明度を0 （完全に透明）から1 （完全に不透明）に設定します。

カラーピッカーの外側をクリックして閉じます。

分割ビューが開き、選択したスタイルルールの最後に挿入ポイントが置かれています。

CSSのカスケードの仕組みにより、このように色を繰り返して指定することが可能になります。RGBaフォーマットを解釈するブラウザーでは最初の値を上書きして、2番目の値を利用します。RGBaを解釈しない古いブラウザーでは、2番目の定義を無視し、16進数値を使用して黒一色の背景を適用します。

1. アイコンをクリックしてテキストのプロパティに移動し、次の値を設定します。

メニューの表示と非表示の制御は、CSSとJavaScriptを組み合わせておこないます。トリガーリンクがタップまたはクリックされたとき、あるいはブラウザーのビューポートが指定した幅より狭くなったとき、JavaScriptはナビゲーションリンクの順序なしリストに適用されたクラスの名前を変更します。メニューはJavaScriptが有効な場合にのみ非表示になります。

JavaScriptは後でページに追加します。まずは、ナビゲーションメニューが表示された状態のスタイルの設定から取り掛かりましょう。

これは、絶対位置指定された要素は標準のドキュメントフローから除外され、他の要素の前面に、別のレイヤーで配置されるためです。

エレメントディスプレイを使用してクラスを順序なしリストに追加することもできますが、DOMパネルを使用する方法はCSSデザイナーのセレクターペインにセレクターを自動的に作成しないという点が異なります。

技術的には、順序なしリストの絶対位置は、コンテナブロックの上部から135px に設定されていることになります。この場合、ページとコンテナブロックは同じであるため、ページの上部から135px に設定されることを意味します。絶対位置指定については、パート7で詳しく説明します。

top プロパティをマイナス値に設定すると、順序なしリストの上部が、ページ上端を超えたビューの外側に移動します。さらに、opacityを0 にして透明にします。

これで、この要素と子孫に0.5秒間で実行されるトランジションを設定できました。ease-out を指定することにより、トランジションは終わりに近付くほどゆっくりになります。

編集されたスタイルルールは、図15のようになります。

1. ナビゲーションメニューをもう一度テストします。今回は、スライドして表示および非表示になるはずです。
   

2. ナビゲーションメニューを表示した状態で、ライブビューオプションから「ライブビューの表示を隠す」のチェックを外し、無効化します。ライブビューでHOMEリンクをクリックし、選択します。次に、エレメントディスプレイでプラスボタンをクリックして、入力フィールドに.thispage と入力し、クラスをリンクに適用します。
   
   Tabキー またはEnterキー／Returnキー を押して編集を確定します。ポップアップパネルで、スタイルのソースを選択するよう求められたらEscキーを押します。このクラスは、別のセレクターの一部として利用するため、ここではセレクターは作成しません。
   

3. CSSデザイナーのセレクターペインで#navlinks aを選択し、プラスボタンをクリックして、新しいセレクターを作成します。次のグループセレクターを入力フィールドに入力します。
   
   #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage
   
   これにより、:hover 、:active 、および:focus 擬似クラスのナビゲーションリンクにスタイルが設定され、クラス .thispage もナビゲーションリンクに指定されます。
   

4. プロパティペインのテキストセクションで、color プロパティを#F68979 に設定します。これで、HOMEのリンクがピンクになり、ポインターを合わせると他のリンクもピンクになります。
   

5. 作業内容を保存するため、ファイル／すべての関連ファイルを保存 を選択します。

このチュートリアル通りに作業を進めたつもりでも、メニューが動作しないことがあります。その場合は、やはりどこかで間違っています。ブラウザー（およびDreamweaverのライブビューも）は、ある程度まではHTMLの間違いを許容します。また、CSSに少々の間違いがあってもうまく対応してくれます。しかしJavaScriptはそうではありません。1箇所でも間違うと、動作しません。

menu.jsのスクリプトは、IIFE（「iffy」と発音）として知られている、即座に呼び出される関数式を使用します。つまり、関数は即座に実行されます。関数は、3つの引数をとります。トリガーリンクのID、順序なしリストのID、そしてブレークポイントの値です。ブレークポイントはブラウザーのビューポートがリサイズされてメニューが非表示になる位置の値です。要素に異なるIDを指定した場合や、スペルを間違っている場合、関数は動作しません。また、クラス名として指定したstart、collapsed、displayedが適切に入力されていないと動作しません。JavaScriptは大文字と小文字を区別するので、menulinkとmenuLinkは完全に別の値として処理されます。

また、CSSに間違いが含まれていても動作しない可能性があります。定義した最後の3つのセレクターの#navlink.displayed 、#navlink.start 、および#navlink.collapsed には、スペースを入力しないでください。コードビューで各スタイルルールの行末尾にセミコロンが付いていることも確認してください。

これでもメニューが動作しない場合は、サンプルファイルのpart6フォルダーとファイルを比較してください。行数が異なっていても問題はありません。コードの相違点を探します。Dreamweaverは、サードパーティ製のファイル比較ユーティリティに統合できるので、相違点を見つけやすくなります。ファイル比較の設定と利用 について詳しくは、ヘルプファイルを参照してください。

間違っていてもがっかりしないでください。これは、学習のプロセスで重要な部分です。専門家でも間違いをします。異なっているのは、よりすばやく間違いを見つけて修正するための経験があるかどうかだけです。

これで、Bayside Beat webサイトの1カラムのデザインが完了しました。次のステージでは、2カラムのレイアウトのデザインに変更し、ナビゲーションメニューの外観を変更します。