このシリーズのパート3では、後ほどスタイルを設定するために、適切なHTMLタグによってページ構造を作成し、2ページ目および外部webサイトにリンクを追加する方法について説明します。
必要な情報
このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。
入門
このチュートリアルシリーズのパート3では、Dreamweaverを使って疑似クラスを使用して動きのあるメニューを作成する方法について説明します。このパートでは、様々な部分をスタイル設定するために構造を定義するHTML5の要素をページに追加します。2ページ目や外部webサイトへのリンクも追加します。さらに、現在空白になっている2ページ目にコンテンツを追加します。
注意：Internet Explorer 8および他の旧バージョンのブラウザーはHTML5の要素を認識しないため、これらのブラウザーでは完成したプロジェクトは正しく表示されません。https://community.adobe.com/t5/dreamweaver/bd-p/dreamweaver?page=1&sort=latest_replies&filter=all旧バージョンのブラウザーをサポートする必要がある場合は、メインのDreamweaverサポートフォーラムでアドバイスを求めてください。
DOMパネルを使用して構造要素を追加する
すべてのテキストコンテンツがホームページに追加され、書式設定されましたが、ページを論理的な構造にするにはさらにいくつかのHTMLタグを追加する必要があります。これらのタグは、ページの様々な部分のコンテナとして機能し、それらの部分を個別にスタイル設定することができます。
図1はページの構造を示しています。ヘッダーおよびフッターは、常にwrapper <div>の全幅に引き伸ばされます。高解像度の画面の場合、ほとんどのページのコンテンツは2カラムで表示されますが、低い解像度の画面の場合、右のカラムのコンテンツは左のカラムの下に表示されます。
DOMパネルを使用してこの構造をページに追加します。DOMはDocument Object Modelの略です。これは、ブラウザーがページの様々な部分を識別するためのロードマップのようなものとして機能します。web開発を初めておこなう場合、またはこれまでHTMLコードを書いたことがない場合、DOMパネルを見てはじめはうんざりするかもしれません。しかし、これはwebページの構造を確認および制御するための非常に強力なツールです。
- ドキュメントウィンドウでindex.htmlを開いたままにして、DOMパネルを見てみましょう。DOMパネルはデフォルトで、標準ワークスペースの画面の右側、パネルグループの下半分に表示されます。必要に応じて、「DOM」タブをクリックして切り替えることができます。「ウィンドウ／DOM」を選択するか、キーボードのショートカットCtrl+F7またはCmd+F7（macOS）を使用して、DOMパネルを開くこともできます。DOMパネルは図2のようになるはずです。
- DOMパネルで
h1要素を選択します。次に、Shiftキーを押しながらul要素も選択します。選択した要素は明るい青で強調表示されているはずです。ul要素が展開されている場合、中にネストされているli要素も薄い青で強調表示されているはずです（図3を参照）。これは、次のステップが、子であるli要素および親であるul要素に影響を及ぼすことを示します。
DOMパネルの一部の項目は折りたたまれている場合があります。要素の左側の三角形をクリックして、それらを展開することができます。別の項目の中にネストされている要素は、右側にインデントされます。例えば、h1要素はwrapperというIDのdivの中にネストされ、li要素はul要素の中にネストされています。
別の項目の中にネストされている要素は、子要素または子と呼ばれます。外側の要素は親と呼ばれます。同じレベルの要素は兄弟と呼ばれます。このため、DOMパネルは、家族ツリーのようにページの構造を表示したものであると見なすことができます。家族ツリーの例えを続けると、ネストされた要素は外側の要素の子孫と呼ばれ、外側の要素は祖先と呼ばれることもあります。
注意：DOMパネルで複数要素を選択する機能は、Dreamweaver 2015.2より搭載された機能です。このセクションの手順はそれより前のバージョンのDreamweaverでは機能しません。
ulの左側にあるプラスボタンをクリックして、図4で示されているように「タグで囲む」を選択します。
h1要素の上に2つの入力フィールドが表示されます。Dreamweaverがデフォルトとしてdivタグを表示しています。左側のフィールドにheaderと入力して、これを置き換えます。入力し始めるとすぐに、コードのヒントがポップアップ表示されます。矢印キーまたはマウスを使用して"header"を選択できます。- DOMパネルで
ul要素を選択し、左側のプラスボタンをクリックします。今回は単一の要素（およびその子）だけが選択されているため、より多くのオプションがあります（図5を参照）。
右側の入力フィールドはブランクのままにしておきます。ここで、IDまたはクラスを要素に指定できます。この時点ではIDまたはクラスは必要ありません。
EnterまたはReturnを2度押して、編集を確定します。これで、選択された要素が<header>要素の中にネストされます。
- 「タグで囲む」を選択して、左側のフィールドに"nav"と入力します。右側のフィールドは空のままにしておきます。
ulの直後にある最初のp要素を選択します。ライブビューまたはコードビューを確認すると、正しい要素が選択されていることがわかります。"Bayside Beat keeps"で始まる段落が強調表示されているはずです。
- プラスボタンをクリックして、「タグで囲む」を選択し、そのまま確定します。左側のフィールドで提案されている値"
div"をそのまま利用し、右側のフィールドに"#hero"と入力します。これで、<div>内の段落はheroというIDの要素に囲まれます。 - 同じやり方で最初のh2要素と次の3つの
p要素をHTML要素で囲むために、左側のフィールドに"main"と入力します。 - 最後に、最後の段落を要素内に囲むために、左側のフィールドに"footer"と入力します。
この操作では、Dreamweaverは入力したID用のセレクターをスタイルシートに自動的に作成しません。セレクターが自動的に作成されるのは、エレメントディスプレイを使用してIDまたはクラスを要素に割り当てる場合のみです。
続いて、次のh2要素と以下の2つの段落を囲むために、左側のフィールドに"aside"と入力します。
完了すると、DOMパネルは図6のように表示されます（ulの内容は折りたたまれています）。
- 三角形を使用してネストされた要素を折りたたんで、構造が正しいことを確認します。これで、DOMパネルは図7のようになります。
- index.htmlを保存します。
これで、DOMパネル内の構造は、このセクションの先頭にある図1で示されている概要と一致しますが、追加点が1つあります。<header>要素と<main>要素の間にheroというIDの<div>要素があります。これは、最初のページでゴールデンゲートブリッジの大きなヒーロー画像および短い段落のテキストを配置するためにのみ使用されます。
このようなHTML構造の作成は、魅力的なデザインからはほど遠いように思えるかもしれませんが、ページにスタイルを適切に設定するための基礎として重要です。要素が親要素内で正しくネストされていれば、グループとしてまとめてスタイル設定をおうことができます。
<header>、<nav>、<main>、<aside>、および<footer>要素には固有のスタイルはありません。これらの要素は基本的にグループ化する要素ですが、それぞれの名前はページで果たす役割をあらわしています。
リンクの作成
リンク（正式にはハイパーリンク）を使用すれば、webページを強力なものに仕上げることができます。同じwebサイトの様々な部分にリンクすることも、まったく異なるサイトにリンクすることもできます。このセクションでは、箇条書きのリストを内部リンクに変換し、主要なテキストコンテンツに外部リンクを追加します。
- 最初の箇条書き（Home）を選択し、テキストをダブルクリックして単語全体を選択します。
- 編集モードでテキストを選択すると、テキストの左上に3つの小さなアイコンが表示されます。単語全体を選択した状態でリンクアイコンをクリックすると、リンクを入力するためのフィールドが表示されます（図8を参照）。
- リンクの値をフィールドに直接入力することもできますが、内部リンクを作成するときは、右側のフォルダーアイコンをクリックしてファイルの選択ダイアログボックスを開くのがよいでしょう。
- 次の箇条書き（Sights）に対して前の手順を繰り返し、sights.htmlにリンクします。
- 残りの3つの箇条書き用のページはありません。リンクフィールドに"#"と入力して、ダミーのリンクを作成します。
- "Riding the Cable Cars" という見出しの後にある最初の段落をクリックし、"Fisherman's Wharf" を選択します。これは外部のwebサイトにリンクされるため、リンクフィールドに完全なURLを入力する必要があります。次のテキストを追加します。http://www.fishermanswharf.org/
- 「Cable Car Tips」の後の最初の段落で、Muni PassportおよびBART subway systemの外部リンクを作成します。それぞれのURLは、サンプルファイルのcontentフォルダーにあるindex.docxおよびindex.rtfに記載されています。
Baysideサイトのルート（わからない場合は「サイトルート」ボタンを使用）でindex.htmlを選択し、「OK」（Windows）または「開く」（macOS）をクリックします。次に、オレンジ色のボーダー以外の場所をクリックして編集モードを抜けます。Homeは青色および下線付きになり、リンクであることが示されます。
ファイル名を直接入力するのではなく、ファイルの選択ダイアログボックスを使用するのはかえって面倒に思えるかもしれませんが、これをおこなうことでターゲットファイルへのパスのスペルや形式が正しくなります。
外部サイトにリンクする場合によくある間違いは、URLの先頭にあるhttp://またはhttps://を省略してしまうことです。省略してしまうと、ブラウザーはそれを内部リンクと見なし、サイト内のページを探そうとします。外部リンクを作成する最も確実な方法は、ブラウザーのアドレスバーからURLをコピーし、Dreamweaverのリンクフィールドにペーストすることです。
DOMパネルを使用して要素を2ページ目にコピーおよび追加する
すべてのテキストコンテンツおよびリンクが最初のページに追加されたので、今度は2ページ目の作業に移ります。DOMパネルを使用すると、一般的な要素のコピーやページ構造の作成が簡単におこなえます。
- 必要に応じてindex.htmlを保存します。次に、Ctrlキー（Windows）またはCmdキー（macOS）を押しながら、DOMパネルでheaderおよびfooter要素を選択します。headerおよびfooterの内側にネストされる要素は自動的に選択されますが、他の要素が選択されていないことを確認してください。
- 選択した要素のいずれかを右クリックし、コンテキストメニューから「コピー」を選択します（図9を参照）。
- ドキュメントウィンドウのファイルパネルでsights.htmlの名前をダブルクリックして開きます。
- sights.htmlをアクティブドキュメントにしたまま、DOMパネルでbodyを選択し、右クリックして「子としてペースト」を選択します（図10を参照）。これで、コピーされた要素が2ページ目のタグの内部にネストされます。
header要素とfooter要素の両方を選択し（ただし、bodyは選択しない）、プラスボタンをクリックして「タグで囲む」を選択します。これで、選択した要素はdivに囲まれ、DOMパネルの両方のフィールドは編集できるように表示されたままとなっています。- headerを選択してプラスボタンをクリックし、「後ろに挿入」を選択します。左側のフィールドでdivをmainに置き換え、Enterキー/Returnキーを2度押して変更を確定します。
- 挿入したばかりの
main要素を選択してプラスボタンをクリックし、「後ろに挿入」を選択します。要素の名前をasideに変更します。
右側のフィールドの内側をクリックして"#wrapper"と入力し、EnterキーまたはReturnキーを押して編集を確定します。
これで、2ページ目のHTML構造が完成しました。
メインテキストコンテンツを空の要素に追加する
HTML構造を配置したので、メインテキストコンテンツを2ページ目に追加できるようになりました。<main>要素と<aside>要素にはプレースホルダーテキストが入っています。外部ファイルのコンテンツが正しい場所にペーストされるように、まずプレースホルダーテキストを書式設定する必要があります。
- ライブビューで、要素のプレースホルダーテキストの任意の場所をクリックして、プロパティインスペクターの「フォーマット」メニューから「段落」 を選択します（図13を参照）。
- contentフォルダーからsights.docxを開き（Microsoft Wordを使用できない場合はsights.rtfを使用）、最初の見出しと次の6つの段落をクリップボードにコピーします。
- Dreamweaverに戻ります。手順1でフォーマットした段落がそのまま選択されていることを確認します。編集モード（オレンジの枠）になっている場合はEscキーを押して編集モードを抜けて青い枠にします。エレメントディスプレイには、
mainではなく、pと表示されているはずです（図14を参照）。
- 新しいコンテンツが追加されたら、プレースホルダーテキストの段落を選択して削除します。
- 同じやり方で、sights.docxまたはsights.rtfから残りのテキスト（"Tourist Information"から"on a Segway"まで）をaside要素内にコピー＆ペーストします。リッチテキストファイルを使用している場合は、"Tourist Information"および"Sightseeing Tours"を見出しとしてフォーマットします。
- sights.htmlを保存します。
外部ファイルからペーストされるコンテンツは、同じHTML階層レベルにある現在の選択対象の後ろに追加されるため、この手順は重要です。
ライブビューで段落が選択された状態で、外部ドキュメントからコピーしたテキストをペーストし（リッチテキストフォーマットからペーストする場合は「ペーストスペシャル」を使用）、クイックプロパティインスペクターを使用して最初の段落を見出しに変換します。
プレースホルダーテキストはフォーマットしてから削除することが必要です。これは、Dreamweaverが、選択したドキュメントの兄弟として外部ファイルのコンテンツをペーストするためです。そうしないと、ペーストされる見出しおよび段落はすべて、内側にネストされずに後に続きます。Dreamweaverでは、挿入パネルまたはメニューを使用する場合にのみ、配置アシストダイアログが表示されます。
2ページ目のリンクを追加する
sights.htmlのコンテンツを完成するには、テキスト内にいくつかのリンクを作成する必要があります。sights.docxおよびsights.rtfに記載されているURLを使用して、様々な外部サイトにリンクします。リンクの設定場所を確認したい場合は、サンプルファイルのpart3フォルダーにあるバージョンのsights.htmlをご覧ください。
ここまで来たら完成です。これで、webサイトの完全に機能するページが2つできました。これらのページはあまり魅力的とはいえませんが、次のステップで変わっていきます。
