リンクおよびナビゲーションメニューのスタイル設定

注意：このサンプルファイルには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。

入門

このチュートリアルシリーズのパート6では、DreamweaverでCSSメディアクエリーを使用する方法について説明します。パート５までで1カラムのバージョンのデザインはほぼ完了しました。残っているのはリンクとナビゲーションメニューのスタイル設定だけです。また、JavaScriptファイルを追加して小さい画面ではアコーディオンメニューになるようにします。

擬似クラスを使用したリンクのスタイル設定

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

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

• :link これは訪問されていない状態のリンクのスタイルを設定します。
• :visited これは訪問されたリンクのスタイルを設定します。
• :hover これはマウスポインターを合わせたときの要素（リンクだけではない）のスタイルを設定します。パート5では、これを使用して、ポインターを合わせたときの画像の見た目を変更しました。
• :active これは、クリックしたときの要素のスタイルを設定します。
• :focus これは、キーボードを使用してページを移動しているときなど、フォーカスがある要素のスタイルを設定します。

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

1. ライブビューでいずれかのリンクを選択し、CSSデザイナーのセレクターペインでh2セレクターを選択します。これにより、h2の直後に次のスタイルルールを作成でき、スタイルシート内に頻繁に使用されるセレクターをまとめておくことができます。プラスボタンをクリックして、新しいセレクターを作成します。上向き矢印キーを押していき、aだけになるまでセレクターの限定度を下げます。これにより、すべての状態のリンクのスタイルが設定されます。
   
   
2. プロパティペインのテキストセクションで、font-weightプロパティをboldに設定します。
   
   
3. text-decorationプロパティの最初のアイコンを選択して、値をnoneに設定します。ページ上のすべてのリンクが、下線のない太字になりました。
   
   
4. a:linkの新しいセレクターを作成します。セレクターペインでプラスをクリックします。aを入力してセレクターペインでプラスをクリックします。aを入力してコロンを入力すると、Dreamweaverが擬似クラスのコードヒントを表示しますので、:linkを選択します。
   
   
5. CCライブラリパネルにあるピンク色のスウォッチをクリックして、色#F68979をクリップボードにコピーし、colorプロパティのカラーの右側にある入力フィールドに貼り付けます。
   
   
6. a:visitedの新しいセレクターを作成して、CCライブラリパネルで明るいオレンジのスウォッチから色#FF944Cをコピーし、colorプロパティの値として設定します。
   
   
7. 図1を参考に、a:hover, a:active, a:focusの新しいグループセレクターを作成して、CCライブラリパネルで暗いオレンジのスウォッチから色（#7F3300）をコピーし、colorプロパティの値として設定します。
   
   text-decorationプロパティで2番目のアイコンを選択してunderlineに設定します。
   
   
8. ライブビューで、リンクにポインターを合わせます。暗いオレンジになり、下線が付きます。そうならない場合は、セレクターペインのリンクのスタイルの順序が間違っている可能性があります。図1と比較してご確認ください。

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

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

ナビゲーションメニューのトリガーリンクの作成

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

1. ライブビューでリンクのいずれかをクリックして、ナビゲーションリンクの順序なしリストを選択します。リンクはアクティブな状態になりますので、暗いオレンジ色になり下線が付きます。次に、エレメントディスプレイで順序なしリストが選択されていることが示されるまで、上向き矢印キーを数回押します。エレメントディスプレイタブにulが表示されます（図2を参照）。

ライブビューにフォーカスがあるときに上向き矢印キーを押すと、選択範囲がHTMLの1つ上の階層に上がります。リストの中央のリスト項目が選択された状態で、上向き矢印キーを一度押すと、ひとつ前のリスト項目の<a>タグ（ハイパーリンク）が選択されます。もう一度上向き矢印キーを押すと、リンクの親要素の<li>タグが選択されます。押す度に、Dreamweaverで階層が上がっていきます。さらに上がっていくと、Dreamweaverは<nav>要素、<h1>要素と選択していきます。下向き矢印を押すと、<ul>要素に戻ります。

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

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

2. 順序なしリストを選択した状態で、挿入／見出し／見出し2を選択します。配置アシストダイアログで「前」を選択し、第2レベルの見出しを順序なしリストのすぐ上に挿入します。
   
   
3. 見出しのプレースホルダーテキストをクリックして編集モードに入り、プレースホルダーテキストをMENUに置き換えます。
   
   編集モードのままで、MENUを選択し、リンクアイコンをクリックしてリンクに変換します。
   
   リンクフィールドに#navlinksと入力し（図3を参照）、外側をクリックして編集モードを終了します。

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

