今回のビデオでは HTMLを使用してWebサイトの構造を 作成する方法を説明します これが完成したWebサイトですが 今回はサイトを完成させるのではなく HTMLの構成ブロックの理解を目的とします 上部がHTML header 左側にはロゴ 右側にはナビゲーションが入っています すぐ下のheroセクションには 大きな文字とビデオが入っています その下がintroセクション artセクションには、左側にアートワーク 右側にその説明があります 最後は重要な footerセクションです これをDreamweaverで作成しましょう 先ほどのサイトのファイルです デベロッパーモードを使用しています このプロジェクトのファイルを管理する サイト定義も作成済みです 実習するには、サイト／新規サイトから 皆さんも作成してください 詳細はサイト定義の解説ビデオを 参照してください html-layout-index-start.htmlです まずはじめに ページのタイトルを追加します すべてのページにはタイトルが必要です 「名称未設定」に ここでは、「RENDERED」と 入力します ページのタイトルとは ブラウザーの先頭に置かれ Google検索の結果を表示する際に使用されます ブラウザーで見てみましょう リアルタイムプレビューを使用します 右下にあるボタンをクリックして 「Google Chrome」を選択します ページが表示されました...
どこにあるかというと、上です ページのタイトル「RENDERED」は ここにあります タブに表示されています この空白ページにHTMLを追加して 修正しましょう HTMLレイアウトを作成します 作業をわかりやすくするための コメント行を付けています コメントの山括弧で囲まれた文字は ブラウザーでは無視され、作業者のみが確認できます まずはじめに Headerコメントの下で、Tabキーを押し 最初のHTMLレイアウトを次のように入力します <（左山括弧）head 書き終わる前にヒントが表示されます コードヒントと言い headかheaderを選択できます ここでは、headerを使用します 括弧を閉じて、開始タグができました すべてのタグに開始タグと 終了タグが必要です 左山括弧に スラッシュを入力すると 残りが自動的に入力されます HTMLのタグは開始タグと 同じタグにスラッシュが付く 終了タグで構成されます bodyタグも同じです 開始タグ、スラッシュ入りの終了タグ headタグにも開始タグと スラッシュ入りの終了タグがあります ところで、headerタグとは何でしょうか header、main、footerなどのタグは ページの構造要素の定義に使用する 事前定義されたHMTL5タグです サイトの構築には、これらの要素を組み合わせ 独自のタグを追加していきます リアルタイムプレビューで 確認しましょう 実際のブラウザーで コードをチェックする機能です Chromeを使用します 表示されました グレーのボックスがheaderです しかしなぜ グレーのボックスなのでしょうか？
通常、今回のようにheaderタグを 追加しただけでは header要素は非表示になるはずです 種明かしすると、わかりやすくするために header要素を表示するCSSを あらかじめ加えていました Dreamweaverで確認しましょう ここにheaderタグがあります 今回のテーマはHTML5レイアウト要素ですが headerなどの要素を表示するには 大きさ、色などを指定する必要があります そこで、CSSファイルでスタイルを設定しました 上部のCSSファイル名をクリックします ここで、headerの高さと 色を指定しています 詳細は、CSSスタイリングの解説ビデオをご覧ください このビデオではHTML5レイアウト要素をマスターしましょう ソースコードに戻ります 次に、navタグを追加します headerは上部にある 黒い半透明の大きなブロックです その右上にnavを指定します そのため headerセクションの中で Enterを押し 開始タグにnavと入力して タグを閉じます 終了タグは スラッシュを入力すれば、後は自動的に入力されます 便利ですね navのスタイルもCSSで定義済みです ブラウザーで確認しましょう ここがnavタグの部分です header内にnavタグがあり CSSで白色が指定されています 重要なHMTLタグが2つ追加されました Dreamweaverに戻ります 次に、読みやすくするため 何度かEnterを押します これがheaderです ここから、メインコンテンツが開始します このセクションもheaderと同様に 左山括弧 main、右山括弧 左山括弧、スラッシュで自動入力されます mainセクションができました 非常に大きなブロックです Enterで改行します heroセクションは ビデオが入った緑のボックスです introボックスは 白いボックスです ここではWebページの様々なパーツの区切りを示す sectionというタグを使用します sectionタグは、header、mainと同じ 事前定義されたHTML5のタグです sectionと入力して閉じます 山括弧とスラッシュの入力さえも 面倒だと感じる場合は さらに手間を省く機能があります 括弧を付けず、sectionと入力し Tabキーを押すと 残りがすべて自動入力されます 初心者でも構文をミスしない 便利なショートカットです 入れる場所だけは注意してください heroボックス用のsectionを追加します もう1つsectionを追加します Enterではなく、Tabキーを押せば intro用のsectionタグができます 問題は、同じsectionタグで 上を緑、下を白のように スタイルを変える方法です CSSでは、両方緑か両方白になります そのような場合は classを使って分離し 個別に設定できるようにします これまでは事前定義されたタグを使用し ヘッダーはheader、ナビゲーションはnavでした それを分離するclassを作成します sectionの後にスペースを入れ、「class」と入力 すると途中で 「class」のコードヒントが表示されるので 最後まで入力しなくても Enterで自動的に入力されます もちろん入力しても構いません 引用符内でclass名を指定します 任意の固有名を付けます 上部ヘッダーのheaderもnavも 事前定義されたタグでしたが これから独自のタグを作成します この例では「hero」と名付けます 「hero」のコードヒントが表示されるのは 作成済みのCSSファイルがあるからです HTMLで作成したタグを視覚化するため あらかじめCSSを設定しています そのCSSファイルのclass名です 独自のサイトを作成するときは 自由にclass名を指定してください CSSファイルを設定済みの場合は 便利なヒントを使用できます 最初のsectionに名前を付けました 下も同様に指定します Enterを押して 「intro」と入力します ブラウザーで確認しましょう headerが 半透明の黒いボックスで 緑の背景の上に表示されています これがnav、下が大きなheroボックス その下にinfoボックスがあります Dreamweaverに戻りましょう artworkセクションに移ります その前に構造を確認するため 最終画面を見ておきましょう 上部がheader、その右にnav heroボックス、その下にinfoボックス これから作成するartworkは 2つのセクションのうち 左側にアートワーク 右側に説明が入ります Dreamweaverに戻ります Enter、Tabキーを押して 新しいsectionを作成します ショートカットを使います 「section」、Tabキー、2文字戻して 「class」を入力 「artworks」を入力...
または、もっと簡単な方法があります お試しください 「section」の後 Tabキーの前に、ピリオドを入力して class名の「artworks」を 入力してから、Tabキーを押せば 後は自動入力されます 次に、sectionタグの内側に 「article」を加えます スペースを作り、「article」を入力します articleは ページ内の最重要コンテンツを 区別するタグであり ページの心臓部です sectionにも重要なものがたくさんあり 既に使用されてもいますが 反復的な要素です そこで、articleタグを 別に作成します classは 「artwork」と名付けます articleタグができました 特に重要なコンテンツを入れます 今回の場合は、2つあります アートワークと、その説明です sectionタグとarticleタグができました 次に、divタグを作成します 空間を分割するdivタグは 新たなsectionや複数のarticleを 作成することが適切でない場合に 空間を分割するために使用します 再利用可能なラッパータグです アートワークと説明を分割しましょう divのclassは「artwork-piece」とします ここで注意があります class名には固有名を付けてください CSSファイルがあれば、ヒントが表示されます 閉じて、終了タグ、スラッシュ これがサイト左側の部分です 右側も同様に入力します div、class 「artwork-description」 閉じて、終了タグ、スラッシュ ブラウザーで確認しましょう この2つがdivタグで指定した 左のartwork-pieceと右のartwork-descriptionです 次も重要なHTMLレイアウト要素 figureタグを作成します 画像のコンテナとして使用されます ここでは、artwork-pieceタグで 画像を入れるために 使用します 「figure」と入力して 終了タグも作成します figureタグのメリットは 画像と説明文を 一緒にfigureタグに 入れることで 両者の関連性を維持できることです figureタグもスタイル設定済みです ブラウザーで確認しましょう ここに水色のボックスができました 最後にfooterを作成しましょう 一番下に コメント行があります 「footer」を入力して、Tabキー ブラウザーで確認しましょう 美しいフッターができました 今回のテーマは HTML5レイアウト要素を ブロックレベルで確認することなので コンテンツは追加しません 参考までに HTMLからCSSファイルを削除すると どのように表示されるか 見てみましょう 基本のHTML構造です スタイルはCSSファイルで設定されています CSSのスタイル設定を 一時的に削除します ブラウザーで確認しましょう 最初と同じ、空白ページです 表示スタイルが設定されていないからです HMTLで構造を、CSSでスタイルを 設定します 詳細は、CSSスタイルの解説ビデオをご覧ください 簡単におさらいしましょう 今回はHMTL5のレイアウト要素として header、main、footerを作成し sectionで分割 独自のタグと figureタグを作成しました HTMLレイアウト要素を追加する方法を 説明しました
