Dreamweaver CC入門

クラスを設定しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
すでにCSSファイルに設定しているクラスセレクターの内容をHTMLファイルに設定する方法について学びます。
講師:
03:40

字幕

このレッスンでは既に CSS ファイルに設定した class セレクターの内容をHTML ファイルに設定する方法について解説します。現在は menu.html が開いている状態です。menu.html が開いていない場合はファイルパネルの中からmenu.html をダブルクリックして開いておいてください。まずは class セレクターを確認します。関連ファイルツールバーの中のscopp.css をクリックします。そうすると、コードビューにはscopp.css のコードが表示されます。この中の、下の方139 行目付近に .note と記述されているコードがあります。これは文字のサイズを少し小さめに文字の色をグレーにというスタイルが書かれています。ドットと書かれているものはclass セレクターと言われているものでHTML ファイルの中で個別に繰り返してスタイルを設定する時に使います。このスタイルを menu.html の中の「写真と実物は」という段落に設定します。関連ファイルツールバーの「ソースコード」をクリックしてmenu.html の内容が表示されるようにしておきます。ここでは動画の画面が見やすいように分割プレビューを上下に変更します。 デザインビューの「カフェラテ」の中にある「写真と実物は」の文字の上をクリックしてカーソルを表示させます。プロパティインスペクターの上のタグセレクターの1番右のP をクリックします。そうすると段落全体が選択されます。この状態でプロパティインスペクターの「クラス」 プルダウンメニューからnote をクリックします。デザインビューの何もない所をクリックして選択を解除しておきます。そうすると文字が小さくなり色はクレーになりました。先程の .note というスタイルが反映されています。コードビューを見てみると27 行目付近です。P タグに対して、段落に対してclass="note" というのが追加されています。これが note というクラスを設定したというコードになります。同様に、「日替わりランチプレート」の段落にも「スィーツ」の段落にも同じようにnote クラスを設定します。作業は以上です。ファイルを上書き保存しておきます。最後にブラウザーでの表示確認もしてみましょう。Dreamweaver の右下にある地球マークから確認したいブラウザーを選択します。ブラウザーでの表示を確認します。段落の表示が変わっていることが確認できます。 確認できましたら、ブラウザーのバツ印を閉じてブラウザーを閉じておいてください。このレッスンでは既に CSS ファイルに設定してあるclass セレクターの内容をHTML ファイルに設定する方法について解説しました。

Dreamweaver CC入門

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

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

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

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

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