4. ライブビューで<h2>要素を選択します（<a>が選択されている場合は、必要に応じて上向き矢印を1回押します）。次に、エレメントディスプレイのプラスボタンをクリックして#menulinkと入力し、、<h2>要素にmenulinkというIDを割り当てます。
   
   
5. コードビューで元になるHTMLを確認します。<nav>要素は次のようになります。

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

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

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

6. エレメントディスプレイを使用して新しいIDまたはクラスを作成すると、対応するセレクターは常にセレクターペインの最下部に作成されます。スタイルの論理的な順序を保つには、セレクターペインで#menulinkを選択して、他のリンクスタイルの後にドラッグして配置します。a:hover、a:active、a:focusグループセレクターの下に太い水平バーが表示されたら、マウスボタンを放します（図4を参照）。

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

トリガーリンクのスタイル設定

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

1. CSSデザイナーのセレクターペインで#menulinkを選択した状態で、要素からすべてのマージンを削除します。これをおこなうには、次の2つの方法があります。
   
   
   • 「ショートハンドを設定」をクリックし、0を入力して確定します。
   • ビジュアルツール中央のリンクアイコンをクリックして（図5を参照）、片側を0または0pxに設定します。

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

これで、テキストはwrapper<div>の幅全体に広がる暗い背景の中央に表示されます。見出しは、利用可能なすべての水平方向のスペースを埋めるブロックレベルの要素として処理されます。

3. ライブビューで、トリガーリンクの<a>要素を選択します。エレメントディスプレイの枠線がテキストのみを囲んでいます（図6を参照）。

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

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

displayプロパティをblockに設定すると、すぐに<a>タグのエレメントディスプレイが見出しの幅いっぱいに広がり、すべてがクリック可能になります（図7を参照）。

ナビゲーションリンクのスタイルを設定する

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

1. CSSデザイナーのセレクターペインで#navlinksを選択した状態で、プロパティペインのレイアウトセクションで次のようにプロパティと値を設定します。

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

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

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

5. 古いブラウザーではRGBaのカラーフォーマットを認識できないため、別の背景色を設定する必要があります。そのためには、コードビューでスタイルシートを手動で編集する必要があります。
   
   セレクターペインで#navlinksセレクターを右クリックして、コンテキストメニューから「コードへ移動」を選択します（図9を参照）。

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

6. background-color属性の上に新しい行を挿入し、次のコードを追加します。

#を入力するとすぐに、カラーピッカーが開きます。EnterキーまたはReturnキーを押すと閉じます。Dreamweaverは、黒の16進数のコードを挿入します。行末に必ずセミコロンを入力してください。編集されたスタイルルールは、図10のようになります。

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

7. 「ライブ」ボタンをクリックして、分割ビューを閉じます。
   
   
8. ナビゲーションメニューのリンクに子孫セレクターの#navlinks aを作成し、レイアウトセクションで次のプロパティと値を設定します。

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

これで、ナビゲーションメニューは図11のようになります。

まだナビゲーションリンクは順序なしリストで作成されていますが、スタイルによって外観が完全に変わりました。

ナビゲーションメニューの表示と非表示

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

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

1. 表示と非表示どちらの場合でも、ナビゲーションメニューの位置は、CSSの絶対位置指定により制御されます。CSSデザイナーのセレクターペインにある#navlinksセレクターを選択して、positionプロパティをabsoluteに設定し、絶対位置指定にします（プロパティペインのレイアウトセクション内の、paddingビジュアルツールのすぐ下にあります）。
   
   そうするとすぐに、ゴールデンゲートブリッジの画像がナビゲーションリンクの後ろに表示されます（図12を参照）。

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

2. DOMパネルで、#navlinksをダブルクリックして編集するフィールドを開き、順序なしリストにクラスを追加します。図13に示すように、#navlinksの後にスペースを入力し、それに続けて.displayed（ドットを先頭に付ける）と入力します。そして、クリックして編集を確定します。

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

