|
Last Update:2011/10/1 PM 4:57
このページはスタイルシートの用例を載せています。このページはCSS3例文辞典に移行しましたのでメンテナンス等は行われません。→CSS3例文辞典へ
現時点で
・Internet Explorer 3.x, 4.x
・CSS Version
に関しては未チェックですので信用しないでください。
このページに目的のものがない場合はJavaScript例文辞典、ホームページ例文辞典の方も参照してみてください。
HTMLタグリファレンス、スタイルシートリファレンスも用意してありますので、ご利用ください。
■基本／定義
［０１］スタイルシートのコメント
［０２］スタイルシートの設定（<style>タグの場合）
［０３］スタイルシートの設定（style属性の場合）
［０４］スタイルシートの設定（別ファイルを読み込む場合<link>）
［０５］スタイルシートの設定（別ファイルを読み込む場合@import）
［０６］全てのタグに同じスタイルを設定する
［０７］タグにスタイルを設定する
［０８］クラスを設定する
［０９］特定のタグのみ機能するクラスを設定する
［１０］下位要素を指定する
［１１］子要素を指定する
［１２］タグに複数のクラスを指定する
■ページレイアウト
［０１］ページ全体の背景色を指定する
［０２］ページ全体のマージン（余白）をなくす
［０３］ページのマージン（余白）を左側100ピクセル、上側20ピクセルにする
［０４］ページ全体の行送りを文字サイズに対して150%にする
［０５］ウィンドウの右側のスクロールバーを消す
［０６］ウィンドウの下側のスクロールバーを消す
［０７］水平線の色を指定する
［０８］水平線の色を複数指定する
［０９］水平線の色を複数指定する（タグ内に直接)
［１０］二段組みにする
［１１］段落を角丸にする
［１２］五段組にする
［１３］ページ全体の背景色を指定する (html)
［１４］スクロールしてもブラウザでの表示位置を変えないようにする
［１５］二段組にする（マージンで調整）
■ページの背景画像
［０１］ページの背景画像を指定する
［０２］ページの背景画像を固定する
［０３］ページの背景画像を一枚だけ表示する
［０４］ページの背景画像を縦方向にだけ繰り返し表示する
［０５］ページの背景画像を横方向にだけ繰り返し表示する
［０６］背景画像を一枚だけページの中央に表示する
［０７］背景画像を一枚だけページの右上に表示する
［０８］背景画像を一枚だけページの左下に表示する
［０９］背景画像を一枚だけページの右下に表示する
［１０］背景画像を一枚だけページの右上に固定して表示する
［１１］背景画像を一枚だけページの右下に固定して表示する
［１２］背景画像をページの中央に繰り返し表示する
［１３］背景画像をページの右側に繰り返し表示する
［１４］背景画像をページの下側に繰り返し表示する
［１５］背景画像をページの左上から(200,80)ピクセルの位置に表示させる
［１６］ページの背景画像を二枚表示する
■段 落
［０１］段落の背景色を指定する
［０２］段落の背景画像を指定する
［０３］段落の枠を指定する
［０４］行送りを文字サイズに対して150%にする
［０５］段落の枠幅を上下左右別々に指定する
［０６］段落の枠の色を指定する
［０７］段落の枠の色を上下左右別々に指定する
［０８］段落の最初の１文字を大きくする
［０９］段落の最初の一行の文字を大きくする
［１０］段落を左上から座標(200,50)に表示する
［１１］段落の重なり順を指定する
［１２］インデント（字下げ）を指定する
［１３］縦書きにする
［１４］見出しh2を色違いで同じページ内に表示する
［１５］見出しh2を色違いで同じページ内に表示する（style）
［１６］段落内にマウスが乗ったら背景色を変える
［１７］段落と見出しの隙間をなくす
［１８］指定サイズの高さ以下にならないようにする
■文 字
［０１］文字色を指定する
［０２］文字サイズを指定する
［０３］文字の太さを指定する
［０４］文字を斜体にする
［０５］文字に下線（アンダーライン）を付ける
［０６］文字に上線を付ける
［０７］文字に取消線を付ける
［０８］文字の上下に線を付ける
［０９］文字の間隔を指定する
■リンク
［０１］リンク文字の下線（アンダーライン）をなくす
［０２］マウスがリンク文字上に乗ったら背景色を変える
［０３］マウスがリンク文字上に乗ったらリンク文字の色を変える
［０４］マウスがリンク文字上に乗ったら下線（アンダーライン）を表示する
［０５］マウスがリンク文字上に乗ったら上線を表示する
［０６］マウスがリンク文字上に乗ったらリンク文字の色を個別に変える
［０７］リンクをメニューのように枠線を付けて表示する
［０８］リンクをメニューのように枠線を付けて表示する（クラス指定）
［０９］マウスオーバーで画像を入れ替える(bg-pos)
［１０］マウスオーバーでリンク文字の位置をずらす
［１１］ターゲット名によってスタイルを変更する
［１２］リンク文字の下線（アンダーライン）を点線にする
［１３］リンク前とリンク済みで画像を変える
［１４］ページ全体でリンク文字の下線をなくすが１行だけ下線を表示したい
［１５］マウスがテーブルのセルの上に乗ったら背景色を変更する
■画 像
［０１］画像の表示位置を座標(200,50)にする
［０２］画像の回りに枠を付ける
［０３］画像の回りに枠を付ける（枠との間に余白を入れる）
［０４］画像を右下に表示する
［０５］画像を右上に表示する
［０６］画像を左下に表示する
■フォーム
［０１］テキストフィールドの文字色を指定する
［０２］テキストフィールドの背景色を指定する
［０３］テキストフィールドの枠を指定する
［０４］セレクトメニューの背景色を指定する
［０５］セレクトメニューの選択項目の背景色を指定する
［０６］ラジオボタンの大きさを変える
［０７］チェックボックスの大きさを変える
［０８］テキストフィールドの文字の大きさを変える
［０９］テキストエリアの文字の大きさを変える
［１０］エレメントで<input type="text">のみスタイルを変える
［１１］セレクトメニューの文字サイズを指定する
［１２］ボタン<button>にスタイルを適用する
■テーブル
［０１］テーブルの背景色を指定する
［０２］テーブルの背景画像を指定する
［０３］テーブルの横幅を指定する
［０４］テーブルの縦幅を指定する
［０５］テーブルの表示を高速化する
［０６］テーブルの枠幅を一括指定する
［０７］セルとセルの間の余白をなくす
［０８］左端のセルのみに色を付ける
■リスト
［０１］ページ内でリストごと異なるマークを表示する
［０２］リストマークの色を変える
［０３］リストマークを任意の文字にする
［０４］リストの上の余白をなくす
［０５］リストを横に並べる
■印刷／プリント
［０１］改ページ位置を指定する
［０２］画面表示と印刷でスタイルを変える
■フィルタ効果
［０１］文字を半透明にする【IE】
［０２］文字を半透明にする【NN6】
［０３］文字を半透明にする【IE+NN6】
［０４］画像を半透明にする【IE+NN6】
［０５］文字に影を付ける【Safari】
［０６］ぼかしフィルタ【IE】
［０７］ドロップシャドウフィルタ【IE】
［０８］シャドウフィルタ【IE】
［０９］上下反転フィルタ【IE】
［１０］左右反転フィルタ【IE】
［１１］発光フィルタ【IE】
［１２］白黒（グレー）フィルタ【IE】
［１３］色反転フィルタ【IE】
［１４］X線効果フィルタ【IE】
［１５］波形効果フィルタ【IE】
［１６］クロマキーフィルタ【IE】
［１７］マスクフィルタ【IE】
■スクロールバー
［０１］ウィンドウの右側のスクロールバーを消す
［０２］スクロールバーの矢印の色を指定する
［０３］スクロールバーの全体の色を指定する
［０４］スクロールバーの面の部分の色を指定する
［０５］スクロールバーの影の暗い部分の色を指定する
［０６］スクロールバーの影の部分の色を指定する
［０７］スクロールバーのハイライトの部分の色を指定する
［０８］スクロールバーの左と上の部分の色を指定する
■その他
［０１］アウトライン（フォーカス時の枠）を消す
［０２］文字サイズを固定する（Windows版Internet Explorer）
［０３］マウスカーソルの形状を変える
［０４］Netscape 4だけ別のスタイルを指定する
［０５］Internet Explorer 6以前と、それ以外でスタイルを分ける
［０６］Mac版Internet Explorerと、それ以外でスタイルを分ける
［０７］マウスオーバーで画像を入れ替える
［０８］マウスオーバーで画像を入れ替える(bg-pos)
［０９］マウスオーバーで詳細表示
［１０］プルダウンメニュー
［１１］スタイルシートを切り替えられるようにする
［１２］インライン要素をブロック要素にする
［１３］JavaScriptでスタイルシートを切り替える（１つのみの場合）
［１４］JavaScriptでスタイルシートを切り替える（複数の場合）
［１５］JavaScriptでスタイルシートを切り替える（複数の場合２）
■CSS Hack (CSSハック)
［０１］Win IE5以降だけ別のスタイルシートファイルを読み込ませる
［０２］Win IE5, 5.5, 6別にスタイルシートファイルを読み込ませる
［０３］Win IE4〜5.5とそれ以外でスタイルを分ける
［０４］Netscape 4にスタイルシートファイルを読み込ませないようにする
［０５］Netscape 4とIE4にスタイルシートファイルを読み込ませないようにする
［０６］Netscape 4〜7、Win IE4、Mac IE5にスタイルシートファイルを読み込ませないようにする
［０７］Mac IE5にスタイルを適用しないようにする
［０８］Win IE4〜6だけ別のスタイルを適用する
［０９］Win/Mac IEだけ別のスタイルを適用する
［１０］Win IE4〜6、Win Opera 8だけ別のスタイルを適用する
［１１］Mac IE5、Win IE4だけ別のスタイルを適用する
［１２］Win/Mac IEとSafariだけ別のスタイルを適用する
［１３］Mac IE5以外に別のスタイルを適用する
［１４］Safariだけ別のスタイルを適用する
2001-2005 Copyright 古籏一浩/[email protected]
|
