スタイルシート例文辞典

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