3. セレクターペインで#navlinksを選択した状態で、プラスボタンをクリックして新しいセレクターを作成します。入力フィールドに#navlinks.displayedと入力します。
   
   #navlinksとクラスセレクターの最初のドットの間にスペースがないようにしてください。これは子孫セレクターではありません。#navlinks.displayedはID navlinksとクラスdisplayedを持つ要素を選択します。
   
   
4. プロパティペインのレイアウトセクションで、positionプロパティの下にあるビジュアルツールを使用して、topを135pxに設定します（図14を参照）。

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

5. また、レイアウトセクションで、z-indexを1に、opacityを1に設定します。
   
   z-indexプロパティを設定するには、ドロップダウンメニューでvalueを選択してから、1を入力します。このプロパティは、positionが指定された要素の重なり順を設定し、ナビゲーションメニューが他のものに隠れて突然見えなくなることがないようにします。
   
   opacityプロパティは、0（完全に透明）から1（完全に不透明）の間の値を取ります。メニューは、スライドしながらフェードインまたはフェードアウトします。
   
   
6. #navlinks.startというセレクターを作成し、displayプロパティをnoneに設定します。
   
   
7. #navlinks.collapsedというセレクターを作成し、次のプロパティと値を設定します。

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

8. メニューをアクティブ化するには、JavaScriptファイルをページに追加する必要があります。ファイルには、指定されたIDを探す関数が含まれているため、すべてのHTMLの読み込み完了後に追加する必要があります。正しい位置にスクリプトを挿入するには、ライブビューでフッターを選択します。エレメントディスプレイにfooterが表示されていることを確認し、挿入／HTML／スクリプトを選択します。
   
   
9. この場合、スクリプトをフッターの後に置く必要があるので、配置アシストダイアログから「後」を選択します。これで、ファイルの選択ダイアログが開きます。サイトのルートのjsフォルダーに移動して、menu.jsを選択し、「OK」（Windows）または「開く」（macOS）をクリックします。
   
   すべてのスタイル定義とHTMLが正しい場合は、ナビゲーションメニューがライブビューの表示から消えます。これは、JavaScriptファイルの関数がナビゲーションメニューのクラスをstartに変更して、displayプロパティがnoneに設定されるからです。その後すぐにクラスをcollapsedに変更するので、トリガーリンクをクリックすると、メニューが表示されるようになります。
   
   
10. ゴールデンゲートブリッジの画像の上のメニューをクリックすると、ナビゲーションメニューが表示されます。もう一度クリックすると、メニューが非表示になります。これを、もっとスムーズなトランジションにしましょう。
    
    
11. CSSデザイナーのセレクターペインで#navlinksを右クリックして、コンテキストメニューから「コードへ移動」を選択します。
    
    
12. #navlinksスタイルルールの閉じかっこの直前に、次の2行のコードを追加します（コードヒントに従います）。

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

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

12. ナビゲーションメニューをもう一度テストします。今回は、スライドして表示および非表示になるはずです。
    
    
13. ナビゲーションメニューを表示した状態で、ライブビューオプションから「ライブビューの表示を隠す」のチェックを外し、無効化します。ライブビューでHOMEリンクをクリックし、選択します。次に、エレメントディスプレイでプラスボタンをクリックして、入力フィールドに.thispageと入力し、クラスをリンクに適用します。
    
    TabキーまたはEnterキー／Returnキーを押して編集を確定します。ポップアップパネルで、スタイルのソースを選択するよう求められたらEscキーを押します。このクラスは、別のセレクターの一部として利用するため、ここではセレクターは作成しません。
    
    
14. CSSデザイナーのセレクターペインで#navlinks aを選択し、プラスボタンをクリックして、新しいセレクターを作成します。次のグループセレクターを入力フィールドに入力します。
    
    #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage

    これにより、:hover、:active、および:focus 擬似クラスのナビゲーションリンクにスタイルが設定され、クラス .thispageもナビゲーションリンクに指定されます。
    
    
15. プロパティペインのテキストセクションで、colorプロパティを#F68979に設定します。これで、HOMEのリンクがピンクになり、ポインターを合わせると他のリンクもピンクになります。
    
    
16. 作業内容を保存するため、ファイル／すべての関連ファイルを保存を選択します。

うまく動作しない原因

このチュートリアル通りに作業を進めたつもりでも、メニューが動作しないことがあります。その場合は、やはりどこかで間違っています。ブラウザー（および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カラムのレイアウトのデザインに変更し、ナビゲーションメニューの外観を変更します。