Last Update:2011年10月1日 PM 4:57

このページはスタイルシートの用例を載せています。このページはCSS3例文辞典に移行しましたのでメンテナンス等は行われません。→CSS3例文辞典へ
現時点で

・Internet Explorer 3.x, 4.x
・CSS Version

に関しては未チェックですので信用しないでください。
このページに目的のものがない場合はJavaScript例文辞典、ホームページ例文辞典の方も参照してみてください。
HTMLタグリファレンス、スタイルシートリファレンスも用意してありますので、ご利用ください。

---

■しかく基本/定義

[01]スタイルシートのコメント
[02]スタイルシートの設定(<style>タグの場合)
[03]スタイルシートの設定(style属性の場合)
[04]スタイルシートの設定(別ファイルを読み込む場合<link>)
[05]スタイルシートの設定(別ファイルを読み込む場合@import)
[06]全てのタグに同じスタイルを設定する
[07]タグにスタイルを設定する
[08]クラスを設定する
[09]特定のタグのみ機能するクラスを設定する
[10]下位要素を指定する
[11]子要素を指定する
[12]タグに複数のクラスを指定する

■しかくページレイアウト

[01]ページ全体の背景色を指定する
[02]ページ全体のマージン(余白)をなくす
[03]ページのマージン(余白)を左側100ピクセル、上側20ピクセルにする
[04]ページ全体の行送りを文字サイズに対して150%にする
[05]ウィンドウの右側のスクロールバーを消す
[06]ウィンドウの下側のスクロールバーを消す
[07]水平線の色を指定する
[08]水平線の色を複数指定する
[09]水平線の色を複数指定する(タグ内に直接)
[10]二段組みにする
[11]段落を角丸にする
[12]五段組にする
[13]ページ全体の背景色を指定する (html)
[14]スクロールしてもブラウザでの表示位置を変えないようにする
[15]二段組にする(マージンで調整)

■しかくページの背景画像

[01]ページの背景画像を指定する
[02]ページの背景画像を固定する
[03]ページの背景画像を一枚だけ表示する
[04]ページの背景画像を縦方向にだけ繰り返し表示する
[05]ページの背景画像を横方向にだけ繰り返し表示する
[06]背景画像を一枚だけページの中央に表示する
[07]背景画像を一枚だけページの右上に表示する
[08]背景画像を一枚だけページの左下に表示する
[09]背景画像を一枚だけページの右下に表示する
[10]背景画像を一枚だけページの右上に固定して表示する
[11]背景画像を一枚だけページの右下に固定して表示する
[12]背景画像をページの中央に繰り返し表示する
[13]背景画像をページの右側に繰り返し表示する
[14]背景画像をページの下側に繰り返し表示する
[15]背景画像をページの左上から(200,80)ピクセルの位置に表示させる
[16]ページの背景画像を二枚表示する

■しかく段 落

[01]段落の背景色を指定する
[02]段落の背景画像を指定する
[03]段落の枠を指定する
[04]行送りを文字サイズに対して150%にする
[05]段落の枠幅を上下左右別々に指定する
[06]段落の枠の色を指定する
[07]段落の枠の色を上下左右別々に指定する
[08]段落の最初の1文字を大きくする
[09]段落の最初の一行の文字を大きくする
[10]段落を左上から座標(200,50)に表示する
[11]段落の重なり順を指定する
[12]インデント(字下げ)を指定する
[13]縦書きにする
[14]見出しh2を色違いで同じページ内に表示する
[15]見出しh2を色違いで同じページ内に表示する(style)
[16]段落内にマウスが乗ったら背景色を変える
[17]段落と見出しの隙間をなくす
[18]指定サイズの高さ以下にならないようにする

■しかく文 字

[01]文字色を指定する
[02]文字サイズを指定する
[03]文字の太さを指定する
[04]文字を斜体にする
[05]文字に下線(アンダーライン)を付ける
[06]文字に上線を付ける
[07]文字に取消線を付ける
[08]文字の上下に線を付ける
[09]文字の間隔を指定する

■しかくリンク

[01]リンク文字の下線(アンダーライン)をなくす
[02]マウスがリンク文字上に乗ったら背景色を変える
[03]マウスがリンク文字上に乗ったらリンク文字の色を変える
[04]マウスがリンク文字上に乗ったら下線(アンダーライン)を表示する
[05]マウスがリンク文字上に乗ったら上線を表示する
[06]マウスがリンク文字上に乗ったらリンク文字の色を個別に変える
[07]リンクをメニューのように枠線を付けて表示する
[08]リンクをメニューのように枠線を付けて表示する(クラス指定)
[09]マウスオーバーで画像を入れ替える(bg-pos)
[10]マウスオーバーでリンク文字の位置をずらす
[11]ターゲット名によってスタイルを変更する
[12]リンク文字の下線(アンダーライン)を点線にする
[13]リンク前とリンク済みで画像を変える
[14]ページ全体でリンク文字の下線をなくすが1行だけ下線を表示したい
[15]マウスがテーブルのセルの上に乗ったら背景色を変更する

