CSS sample

指定の仕方(その1)

タグに「style=」パラメータを指定して行う。
一部だけ赤文字にしてみる。

指定の仕方(その2)

ヘッダー部分でタグのスタイルをまとめて指定する。
一部だけ

色を変えて

みる。

指定の仕方(その3)

ヘッダー部分でタグに対応するクラスのスタイルをまとめて指定する。

段落全体の色を変えてみる。

指定の仕方(その4)

ヘッダー部分でクラスのスタイルをまとめて指定する。
一部だけ色を変えてみる。

指定の仕方(その5)

ヘッダー部分でIDのスタイルをまとめて指定する。
一部だけ色を変えてみる。

指定の仕方(その6)

外部ファイルでスタイルをまとめて指定する。
一部だけ色を変えてみる。

色の指定 color: (既出ですが)

一部だけ色を変えてみる。

背景色の指定 background: (既出ですが)

一部だけ色を変えてみる。

マージンの指定 margin(-top,-bottom,-right,-left):

マージンは外側の余白。

パディングの指定 padding(-top,-bottom,-right,-left):

パディングは内側の余白。

枠の指定 border(-top,-bottom,-right,-left):

ワクワクする枠...。

表示の仕方を指定 display:

括弧の中は(見えたら)ダメ。

場所の指定 position: (static)

場所の指定 static(既定の場所)

場所の指定 position: (absolute)

場所の指定 absolute(親要素の左上を原点とする)

場所の指定 position: (relative)

場所の指定 relative(規定の場所からの相対位置)

場所の指定 position: (fixed IEダメ)

場所の指定 fixed(スクロールせずに絶対位置に固定。IEではダメ)

レイアウト指定 float:

画像の説明がいろいろと入るわけですが、面倒なので適当な文章を入力してます。
ここ以降は回り込みが解除されているはず。

表示の仕方を指定 visibility:

括弧の中は(見えたら)ダメ。

字下げ text-indent:

字下げで表示。

文字の表示位置 text-align:

センタリングしてみました。

文字の飾り text-decoration:

打ち消し線。

テーブルの枠を常に表示 empty-cells: (IEダメ?)

header1header3
data12
data21data23

日本語変換 ime-mode: (IE限定)