CSS の 主 なプロパティ プロパティ 説 明 color 色 の 設 定 font フォントの 一 括 設 定 font-size フォントサイズの 設 定 font-family フォントの 種 類 の 設 定 font-style 文 字 を 斜 体 にする text-align 位 置 の 設 定 text-decoration 文 字 装 飾 の 設 定 vertical-align 文 字 の 高 さを 揃 える float 文 章 や 画 像 の 回 り 込 みを 設 定 clear 回 り 込 みの 指 定 を 解 除 height 高 さの 設 定 width 幅 の 設 定 margin マージンの 設 定 padding パディングの 設 定 background-position 背 景 画 像 の 表 示 位 置 指 定 background-color 背 景 色 の 設 定 background-image 背 景 画 像 の 指 定 backgraound-repeat 背 景 画 像 の 並 び 方 の 設 定 border 罫 線 の 一 括 設 定 border-color 罫 線 の 色 の 設 定 border-top 上 罫 線 の 設 定 border-bottom 下 罫 線 の 設 定 border-right 右 罫 線 の 設 定 border-left 左 罫 線 の 設 定 border-collapse 罫 線 の 間 隔 の 設 定 list-style 箇 条 書 きの 一 括 設 定 list-style-type 箇 条 書 きのマークの 種 類 の 設 定 list-style-image 箇 条 書 きのマークに 使 用 する 画 像 の 設 定 1
[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) による 指 定 の 2 種 類 に 分 かれます さらに 後 者 の 数 値 (RGB) に よ る 指 定 方 法 は 細 かく 4 種 類 に 分 かれます カラー 名 による 指 定 は 以 下 の 表 のように 赤 なら red 黒 なら black のように 指 定 できます カラー 名 が 直 接 表 示 色 になって いるので 実 際 の 色 をつかみやすいという 利 点 がある 反 面 指 定 できる 色 が 限 られるので 微 妙 な 色 表 現 はできないのが 欠 点 です なお CSS レベル 1 ではカラー 名 は 16 色 が 割 り 当 てられています 色 表 示 色 カラー 名 RGB 白 white #ffffff 銀 色 silver #c0c0c0 灰 色 gray #808080 黒 black #000000 栗 色 maroon #800000 赤 red #ff0000 紫 purple #800080 明 るい 紫 fuchsia #ff00ff 緑 green #008000 ライム lime #00ff00 オリーブ olive #808000 黄 色 yellow #ffff00 藍 色 navy #000080 青 blue #0000ff 青 緑 teal #008080 水 色 aqua #00ffff 2
微 妙 な 色 表 現 を 実 現 するには より 細 かい 数 値 による 設 定 が 必 要 です 色 の 3 原 色 は Red Green Blue ですが 各 原 色 をさらに 256 の 色 に 分 け それぞれに 16 進 数 を 割 り 当 てたものが RGB による 指 定 方 法 です 各 原 色 は 256 通 り 表 現 が 可 能 なので 色 全 体 では 256 256 256 で 約 1677 万 色 の 表 現 が 可 能 です ただし 閲 覧 する 環 境 がこ の 色 数 に 対 応 していることが 条 件 となります なお CSS ではこの RGB による 指 定 は 以 下 の 4 種 類 の 方 法 があります 全 て 半 角 英 数 字 で 記 述 します ( )カッコや rgb 間 のス ペースの 有 無 は 関 係 ありません 設 定 値 ( 半 角 ) #rgb #rrggbb rgb(r,g,b) rgb(r%,g%,b%) 解 説 赤 (Red) 緑 (Green) 青 (Blue)それぞれの 濃 さを 0~9 a~f までの 16 段 階 で 示 す 赤 (Red) 緑 (Green) 青 (Blue)それぞれの 濃 さを 00~99 aa~ff までの 256 段 階 で 示 す 最 も 一 般 的 な 指 定 方 法 赤 (Red) 緑 (Green) 青 (Blue)それぞれの 濃 さを 0~255 までの 256 段 階 の 数 字 で 示 す 赤 (Red) 緑 (Green) 青 (Blue)それぞれの 濃 さを 0~100% までの 101 段 階 のパーセントで 示 す h1 { color:red; } h3 { color:#fff ; } h3 { color:#008000 ; } h4 { color:rgb(0,126,255) ; } h5 { color:rgb(10%,30%,100%) ; } 3
[font]-フォントの 一 括 設 定 font: 値 ; OS にもともとあるシステムフォントを 利 用 して 表 示 するスタイルシートです 値 には 以 下 の 表 のようなシステムフォントが 使 用 できます ただし 閲 覧 環 境 ( 使 用 OS やブラウザ) により 表 示 にばらつきがあります 設 定 値 caption icon menu message-box small-caption status-bar 割 り 当 てられるフォント ボタン 等 のキャプションに 使 用 されるフォント アイコンラベルに 使 用 されるフォント アプリケーションなどのメニューフォント メッセージボックスで 使 用 されるフォント 小 さなコントロールキャプションのフォント ステータスバーに 使 用 されるフォント p{ font:caption; } 段 落 の 文 字 にキャプションのフォントを 設 定 4
[font-size]-フォントサイズの 設 定 font-size: 値 ; 文 字 の 大 きさを 変 えるプロパティです 値 として 入 力 できるのは 大 きく 分 けて 4 つあ り 絶 対 サイズ/ 相 対 サイズ/ 数 値 /パーセントによる 指 定 方 法 です 数 値 とパーセントによる 指 定 方 法 はこちらを 参 照 してください また 相 対 サイズと 絶 対 サイズによる 指 定 方 法 は 以 下 の 表 を 参 考 にしてください 絶 対 サイズ 相 対 サイズ 設 定 値 内 容 設 定 値 内 容 xx-small x-small small medium large x-large xx-large 極 小 小 さい やや 小 さい 標 準 やや 大 きい 大 きい 極 大 larger 一 段 階 大 きく smaller 一 段 階 小 さく サイズを 相 対 値 で 示 す 場 合 その 基 準 となる 長 さはそれぞれ 異 なります 特 に パーセ ントと 上 記 の 相 対 サイズによる 指 定 larger と smaller については 長 さの 基 準 がその 対 象 要 素 の 親 要 素 で 指 定 したサイズとなりますので 注 意 してください body { font-size:small } p { font-size: 30px; } div { font-size:larger; } BODY DIV P 要 素 について 文 字 サイズをそれぞれ 指 定 5
6
[font-family]-フォントの 種 類 の 設 定 font-family: 値, 値 ; 明 朝 体 やゴシック 体 など フォントの 種 類 を 変 えるためのスタイルシートです 値 とし て 有 効 な 指 定 は 固 有 のフォント 名 (MS ゴシックなど) フォントの 大 まかな 種 類 (グ ループ)のみの 指 定 複 数 のフォントによる 指 定 の 3 種 類 の 方 法 があります MS ゴシック Arial など 個 別 のフォントを 指 定 する 方 法 では 指 定 したフォントが 閲 覧 している 人 のパソコンにインストールされていた 場 合 ブラウザは 該 当 のフォントで 表 示 します 一 方 指 定 したフォントが 用 意 されていない 場 合 最 も 似 たフォントで 表 示 され ます フォント 名 を 直 接 指 定 するこの 場 合 では フォント 名 は 正 しく 記 述 する 必 要 があり ます 例 えば 大 文 字 / 小 文 字 全 角 / 半 角 スペース も 一 字 一 句 同 じにする 必 要 が あります 多 くのフォントを 大 まかな 種 類 に 分 け そのグループ 名 で 指 定 することもできます 特 定 のフォントを 指 定 しているわけではないので そのグループに 属 するフォントが 一 つで もあれば 自 動 的 に 選 ばれて 表 示 されます スタイルシートではフォントグループを 以 下 のように 定 めています 以 下 のグループ 名 を 一 つまたは 複 数 値 に 記 述 します フォントグループ 設 定 値 グループ 内 容 serif 明 朝 系 ( 飾 りのある)フォント sans-serif ゴシック 系 ( 飾 りのない)フォント fantasy 装 飾 系 フォント cursive 草 書 体 系 フォント monospace 等 幅 系 フォント 固 有 のフォント 名 やフォントのグループ 名 を 複 数 記 述 する 指 定 方 法 もあります 記 述 順 に 優 先 度 が 低 くなります 最 初 に 書 いたフォントがない 場 合 は 2 番 目 のフォントに 2 番 目 がなければ 3 番 目 に のような 順 序 にフォントが 選 ばれます 従 って フォントの 取 りこ ぼしがないように 最 初 は 固 有 のフォント 名 で 書 き 始 めて 後 に フォントのグルー プ 名 を 書 くのが 一 般 的 です なお 複 数 記 述 する 場 合 は フォント 名,グループ 名 の ように 名 前 同 士 を,( 半 角 カンマ) で 区 切 ります 7
body { font-family:verdana,arial,helvetica,sans-serif; } BDOY 要 素 にフォントの 種 類 を 複 数 指 定 する 8
[font-style]- 文 字 を 斜 体 にする font-style: 値 ; 文 字 を 斜 体 に 変 えるプロパティです 値 には normal/italic/oblique のいずれかを 記 入 します normal が 標 準 であり 斜 体 は 解 除 されます italic と oblique についてですが 多 くの WEB ブラウザでは 見 た 目 上 の 違 いはありません しかし 意 味 上 では italic のほうがより 斜 体 らしいと 定 められています 設 定 値 normal Italic oblique 内 容 斜 体 なし 斜 体 あり(oblique との 差 はあまりない) 斜 体 あり h3 { font-style:oblique; } 見 出 しの 文 字 を 斜 体 に 9
[text-align]- 位 置 の 設 定 text-align: 値 ; ブロックレベル 要 素 の 行 揃 えを 指 定 するスタイルシートです 4 種 類 の 指 定 方 法 が 可 能 で left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え ) justify( 均 等 割 付 ) のそれ ぞれです 初 期 値 についてはブラウザに 依 存 されますが 多 くの WEB ブラウザの 場 合 は left です 設 定 値 ブロックレベル 要 素 の 行 揃 え left center right justify 左 揃 え 中 央 揃 え 右 揃 え 均 等 割 付 p.left { text-align:left; } p.center { text-align:center; } p.right { text-align:right; } 段 落 要 素 に 対 し クラス 指 定 で 行 揃 えを 指 定 10
[text-decoration]- 文 字 装 飾 の 設 定 text-decoration: 値 値.; 文 字 などに 下 線 上 線 または 両 方 の 線 を 引 くスタイルシートです ただし このスタ イルシートが 有 効 なのは 文 字 列 のある 要 素 に 対 してです 例 えば 画 像 などにこのプロパ ティで 線 を 引 くことはできません また 文 字 に 対 して color プロパティを 設 定 している( 文 字 色 を 指 定 している) 場 合 このプロパティによって 引 かれる 線 もその 色 になります 設 定 値 underline overline 文 字 列 に 下 線 を 引 く 文 字 列 に 上 線 を 引 く 内 容 line-through 文 字 列 に 取 り 消 し 線 を 引 く none 装 飾 を 解 除 する a { text-decoration:underline overline; } b { text-decoration:line-through; } 上 下 線 を 引 くという 効 果 と 取 り 消 し 線 を 引 くという 効 果 をそれぞれ 追 加 11
[vertical-align]- 文 字 の 高 さを 揃 える vertical-align: 値 ; 縦 方 向 の 文 字 揃 えを 調 節 するプロパティです 例 えば 文 字 の 大 きさの 異 なる 文 字 や 英 字 と 漢 字 など 文 字 の 高 さが 異 なる 文 字 が 含 まれる 文 章 の 文 字 揃 えを 縦 方 向 に 調 整 しま す baseline など 予 め 決 まっているキーワードとサイズによる 数 値 指 定 が 可 能 です この vertical-align プロパティの 初 期 値 は baseline です baseline とは アルファベッ ト 字 体 の 底 辺 の 位 置 のことを 指 します 通 常 baseline のようにアルファベットはこの baseline を 基 本 として 文 字 が 揃 えられます キーワード 内 容 baseline ベースラインを 基 本 top 上 揃 え middle 中 央 揃 え bottom 下 揃 え super 上 付 き sub 下 付 き text-top テキストの 上 端 揃 え text-bottom テキストの 下 端 揃 え span.eng { vertical-align:super; } SPAN 要 素 にクラスで 縦 方 向 の 文 字 揃 えを 指 定 12
[float]- 文 章 や 画 像 の 回 り 込 みを 設 定 float: 値 ; float プロパティは 文 章 や 画 像 を 回 り 込 みさせる 機 能 をもつスタイルシートです 例 えば float:left; とすると この float プロパティを 指 定 した 内 容 や 要 素 は 左 寄 せさ れ 後 に 続 く 内 容 が その 右 側 に 回 り 込 みます 逆 に float:right; とすれば 回 り 込 み は 右 側 に 設 定 されます この 回 り 込 みは clear プロパティによってその 回 り 込 みが 解 除 されるまで もしくは 後 に 続 くブロックレベル 要 素 の width プロパティの 値 が 指 定 されており なおかつその 要 素 が 内 容 に 収 まりきらないときに 回 り 込 みが 解 除 されます float プロパティは 連 続 して 使 用 することができます 従 って float プロパティ を 指 定 した 連 続 するブロック 要 素 は 連 続 して 回 り 込 みます 例 えば float:left; を 連 続 すると 最 初 の 要 素 の 右 側 に 次 の 内 容 が 回 り 込 みます float プロパティをブロックレベル 要 素 に 指 定 する 場 合 は 必 ずそのブロックレベル 要 素 の width プロパティの 値 を 定 めなければなりません また 2 つ 以 上 のブロックレ ベル 要 素 を float プロパティによって 並 べて 表 示 する 場 合 すべてのブロックレベル 要 素 において float プロパティを 指 定 しなければなりません そうしないと 主 に Gecko 系 エンジン(FireFox や Netscape)で 正 しく 表 示 されません 設 定 値 内 容 left right none 左 に 回 り 込 み 右 に 回 り 込 み 回 り 込 みなし p { height:400px; width:250px;} p.sm1 { float:left; background-color:#ffdff9; } p.sm2 { float:left; background-color:#eeeeee; margin-left:10px;} 2 つの 段 落 要 素 を float プロパティによって 並 べる 13
14
[clear]- 回 り 込 みの 指 定 を 解 除 clear: 値 ; 設 定 値 left right both none 内 容 左 寄 せした 要 素 に 隣 接 する 要 素 の 回 り 込 み 解 除 右 寄 せした 要 素 に 隣 接 する 要 素 の 回 り 込 み 解 除 左 右 療 法 の 回 り 込 みを 解 除 解 除 しない p { height:400px; width:250px;} p.sm1 { float:left; background-color:#ffdff9; } p.sm2 { clear:left; background-color:#eeeeee; margin-top:10px;} 1 つめの 段 落 要 素 を 左 寄 せ 2 つめは 回 り 込 みを 解 除 15
[height]- 高 さの 設 定 height: 値 ; height プロパティは ボックスやブロックレベル 要 素 などの 高 さを 指 定 するスタイル シートです 例 えば ボックスで 言 えば height プロパティは 以 下 の 図 のように ボッ クスの 内 容 の 部 分 を 表 します 300px などのサイズ( 数 値 )による 指 定 方 法 の 他 に 80% など 親 要 素 の 幅 を 基 準 にして 相 対 的 な 値 で 記 述 する 方 法 があります 親 要 素 に 幅 が 定 め られていない 場 合 は ウィンドウの 幅 (BODY 要 素 )が 基 準 となります p { height:150px; background-color:#ffdff9; } 段 落 要 素 の 高 さを 指 定 16
[width]- 幅 の 設 定 width: 値 ; width プロパティは ボックスやブロックレベル 要 素 などの 横 幅 を 指 定 するスタイルシ ートです 例 えば ボックスで 言 えば width プロパティは 以 下 の 図 のように ボック スの 内 容 の 部 分 を 表 します 300px などのサイズ( 数 値 )による 指 定 方 法 の 他 に 80% など 親 要 素 の 幅 を 基 準 にして 相 対 的 な 値 で 記 述 する 方 法 があります 親 要 素 に 幅 が 定 め られていない 場 合 は ウィンドウの 幅 (BODY 要 素 )が 基 準 となります p { width:350px; background-color:#ffdff9; } 段 落 要 素 の 幅 を 指 定 17
[margin]-マージンの 設 定 margin: 値 値 ; ボックスの 外 環 (マージン)において 四 方 向 のサイズを 一 括 で 指 定 します 値 について は 以 下 の 表 のようにその 数 によって 指 定 する 方 向 が 決 まります 記 入 する 値 の 数 対 象 の 方 向 1 つ 四 方 向 ( 上 / 下 / 左 / 右 ) 同 じ 2 つ 鉛 直 と 水 平 方 向 ( 上 下 / 左 右 の 順 ) 3 つ 上 / 左 右 / 下 の 順 4 つ 右 回 り 方 向 ( 上 / 右 / 下 / 左 の 順 ) p { margin:10px 40px 20px; } 段 落 のマージンを 一 括 で 指 定 18
[padding]-パディングの 設 定 padding: 値 値 ; ボックスの 余 白 において 四 方 向 のサイズを 一 括 で 指 定 します 値 については 以 下 の 表 のようにその 数 によって 指 定 する 方 向 が 決 まります 記 入 する 値 の 数 対 象 の 方 向 1 つ 四 方 向 ( 上 / 下 / 左 / 右 ) 同 じ 2 つ 鉛 直 と 水 平 方 向 ( 上 下 / 左 右 の 順 ) 3 つ 上 / 左 右 / 下 の 順 4 つ 右 回 り 方 向 ( 上 / 右 / 下 / 左 の 順 ) p { padding:10px 20px 30px 40px; } div { padding:5px 20px; } 段 落 と DIV 要 素 のパディングを 指 定 19
[background-position]- 背 景 画 像 の 表 示 位 置 指 定 background-position: 値 値 ; background-position プロパティは 背 景 画 像 の 表 示 位 置 を 調 節 するプロパティです background-repeat プロパティによって 画 像 の 繰 り 返 し 設 定 がされている いないに 関 わらず 背 景 画 像 は 初 期 の 状 態 では 要 素 の 左 上 から 開 始 されて 表 示 されますが この 位 置 を 変 えることができます なお このプロパティは 背 景 画 像 を 挿 入 する background-image プロパティのサブプロパティなので background-image プロパティも 同 時 に 記 述 され ていなければ 動 作 しません CSS の にあるように 通 常 は 2 つの 値 を 記 入 しスペースで 区 切 ります 最 初 の 値 は 横 方 向 の 位 置 (x 座 標 ) を 後 続 の 値 は 縦 方 向 の 位 置 (y 座 標 ) を 記 入 します 値 の は left top などキーワードによる 指 定 の 他 に 33px 52% のようにサイズや パーセントで 指 定 することもできます キーワードによる 指 定 については 以 下 の 表 を 参 照 してください キーワード 表 示 位 置 left 画 像 を 要 素 のパディングに 合 わせて 左 寄 せ 横 方 向 (x 座 標 ) center 画 像 を 要 素 のパディングに 合 わせて 中 央 揃 え right 画 像 を 要 素 のパディングに 合 わせて 右 寄 せ top 画 像 を 要 素 のパディングに 合 わせて 上 揃 え 縦 方 向 (y 座 標 ) center 画 像 を 要 素 のパディングに 合 わせて 中 央 揃 え bottom 画 像 を 要 素 のパディングに 合 わせて 下 揃 え 20
値 は 1 つだけ 設 定 することも 可 能 です キーワードで 値 を 1 つ 設 定 した 場 合 以 下 の 表 の ように 解 釈 されます つまり 一 方 は 必 ず center となります キーワードの 省 略 形 解 釈 left left center (0% 50%) center center center (50% 50%) right right center (100% 50%) top center top (50% 0%) bottom center bottom (50% 100%) p.bk1 { background-image:url(../../img/bg_smp.gif); background-position:center center; } p.bk2 { background-image:url(../../img/bg_smp.gif); background-position:20px; } 段 落 要 素 にクラス 指 定 で 画 像 の 表 示 位 置 を 設 定 21
[background-color]- 背 景 色 の 設 定 background-color: 値 ; 背 景 色 を 指 定 するスタイルシートです background-color プロパティはページの 背 景 や 各 要 素 の 背 景 に 色 を 付 けることができます 値 には 目 的 の 色 をカラー 名 やカラーコー ド 濃 度 で 指 定 します カラー 名 はカラーコードについてはこちらを 参 考 にしてください body { background-color:#ffdff9; } BODY 要 素 の 背 景 に 色 を 付 ける 22
[background-image]- 背 景 画 像 の 指 定 background-image:url ( 画 像 の URI) ; background-image プロパティは ページや 要 素 に 背 景 を 表 示 するスタイルシートです 値 には url( 背 景 として 使 用 する 画 像 への 絶 対 または 相 対 パス) を 記 述 します 絶 対 パス 相 対 パスについてはこちらを 参 照 してください body { background-image:url(../img/bg.gif); } BODY 要 素 に 背 景 画 像 を 指 定 23
[background-repeat]- 背 景 画 像 の 並 び 方 の 設 定 background-repeat: 値 ; background-repeat プロパティは 背 景 画 像 の 繰 り 返 しを 設 定 するスタイルシートです 通 常 background-image プロパティによって 背 景 画 像 を 読 み 込 んだ 場 合 背 景 画 像 は 繰 り 返 して 全 面 に 表 示 されます これは background-repeat プロパティの 初 期 値 (repeat)にもあるように 標 準 では 背 景 画 像 は 繰 り 返 して 表 示 されるためです 設 定 値 内 容 repeat 全 面 に 繰 り 返 し repeat-x 横 方 向 (x 方 向 )のみ 繰 り 返 し repeat-y 縦 方 向 (y 方 向 )のみ 繰 り 返 し norepeat 繰 り 返 しなし p { width:350px; height:120px; background-image:url(../../img/bg_smp.gif); } p.x-posit { background-repeat:repeat-x; } p.y-posit { background-repeat:repeat-y; } p.no-posit { background-repeat:no-repeat; } 段 落 要 素 に 背 景 画 像 の 繰 り 返 し 設 定 を 適 用 する 24
[border]- 罫 線 の 一 括 設 定 border: 太 さ 線 種 色 ; ボックスの 外 枠 ( 境 界 線 )を 四 方 向 一 括 で 指 定 します border: に 続 く 値 には ボーダ ーの 太 さ 線 種 色 をそれぞれ 指 定 します 各 値 の 間 には 半 角 スペースを 挿 入 します ま たこれら 3 つの 値 の 順 序 については 順 不 同 です 従 って 色 / 太 さ/ 線 種 の 順 番 に 書 いて も 問 題 ありません 線 種 で 指 定 できる 値 は 以 下 の 表 を 参 照 してください 線 種 スタイル none なし( 透 明 ) solid dashed dotted double groove ridge inset outset 実 線 破 線 点 線 二 重 線 くぼみ 浮 きだし 立 体 くぼみ 立 体 浮 きだし p.solid { border:5px solid #ffdff9; } p.dashed { border:5px dashed #ffdff9; } p.dotted { border:5px dotted #ffdff9; } p.double { border:5px double #ffdff9; } p.groove { border:5px groove #ffdff9; } p.ridge { border:5px ridge #ffdff9; } p.inset { border:5px inset #ffdff9; } p.outset { border:5px outset #ffdff9; } 各 段 落 にボーダーを 指 定 25
26
[border-color]- 罫 線 の 色 の 設 定 border-color:カラー カラー ; ボックスの 外 枠 ( 境 界 線 )は 色 をまとめて 指 定 することもできます ボーダーカラープ ロパティに 対 する 値 はその 数 によって 指 定 できる 上 下 左 右 の 方 向 が 以 下 の 表 のよ うになります 記 入 する 値 の 数 対 象 の 方 向 1 つ 四 方 向 ( 上 / 下 / 左 / 右 ) 同 じ 2 つ 鉛 直 と 水 平 方 向 ( 上 下 / 左 右 の 順 ) 3 つ 上 / 左 右 / 下 の 順 4 つ 右 回 り 方 向 ( 上 / 右 / 下 / 左 の 順 ) div { border:3px solid; border-color:#00ff00 #ff0000 #0000ff #000000; } DIV 要 素 の 外 枠 の 太 さを 3 ピクセルの 実 線 色 は 緑 赤 青 黒 を 指 定 27
[border-xxx]- 罫 線 の 上 下 左 右 の 個 別 の 設 定 border-top: 太 さ 線 種 色 ; border-bottom: 同 上 ; border-left: 同 上 ; border-right: 同 上 ; ボックスの 外 枠 を 上 下 左 右 それぞれ 個 別 に 指 定 します border-xxx: に 続 く 値 に は ボーダーの 太 さ 線 種 色 をそれぞれ 指 定 します 各 値 の 間 には 半 角 スペースを 挿 入 します またこれら 3 つの 値 の 順 序 については 順 不 同 です 従 って 色 / 太 さ/ 線 種 の 順 番 に 書 いても 問 題 ありません 線 種 には 以 下 の 値 を 指 定 できます 線 種 スタイル none なし( 透 明 ) solid dashed dotted double groove ridge inset outset 実 線 破 線 点 線 二 重 線 くぼみ 浮 きだし 立 体 くぼみ 立 体 浮 きだし 28
div { border-top:2px solid #ff0000; border-bottom:5px dotted #000000; border-left:3px double #00ff00; border-right:4px dashed #0000ff; } DIV 要 素 のボーダーを 上 下 左 右 独 立 して 指 定 する 29
[border-collapse]- 罫 線 の 間 隔 の 設 定 border-collapse: 値 ; border-collapse プロパティは セルに 境 界 線 を 表 示 した 場 合 の 境 界 線 の 重 なり 方 を 指 定 するスタイルシートです 通 常 では 境 界 線 は 互 いに 離 れて 表 示 されますが 境 界 線 を 重 ねて(つぶして) 表 示 させることもできます 設 定 値 内 容 separate 境 界 線 を 離 して 表 示 ( 初 期 値 ) collapse 境 界 線 を 重 ねて 表 示 table { border-collapse:collapse; width:350px; border:1px solid #666666; background:#f6f6f6;} td { border:1px solid #666666; padding:2px; } 表 の 境 界 線 を 重 ねる 30
[list-style]- 箇 条 書 きの 一 括 設 定 list-style:list-style-type の 値 list-style-image の 値 list-style-position の 値 ; list-style プロパティは リスト 関 連 のスタイルシートを 一 括 で 指 定 するスタイルシ ートです list-style-type プロパティの 値 list-style-image プロパティの 値 list-style-position プロパティの 値 をそれぞれ 並 べて 記 述 します 値 同 士 は 半 角 ス ペースで 区 切 ります また これら 3 つの 値 を 記 述 する 順 序 は 自 由 です また 一 部 の プロパティを 省 略 することもできます この 場 合 省 略 したプロパティはその 初 期 値 が 与 えられたものとして 解 釈 されます ul { list-style:inside circle; background:#ffdff9; } 中 の 白 いリストマークを 要 素 の 中 に 表 示 31
[list-style-type]- 箇 条 書 きのマークの 種 類 の 設 定 list-style-type: 値 ; list-style-type プロパティは リスト 項 目 ( 箇 条 書 き)の 前 に 付 くリストマークの 種 類 を 変 えることができるスタイルシートです CSS レベル 2 では この 種 類 が 豊 富 に 用 意 されていますが どのブラウザも 完 全 には 対 応 していません 値 内 容 IE 5.0 以 上 NS7.1 FF1.0 OP8.0 SF MAC IE5.0 none マーカーなし disk 塗 りつぶした 丸 circle 中 の 白 い 丸 square 塗 りつぶした 四 角 decimal 数 字 decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha upper-alpha 先 頭 に 0 がつく 数 字 ローマ 数 字 ( 小 文 字 ) ローマ 数 字 ( 大 文 字 ) ギリシャ 文 字 ( 小 文 字 ) アルファベット( 小 文 字 ) アルファベット( 大 文 字 ) lower-latin ラテン 語 ( 小 文 字 ) upper-latin ラテン 語 ( 大 文 字 ) 32
hebrew ヘブライ 語 armenian アルメニア 語 georgian グルジア 語 cjk-ideographic 漢 数 字 hiragana ひらがな katakana カタカナ hiragana-iroha katakana-iroha ひらがな(いろは 順 ) カタカナ(いろは 順 ) 引 用 元 : 藤 本 壱 スタイルシート ポケットリファレンス 技 術 評 論 社 P247 2005 ul { list-style-type:upper-alpha; } リストマークの 種 類 ( 大 文 字 アルファベット)を UL 要 素 に 適 用 33
[list-style-image]- 箇 条 書 きのマークに 使 用 する 画 像 の 設 定 list-style-type: 値 ; list-style-image プロパティは リストマーク( 箇 条 書 きのマーク)に 画 像 を 使 うため のスタイルシートです list-style-image:url( 画 像 ファイルの URI); のように リストマー クに 使 用 したい 画 像 へのパスを 相 対 パスもしくは 絶 対 パスで 記 述 します 要 素 に list-style-type プロパティと list-style-image プロパティを 同 時 に 指 定 することも 可 能 です この 場 合 は list-style-image プロパティが 優 先 されて 表 示 されます list-style-image プロパティは リストマークを 表 示 する 位 置 までは 指 定 することがで きません 表 示 位 置 を 変 えたい 場 合 は このプロパティではなく background-image プロパティと background-position プロパティを 使 うと 上 手 く 指 定 できます ul { list-style-image:url(../../img/list8.gif); } リストマーク(ul 要 素 )に 画 像 を 指 定 34
サイズの 表 し 方 スタイルシートでは 文 字 の 大 きさやボックスの 長 さなど 常 にサイズを 指 定 する 必 要 があります スタイルシートでのサイズの 表 し 方 は 大 きく 分 けて 2 種 類 あります 一 つ はあるものを 基 準 として 長 さを 指 定 する 相 対 単 位 とサイズを 絶 対 的 に 指 定 する 絶 対 単 位 があります また ぞれぞれの 長 さの 単 位 は 以 下 のようにさらに 細 かく 分 けて 指 定 することができます 絶 対 サイズ 指 定 相 対 サイズ 指 定 長 さの 単 位 基 準 の 長 さ 長 さの 単 位 基 準 の 長 さ in インチ(1inch=2.54cm) ex x の 文 字 の 高 さ mm ミリメートル em 1 文 字 分 の 高 さ cm センチメートル px 画 面 の 1 次 点 pt pc ポイント(72 ポイント=1 イン チ) パイカ(1pc=12 ポイント) 相 対 パーセント 指 定 % 親 要 素 など ex や em は 文 字 の 高 さを 基 準 とする 相 対 単 位 ですので 基 準 となる 長 さはその 要 素 で 指 定 する font-size プロパティの 指 定 を 基 準 とします p { font-size:15px ; padding-left:2em; } 段 落 の 文 字 サイズを 15 ピクセル 左 側 の 余 白 をフォントサイズの 2 倍 にとる 35
今 度 はフォントサイズに 直 接 ex や em で 指 定 した 場 合 です この 場 合 に 表 示 される 文 字 サイズは その 要 素 の 親 にあたる 親 要 素 で 指 定 された 文 字 サイズ(font-size プロパティ) が 基 準 となります p { font-size:15px ; } strong { font-size:1.2em ; } 段 落 の 文 字 サイズを 15 ピクセル 強 調 文 字 をその 1.2 倍 で 表 示 36