Lesson5 CSSによるデザイン

Deamweaver演習DreamweaverCC対応

CSSによるデザインLesson5

新規 CSSファイルの作成［ CSSデザイナー］パネル→［ CSSソースを追加］→［新規 CSSファイルを作成］

新規 CSSファイルの作成 style.cssが作成され、 index.htmlとリンクしました。

コードビューでリンクを確認コードビューに切り替えると linkタグで CSSファイルとリンクしていることを確認することができます。

見出し１にスタイルを適用スタイルを適用したい個所をあらかじめクリックするのがポイントです。

見出し１にスタイルを適用

見出し１にスタイルを適用見出し１の文字色が変わりました。

cssファイルの確認コードビューで cssファイルの内容を確認することができます。

classセレクターの使用

classセレクターは先頭に“ .”を入力するclassセレクターの名称は先頭に“ .”を入力します。

class「 .maintext」を定義し、太字を設定します。

classセレクターの使用 pタグに class「 .maintext」を適用します。

idセレクターの使用 id「 #mainList」を定義し、行頭記号を●→■に設定します。

idセレクターは先頭に“ #”を入力するidセレクターの名称は先頭に“ #”を入力します。

idセレクターの使用 ulタグに id「 #mainList」を適用します。

Design