Dreamweaver CC入門

その他をグループ化設定する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
<div>タグを使って、ページ全体や、商品ごとなど、個別にグループ化をする方法について学びます。
講師:
04:42

字幕

このレッスンでは div タグを使ったグループ化について解説します。ヘッダー・ナビゲーション・メニュー・フッターのグループ以外にページ全体を1つのグループ化にしたり商品毎など小さい情報グループを作る場面がよくあります。こういう時は div タグを使います。まずはページ全体を1つのグループにしてみます。現在は index.html が開いている状態です。このページ内の情報をすべて選択します。全てを選択するにはデザインビューの中をクリックしてカーソルを表示させた状態からプロパティインスペクターの上のタグセレクターでbody をクリックします。基本的にタグセレクターでタグをクリックするとタグを含めた内容が選択されますがbody タグのみタグの内側が選択されます。これでページ全体が選択された状態です。ここの選択した範囲にdiv タグを追加します。div タグを追加する為には挿入パネルを使います。パネルグループの中の「挿入」タブをクリックし挿入パネルをアクティブにします。挿入パネルの中の div メニューをクリック「div を挿入」ダイアログボックスが出てきました。今回はこの div タグに名前を付けます。 id テキストボックスの上をクリックしカーソルを表示させ半角文字で wrap と入力します。これは「包む」という意味合いで付けています。入力できましたら、OK ボタンをクリックします。コードビューに div id="wrap" が追加されました。続いて、「おすすめメニュー」の各商品毎をグループ化する為にそれぞれを div タグで追加します。パネルグループの「ファイル」タグをクリックしファイルパネルを表示させます。ファイルパネルの中のmenu.hitml をダブルクリックします。menu.html が開きました。デザインビューの中の「カフェラテ」からドラッグで選択をします。「掲載しているもの以外も色々ご用意をしています。」までを今回はこちらを1つの商品グループとして設定します。また挿入パネルを使っていきます。「挿入」タブをクリックしdiv メニューをクリック。「div を挿入」ダイアログボックスが出てきました。今回の名前は Class ボックスに半角文字で item と入力します。入力できましたら、OK ボタンです。そうすると、コードビューにdiv class="item" と追加されました。 続いてデザインビューの「日替わりランチプレート」からまた同じように「ご用意しています。」までをドラッグで選択し挿入パネルから div メニューをクリックします。Class は先程と同じく item入力できましたら、OK ボタンです。「スィーツ」も同じことを繰り返します。div メニューから itemOK ボタンです。コードビューにはそれぞれにdiv class="item" が追加されています。これで作業が完了です。ここでもファイルを上書きしますが今回 index.html と menu.html両方を編集したので「名前」タブの両方にアステリスクが表示されています。1つ1つ上書き保存するのも大丈夫ですが1度に保存できる方法を今回ご紹介します。「ファイル」メニュー>「すべてを保存」をクリックします。すると、全てのファイルを一度に保存することができます。このレッスンでは div タグを使ったグループ化について解説しました。

Dreamweaver CC入門

DreamweaverはWebサイトに関係するHTMLファイルやCSSファイルなどを効率よく作成できるアプリケーションです。このコースではDreamweaverを使ってみたい、使ってみたけれどよくわからないという方に向け、サイト設定やHTMLのマークアップなどの基本操作を紹介します。またWebサイトを制作するために必要な知識も一緒に解説します。

1時間41分 (42 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年08月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。