Dreamweaver CC入門

CSSを設定しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSファイルにCSSのソースコードを入力する方法について学びます。
講師:
04:05

字幕

このレッスンでは CSS ファイルにCSS のソースコードを入力する方法について解説します。現在は cafe.css が関連付けられているindex.html が表示されています。どの CSS ファイルが関連付けられているかの確認は関連ファイルツールバーを見ると確認することができます。今回は「インフォメーション」の文字の色を赤色に変えるという作業をしてみます。まずはこの「インフォメーション」の1行がどんな HTML タグで設定されているかを確認します。デザインビューの上をクリックしカーソルを表示させプロパティインスペクターの上のタグセレクターの1番右1番右が h2 になっているので「インフォメーション」の行はh2 タグで設定されていることが分かります。この h2 を覚えておきます。デザインビューの何もない所をクリックしておきます。続いて、CSS ファイルに、CSS のソースコードを設定する為に関連ファイルツールバーのcafe.css をクリックします。そうすると、コードビューの内容がindex.html の内容からcafe.css のソースコードが編集できる画面に切り替わりました。では、早速 CSS のソースコードを入力してみましょう。 CSS のソースコードを入力する時には必ず半角文字を使います。まずは先程確認した h2 を入力し{ を入力します。続いて Enter キーで改行。そうすると CSS で使うキーワード専門用語でプロパティと言います。このプロパティがアルファベット順で表示されます。この一覧のことをコードヒントと呼びます。今回は文字の色を変えるプロパティcolor を設定したいのでcolor の c を入力します。c を入力すると c から始まるプロパティが表示されます。今回は color を設定したいのでキーボードの矢印キーで下まで下ろしcolor が選択できましたらEnter キーをクリックします。これで color プロパティの設定が完了しました。続いて、赤い色を意味するコード#ff0000 と入力します。続いてセミコロンを入力します。これで文字の色を赤色にしたいという設定が完了しました。これで設定が完了しましたのでEnter キーを押し} を入力して完了です。デザインビューの表示を確認してみましょう。デザインビューをクリックすると「インフォメーション」の文字が先程入力した CSS の設定で反映されています。 作業は完了です。ファイルを上書き保存します。今回は関連しているcafe.css を保存します。「ファイル」メニュー>「すべての関連ファイルを保存」をクリックします。最後にブラウザーでの表示も確認しておきましょう。Dreamweaver の右下にある地球ボタンから確認したいブラウザーをクリックします。ブラウザー表示ができましたら「インフォメーション」の文字が赤色になっていることを確認します。確認できましたら、ブラウザーのバツ印をクリックしてブラウザーを閉じておきます。このレッスンでは CSS ファイルにCSS のソースコードを入力する方法について解説しました。

Dreamweaver CC入門

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

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

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

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

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