今回は、HTMLコンテンツを ページに追加する方法を説明します これが完成したページです これを構成するHTMLを作成します ここに画像とナビゲーションを入れ 見出し 段落テキスト 画像を追加します Webサイトを構築する最初の作業が HTMLの作成です その後、CSSというスタイルシートで HTMLのスタイルを設定します この「GOLDRUSH」の 文字と見出しの設定は HTMLで作成していますが カラー、サイズ、文字間隔はCSSによるものです 余白や背景色も 同様にCSSで設定します HTMLでコンテンツ構造、CSSで表示スタイルを作成します 今回は、そのうちのHTMLの記述方法を説明します CSSについては別のビデオを参照してください 今回は、ステップ1：HTMLです CSSを適用しないと、HTMLはどのように表示されるか 先ほどとまったく同じサイトですが これが、HTMLだけのものです ナビケーション、見出し 画像、段落テキスト これからHTMLで作成しますが 完成サイトのように表示されるのは これにCSSを加えてからです Dreamweaverを開き、HTMLを作成しましょう 最初に作業画面を確認します 説明はデベロッパーモードで行います 右上のボタンが「標準」になっている場合は 「デベロッパー」に切り替えてください また、Dreamweaverのサイト定義は設定済みです ファイルの管理に使用するものなので 実習する場合は設定してください サイト／新規サイトで設定します サイト定義の方法は別のビデオで 詳しく解説していますので そちらをご確認ください これがHTMLページです 名前は「rendered-index-start.html」 既にHTMLコンテナがいくつか入っていますが これらは、これから作成するHTMLの 場所を示すものです ブラウザーで見てみましょう プレビューするには 右下の「リアルタイムプレビュー」をクリックして 「Google Chrome」を選択します ご覧のとおり、真っ白です 何も表示されません コンテナは空なので、これからそこに HTMLを作成します 最初のHTML要素を追加しましょう Dreamweaverに戻ります 最初に ロゴ画像を追加します ここにそのコンテナがあります 画像を追加するには タグを使用します 左山括弧の後に 「img」と入力します 画像を配置するためのHTMLタグです 次にソースを意味する「src」 Enter（Return）を押すと 必要なHTML構文 イコールと引用符が 自動的に入力され 「参照」メニューが表示されます 「参照」をクリックすると imagesフォルダーが表示されます 使用する画像は「logo-white.png」です 最後に、右山括弧でタグを閉じます これが画像挿入の記述方法です 次にナビゲーションを作成します ページの右上に配置します ナビゲーションも作成済みの コンテナ「nav」の中に作成します ナビゲーションを意味する「nav」です そこに、番号なしリストを作成します 見た方が早いでしょう これが番号なしリスト 単純な箇条書きです スタイル設定することでこの箇条書きは 美しいナビゲーションに変わります 左山括弧、番号なしリストのタグ 「ul」を入力します タグを閉じます タグは必ずペアの終了タグが必要です こちらをご覧ください 「Header」の開始タグ 同じ構文でスラッシュ付きが 終了タグです 「a」タグも同様に 「a」が開始タグ、「/a」が終了タグです 「ul」にも終了タグが必要ですが 左山括弧 スラッシュを入力するだけで 続きは自動的に入力されます 「ul」は親タグであり 「ul」の中にリスト項目 つまり箇条書きの内容を記述します それが「li」です ペアの終了タグも作成します 左山括弧、スラッシュです これで箇条書きになります このリストに リンクを設定します タグを入力すると アンカータグ「a」が表示されます この次に 「href」と入力します ハイパーリンクレファレンスの意味で ユーザーがリンクをクリックしたときに 表示するページまたはWebサイトを指定します 「href」と入力して 下矢印キー、Enterを押せば 以後の構文が自動的に入力されます リンク先はまだ作成していないので 仮に「#」を入力しておきます ハイパーリンクは通常のタグよりも 少し複雑ですが心配はいりません 閉じましょう 方法はこれまでと同じです 山括弧、スラッシュで自動入力されます 「a」の開始タグと終了タグの間に メニューリストとして表示する 単語を入力します ここまでをブラウザーで確認しましょう ナビゲーションができていますね よいでしょう リスト項目にリンクが設定され 番号なしの箇条書きになっています しかし、疑問が浮かぶかもしれません 画像はどこにいったのか？
実はここにあります 白背景に白字のロゴで見えないのです 後で背景を緑にしたら 見えるようになります 残りのリスト項目も作成しましょう 全部で5つあります Dreamweaverに戻ります ナビゲーションに5つ項目を作成します 作成した項目にカーソルを置き この行を選択してコピー、改行 ペーストで項目が増えますが もっと簡単に、カーソルを「li」内に置き Control+D（Command+D）キーを押します 5回繰り返せばコピーされます 「HOME」の文字を変更しましょう 2つ目は「ABOUT」 このように入力していくこともできますが 今回の目的は入力の効率化です もっと簡単な方法を紹介しましょう Dreamweaverに組み込まれた Emmetというコードヘルプ機能を使用します 「ul」タグ内にリスト項目 ここでは5つ必要なので 5倍を意味する「*5」 「li」タグ内に「a」タグを作成します Enterを押しても何も変化しません この機能では、Tabキーを押します 素晴らしい時間短縮ですね Dreamweaverの小技を駆使すると Webサイトを短時間で楽に構築できます リンク先は未設定なので「#」にします これは仮に入れているだけで 後で作成したページの リンクに変更します 次に、ボタン名を入力します 「HOME」、「ABOUT」 「GALLERY」、「TICKETS」、「CONTACT」 これがナビゲーションを構成する HTMLの基本的な作成方法です ブラウザーで確認しましょう HTMLナビゲーションの仕組みがわかりましたか ここからは、作成済みのCSSシートを このHTMLに適用します 今回はHTMLの解説ですが 作成するHTMLをスタイル設定後の 美しい状態でご覧いただくため 作成済みのCSSシートを Dreamweaverで適用します 「head」タグ内に記述します これが開始タグと終了タグです その中であれば場所は問いません 私はこの「script」の後に入れます CSSシートを適用する構文は複雑ですが 簡略化する方法があります 先ほどと同様のテクニックを使います 「link」を入力してtabキーを押します 簡単ですね 必要なタグが自動入力されるので 後は、参照先のスタイルシートを指定するだけです 左パネルの「ファイル」に 作成済みのスタイルシートがあります 引用符の中に 「st」と入力を開始すると 候補の「styless.css」が表示されるので Enterを押すだけで入力されます CSSを適用しても コードビューでは何も変わりません ブラウザーで見てみましょう どうです、HTMLはまったく同じでも CSSシートを適用するとこうなります CSSシートの作成方法を解説したビデオも ぜひご覧ください CSSの設定により 箇条書きと下線が消え 青字が白字になり、右上に移動 背景が緑になり、画像も表示されました 他にもレイアウト設定があります 緑のボックス、白のボックス グラデーションのボックスなど これらはCSSシートで設定しています Dreamweaverに戻り、HTMLの作成を続けましょう 見出しの文字を入力します 完成版をご覧ください 見出しがいくつかありますが これが一番大きな第1レベルです これが次に重要な見出し 第2レベル これが第3レベルです Dreamweaverで追加します heroコンテンツ内に作成済みの このボックスに入れます 左山括弧 最初は「h2」です タグを閉じて、開き、スラッシュで自動入力されます これも便利ですが もっと簡単な方法があります 「h2」と入力して Tabキーを押すだけです 「h2」タグに見出しを入力します 次は「h1」、Tabキー 「Rendered」 背景になります 第2レベル これが第1レベルです 次は第3レベルなので 「h3」、Tabキー ここでは特殊文字の 入力方法を説明します ハイフン、「21」、「2017」ですが このハイフンは特殊文字なので ブラウザーによって、正しく表示される場合と 表示されない場合があります 特殊文字は...
このような、アルファベットでも 数字でもない記号を 特殊文字と言いますが 特別なHTML構文を使用すれば 環境に依存せず どのブラウザーでも表示されます 「&」を入力すると ヒントが表示されます 覚えなくてもいいので、便利ですね ％記号であれば 「&、#、37、;」です これで％記号になります ブラウザーで確認しましょう 単なる記号の組み合わせではなく 正しく％記号が表示されています ハイフンも同様に指定しましょう こちらは削除します 最初は「&」です スクロールして、ハイフンを選択 「&、#、45、;」です ブラウザーで確認しましょう ハイフンになりました 「SAN FRANCISCO」 これが第3レベルの「h3」見出しです 次に、下の白い部分に 文章を入力します 完成版がこちらです 大きな文字で行間のゆとりもある「intro」テキストです 便利なHTMLタグとして よく使用するのが「p」タグです 導入文にもこのタグを使用します この「div」コンテナの中に 「p」タグを作成します 「p」、Tabキーを押します 「p」はパラグラフの意味なので たくさん使用する機会があるでしょう ページ内の本文に使用します ここに入れる文章は CSSシートで既に スタイル設定されているので 最適なフォントとサイズで 美しく表示されます 次はこちらです まずは完成版をご覧ください この画像を挿入します 先ほど画像を追加した方法は 「img」、「src」でしたが もっと簡単な方法があります もう想像がつくかもしれませんね 「img」、Tabキーです 後は自動入力されます 画像の保存先は、imagesフォルダー 「goldrush.jpg」です プレビューで確認すれば確実です 次に「alt」タグを指定します スクリーンリーダーの読み上げと 画像の代替文字として使用します ここでは、アーティスト名を入れます 確認しましょう、いい画像ですね 次も完成版を先に見ましょう この「h2」と下の「p」タグを作成します 問題は、これから作成する「h2」は 最初の「h2」とスタイルが異なることです 「p」タグも先ほどとは異なります そのような場合は、クラスを使用します それがこのコンテナです ここに「h2」を作成します 「h2」、Tabキーです 「Goldrush」と入力します 他の「h2」とは異なるスタイルにするには 独自のクラスを設定します 「class」と入力して Enterを押せば イコールと引用符、終了タグが 自動入力されます クラス名は「artwork-title」です クラスでスタイル設定すれば 「h2」は変わらなくても 「artwork-title」にのみ 指定したスタイルが適用されます 「p」も同様です 「p」、Tabキー 「class」 「artwork-text」です テキストを流し込み、ブラウザーで確認します 「h2」も「p」タグも独自のスタイル設定になりました 次に「See More（続きを見る）」ボタンを作成します クリック可能なリンクを 「p」タグの後に設定しましょう 「a href...」
ですが 長いですね もっと簡単に、「a」 Tabキーを押せば、完了です まだリンク先はできていないので 仮に#を入れておきます これにもクラスを追加します クラス名は「see-more」です 「See More」と入力します ブラウザーで確認しましょう 「See More」リンクができました HTMLコンテンツが完成しました 「p」タグ、「h1」 画像、ハイパーリンクを作成しました Webページはこのような要素で構成されています 今回は既に作成済みの スタイル設定を使用して HTML構造の 作成方法のみを説明しました 美しいスタイル設定は含まれません HTMLで「h1」を作成しましたが そのスタイルはCSSで設定しています CSSの解説ビデオが多数ありますので ぜひそちらを参照してください スタイル設定なしで表示しましょう 画面上部に スタイルシートへのリンクがあります この行を削除します 変わりましたね HTMLがそのまま表示されています 「ul」と「li」 「h2」、「h1」、画像 リンク、フッターです HTMLだけではここまで スタイル設定は非常に重要です HTMLでページ構造を作成し CSSシートでスタイルを設定します WebページにHTMLコンテンツを 追加する方法を説明しました