■しかく画 像

[01]画像の表示位置を座標(200,50)にする
[02]画像の回りに枠を付ける
[03]画像の回りに枠を付ける(枠との間に余白を入れる)
[04]画像を右下に表示する
[05]画像を右上に表示する
[06]画像を左下に表示する

■しかくフォーム

[01]テキストフィールドの文字色を指定する
[02]テキストフィールドの背景色を指定する
[03]テキストフィールドの枠を指定する
[04]セレクトメニューの背景色を指定する
[05]セレクトメニューの選択項目の背景色を指定する
[06]ラジオボタンの大きさを変える
[07]チェックボックスの大きさを変える
[08]テキストフィールドの文字の大きさを変える
[09]テキストエリアの文字の大きさを変える
[10]エレメントで<input type="text">のみスタイルを変える
[11]セレクトメニューの文字サイズを指定する
[12]ボタン<button>にスタイルを適用する

■しかくテーブル

[01]テーブルの背景色を指定する
[02]テーブルの背景画像を指定する
[03]テーブルの横幅を指定する
[04]テーブルの縦幅を指定する
[05]テーブルの表示を高速化する
[06]テーブルの枠幅を一括指定する
[07]セルとセルの間の余白をなくす
[08]左端のセルのみに色を付ける

■しかくリスト

[01]ページ内でリストごと異なるマークを表示する
[02]リストマークの色を変える
[03]リストマークを任意の文字にする
[04]リストの上の余白をなくす
[05]リストを横に並べる

■しかく印刷/プリント

[01]改ページ位置を指定する
[02]画面表示と印刷でスタイルを変える

■しかくフィルタ効果

[01]文字を半透明にする【IE】
[02]文字を半透明にする【NN6】
[03]文字を半透明にする【IE+NN6】
[04]画像を半透明にする【IE+NN6】
[05]文字に影を付ける【Safari】
[06]ぼかしフィルタ【IE】
[07]ドロップシャドウフィルタ【IE】
[08]シャドウフィルタ【IE】
[09]上下反転フィルタ【IE】
[10]左右反転フィルタ【IE】
[11]発光フィルタ【IE】
[12]白黒(グレー)フィルタ【IE】
[13]色反転フィルタ【IE】
[14]X線効果フィルタ【IE】
[15]波形効果フィルタ【IE】
[16]クロマキーフィルタ【IE】
[17]マスクフィルタ【IE】

■しかくスクロールバー

[01]ウィンドウの右側のスクロールバーを消す
[02]スクロールバーの矢印の色を指定する
[03]スクロールバーの全体の色を指定する
[04]スクロールバーの面の部分の色を指定する
[05]スクロールバーの影の暗い部分の色を指定する
[06]スクロールバーの影の部分の色を指定する
[07]スクロールバーのハイライトの部分の色を指定する
[08]スクロールバーの左と上の部分の色を指定する

■しかくその他

[01]アウトライン(フォーカス時の枠)を消す
[02]文字サイズを固定する(Windows版Internet Explorer)
[03]マウスカーソルの形状を変える
[04]Netscape 4だけ別のスタイルを指定する
[05]Internet Explorer 6以前と、それ以外でスタイルを分ける
[06]Mac版Internet Explorerと、それ以外でスタイルを分ける
[07]マウスオーバーで画像を入れ替える
[08]マウスオーバーで画像を入れ替える(bg-pos)
[09]マウスオーバーで詳細表示
[10]プルダウンメニュー
[11]スタイルシートを切り替えられるようにする
[12]インライン要素をブロック要素にする
[13]JavaScriptでスタイルシートを切り替える(1つのみの場合)
[14]JavaScriptでスタイルシートを切り替える(複数の場合)
[15]JavaScriptでスタイルシートを切り替える(複数の場合2)

■しかくCSS Hack (CSSハック)

[01]Win IE5以降だけ別のスタイルシートファイルを読み込ませる
[02]Win IE5, 5.5, 6別にスタイルシートファイルを読み込ませる
[03]Win IE4〜5.5とそれ以外でスタイルを分ける
[04]Netscape 4にスタイルシートファイルを読み込ませないようにする
[05]Netscape 4とIE4にスタイルシートファイルを読み込ませないようにする
[06]Netscape 4〜7、Win IE4、Mac IE5にスタイルシートファイルを読み込ませないようにする
[07]Mac IE5にスタイルを適用しないようにする
[08]Win IE4〜6だけ別のスタイルを適用する
[09]Win/Mac IEだけ別のスタイルを適用する
[10]Win IE4〜6、Win Opera 8だけ別のスタイルを適用する
[11]Mac IE5、Win IE4だけ別のスタイルを適用する
[12]Win/Mac IEとSafariだけ別のスタイルを適用する
[13]Mac IE5以外に別のスタイルを適用する
[14]Safariだけ別のスタイルを適用する

2001-2005 Copyright 古籏一浩/openspc@po.shiojiri.ne.jp