CSSを使って実際にスタイル(見た目)を変えよう


CSS課題ページ

配色:
サンプル
コード例
サンプルCSS

授業で使用するサイト一覧
LiveWeaver
カラーコード一覧サイト

<共通課題>

ダウンロード⇒CSS課題プリント

イタリック文字のクラスを作り、h4タグに挟まれた「斜体です」に反映させよ

①タグ内に書くやり方↓

ここはH4サイズの文字で、斜体です①

ここはH4サイズの文字で、斜体です①

「コード例1」

ここはH4サイズの文字で、斜体です①

ここはH4サイズの文字で、斜体です①

②HTMLのヘッダ部に書く↓

ここはH4サイズの文字で、斜体です2

ここはH4サイズの文字で、斜体です②

「コード例2」

ここはH4サイズの文字で、斜体です2

ここはH4サイズの文字で、斜体です②

④クラスを使ったスタイル↓

ここはH4サイズの文字で、斜体です4

ここはH4サイズの文字で、斜体です④

「コード例2」

ここはH4サイズの文字で、斜体です4

ここはH4サイズの文字で、斜体です④

クラスとID

CSSでは、「クラス」という共通名や「ID」という固有名を作うことができる。
・クラスは、複数のタグに使うことができる。
・IDは、ページで一ヶ所に使える。

練習>クラスの設定。

CSSの書き方
①クラス作成(ドット.から始める)

.daizi{ font-size:xxx }

クラスのスタイルを使いたいときは、

タグにclass属性を付け、値にクラス名を入れる!

>

②クラスをタグに反映させる

クラスのスタイルを使いたいときは、

タグにclass属性を付け、値にクラス名を入れる!

CSSの主なプロパティ プロパティ名 使用例 主な値
文字の大きさ font-size H1{ font-size : xx-large ; } large
背景色 background-color Body{ background-color : darkgray ; } #000
背景画像 background div{ background : url(“ファイル名かURL”) ; } ファイルを参照
文字色 color p{color : #00f ; } #000

CSSの主なプロパティ プロパティ名
width
高さ height
マージン margine
パッド padding
フロート float

Advertise

シェアする

フォローする