ホーム＞CSS逆引きリファレンス（目的別プロパティ辞典）

タグ一覧（ABC順）

目的別タグ一覧

スタイルシート一覧（ABC順）

目的別スタイルシート一覧

テキスト	フォント	色と背景	マージン
パディング	ボーダー	幅と高さ	配置
リスト	テーブル	内容の追加	アウトライン
印刷	カーソル	スクロールバー	グリッド
音声スタイルシート	フィルタ	レイヤー	ルビ
外部スクリプト	入力モード,ズーム	セレクタ,@ルール	疑似クラス,疑似要素

はじめに -目的別スタイルシート一覧-

スタイルシート（CSS）逆引きリファレンスとは、スタイルシートのプロパティを目的別にまとめ、あなたの目的に応じたリンクをクリックしてもらうことによってその役割を果たすタグを調べることができます。また、当サイトではIE独自のプロパティなども紹介しています。なお、アルファベット順のスタイルシートの一覧なども用意していますので合わせてご利用してくれれば幸いです！
当サイト全体からキーワードで検索したい場合は、検索窓をご利用ください。

• 行の高さを指定する…line-height
• 縦方向の位置を指定する…vertical-align
• 文字の横方向の位置を指定する…text-align
• １行目を字下げする…text-indent
• テキストの装飾（下線、上線、打ち消し線、点滅）を指定する…text-decoration
• 下線の表示位置を指定する -IE- …text-underline-position
• 文字の間隔を指定する…letter-spacing
• 単語の間隔を指定する…word-spacing
• テキストの大文字、小文字を指定する…text-transform
• スペース、改行の表示の仕方を指定する…white-space
• 文字表記の表示方向（左右）を指定する…direction
• 文字の表示方向を強制的に変える…unicode-bidi
• 日本語などの表意文字と非表意文字の間との間隔を指定する -IE- …text-autospace
• 両端揃えを指定する -IE- …text-justify
• 単語の途中での改行の仕方を指定する -IE- …word-break
• 禁則処理を行うかどうかを指定する -IE- …line-break
• 長い英単語などの途中で改行するかどうかを指定する -IE- …word-wrap
• 文字に影をつける…text-shadow

△ページトップへ

• フォントの大きさを指定する…font-size
• フォントを斜体に指定する…font-style
• 文字の太さを指定する…font-weight
• フォントの種類を指定する…font-family
• フォントに関する設定をまとめて指定する…font
• スモールキャップ（スモールキャピタル）にする…font-variant
• フォントのサイズを調整する…font-size-adjust
• フォントを縦長、横長に指定する…font-stretch

△ページトップへ

• 文字の色を指定する…color
• 背景色を指定する…background-color
• 背景画像を指定する…background-image
• 背景画像の繰り返しの仕方を指定する…background-repeat
• 背景画像の表示位置を指定する…background-position
• 背景画像の横方向の位置を指定する -IE- …background-position-x
• 背景画像の縦方向の位置を指定する -IE- …background-position-y
• 背景画像を固定する…background-attachment
• 背景に関するプロパティをまとめて指定する…background

△ページトップへ

• 要素の上側のマージンを指定する…margin-top
• 要素の下側のマージンを指定する…margin-bottom
• 要素の左側のマージンを指定する…margin-left
• 要素の右側のマージンを指定する…margin-right
• 上下左右のマージンをまとめて指定する…margin

△ページトップへ

• 要素の上側のパディングを指定する…padding-top
• 要素の下側のパディングを指定する…padding-bottom
• 要素の左側のパディングを指定する…padding-left
• 要素の右側のパディングを指定する…padding-right
• 上下左右のパディングをまとめて指定する…padding

△ページトップへ

枠線の太さ

• 上側の枠線の太さを指定する…border-top-width
• 下側の枠線の太さを指定する…border-bottom-width
• 左側の枠線の太さを指定する…border-left-width
• 右側の枠線の太さを指定する…border-right-width
• 上下左右の枠線の太さをまとめて指定する…border-width

枠線のスタイル

• 上側の枠線のスタイルを指定する…border-top-style
• 下側の枠線のスタイルを指定する…border-bottom-style
• 左側の枠線のスタイルを指定する…border-left-style
• 右側の枠線のスタイルを指定する…border-right-style
• 上下左右の枠線のスタイルをまとめて指定する…border-style

枠線の色

• 上側の枠線の色を指定する…border-top-color
• 下側の枠線の色を指定する…border-bottom-color
• 左側の枠線の色を指定する…border-left-color
• 右側の枠線の色を指定する…border-right-color
• 上下左右の枠線の色をまとめて指定する…border-color

枠線の太さ、スタイル、色まとめて指定

• 上側の枠線の太さ、スタイル、色をまとめて指定する…border-top
• 下側の枠線の太さ、スタイル、色をまとめて指定する…border-bottom
• 左側の枠線の太さ、スタイル、色をまとめて指定する…border-left
• 右側の枠線の太さ、スタイル、色をまとめて指定する…border-right
• 枠線の太さ、スタイル、色をまとめて指定する…border

△ページトップへ

• 要素の幅を指定する…width
• 要素の幅の最小値を指定する…min-width
• 要素の幅の最大値を指定する…max-width
• 要素の高さを指定する…height
• 要素の高さの最小値を指定する…min-height
• 要素の高さの最大値を指定する…max-height

△ページトップへ

• 回り込みや段組の効果を与える…float
• 回り込みを解除する…clear
• 要素の表示形式（ブロック要素・インライン要素など）を指定する…display
• 要素の配置方法を指定する…position
• 要素の上からの位置を指定する…top
• 要素の下からの配置位置を指定する…bottom
• 左からの配置位置を指定する…left
• 要素の右からの位置を指定する…right
• 内容がはみ出たときの表示方法を指定する…overflow
• 内容がはみ出たときの横方向の表示方法を指定する -IE- …overflow-x
• 内容がはみ出たときの縦方向の表示方法を指定する -IE- …overflow-y
• 要素を重ねる順番を指定する…z-index
• ボックスを切り抜いて表示する領域を指定する…clip
• 要素の表示、非表示を指定する…visibility
• 縦書きか横書きかを指定する -IE- …writing-mode

△ページトップへ

• リストの記号の画像を指定する…list-style-image
• リストの記号の位置を指定する…list-style-position
• リストの記号を指定する…list-style-type
• リストのプロパティをまとめて指定する…list-style
• リストの記号と要素の間隔を指定する…marker-offset

△ページトップへ

• 表の表示方法を指定する…table-layout
• 表やセルの枠線の表示の仕方を指定する…border-collapse
• セルとセルの間隔を指定する…border-spacing
• 空白セルの枠線の表示、非表示を指定する…empty-cells
• 表のキャプション（表題）の位置を指定する…caption-side

△ページトップへ

• 内容（文字や画像）を挿入する…content
• 要素の前後の引用符を指定する…quotes
• カウンタ（連続した番号）を設定する…counter-increment
• カウンターをリセットする…counter-reset

△ページトップへ

• アウトライン（輪郭線）の太さを指定する…outline-width
• アウトライン（輪郭線）のスタイルを指定する…outline-style
• アウトライン（輪郭線）の色を指定する…outline-color
• アウトライン（輪郭線）の太さ、スタイル、色を指定する…outline

△ページトップへ

• 要素の前で改ページする…page-break-after
• 要素の後で改ページする…page-break-before
• 要素内での改ページを制御する…page-break-inside
• 改ページ前に最低限残す行数を指定して改ページを制御する…orphans
• 改ページ後に最低限残す行数を指定して改ページを制御する…widows
• 用紙サイズと方向を指定する…size
• 用紙設定を指定する…page
• 用紙の余白にトンボを印刷するかどうかを指定する…marks

△ページトップへ

• カーソルの形を指定する…cursor

△ページトップへ

スクロールバーの全体の色

• スクロールバーの全体の基本色を指定する -IE- …scrollbar-base-color

スクロールバーの色を個別に指定

• スクロールバーの１番明るいの色を指定する -IE- …scrollbar-highlight-color
• スクロールバーの左端と上端の色（２番目に明るい色）を指定する -IE- …scrollbar-3dlight-color
• スクロールバーの右端と下端（１番暗い色）の色を指定する -IE- …scrollbar-darkshadow-color
• スクロールバーの影の色（２番目に暗い色）を指定する -IE- …scrollbar-shadow-color
• スクロールバーの矢印の色を指定する -IE- …scrollbar-arrow-color
• スクロールバーの表面の色を指定する -IE- …scrollbar-face-color
• スクロールバーがスライドする底の部分の色を指定する -IE- …scrollbar-track-color

△ページトップへ

• 文字グリッドの幅を指定する -IE- …layout-grid-char
• 行グリッドの高さの高さを指定する -IE- …layout-grid-line
• 行グリッド、文字グリッドの有効、無効を指定する -IE- …layout-grid-mode
• 文字グリッドの表示方法を指定する -IE- …layout-grid-type
• グリッドの幅、高さ、それらの有効、無効の指定をまとめて行う -IE- …layout-grid

△ページトップへ

• 読み上げる音量を指定する（音声スタイルシート）…volume
• 要素の読み方を指定する（音声スタイルシート）…speak
• 要素を読む前の休止時間、箇所を指定する（音声スタイルシート）…pause-before
• 要素を読んだ後の休止時間、箇所を指定する（音声スタイルシート）…pause-after
• 要素の読み上げ休止に関する指定をまとめて行う（音声スタイルシート）…pause
• 要素を読む前の鳴らす音を指定する（音声スタイルシート）…cue-before
• 要素を読んだ後の鳴らす音を指定する（音声スタイルシート）…cue-after
• 要素を読む前と後の鳴らす音をまとめて指定する（音声スタイルシート）…cue
• 要素を読み上げている際に鳴らす音を指定する（音声スタイルシート）…play-during
• 音声が聞こえてくる上下の角度を指定（音声スタイルシート）…elevation
• 音声が聞こえてくる左右の角度を指定（音声スタイルシート）…azimuth
• 読見上げ速度を指定する（音声スタイルシート）…speech-rate
• 読み上げの声の種類を指定する（音声スタイルシート）…voice-family
• 読み上げる声の高さを指定する（音声スタイルシート）…pitch
• 読み上げる声の高さの変化の幅を指定する（音声スタイルシート）…pitch-range
• アクセントの強さを指定する（音声スタイルシート）…stress
• 声の明瞭さを指定する（音声スタイルシート）…richness
• 句読点や記号を読むかどうかを指定する（音声スタイルシート）…speak-punctuation
• 数字の読み方を指定する（音声スタイルシート）…speak-numeral
• 表の読み上げ方を指定する（音声スタイルシート）…speak-header

△ページトップへ

• 画像やテキストにフィルタの効果を与える -IE- …filter
• 半透明にする -IE- …filter: alpha();
• 特定の色を透明にする -IE- …filter: chroma();
• 柔らかい影を描く -IE- …filter: shadow();
• シャープな影を描く -IE- …filter: dropshadow();
• ブレさせる -IE- …filter: blur();
• 発光させる -IE- …filter: glow();
• 左右を反転させる -IE- …filter: fliph();
• 上下を反転させる -IE- …filter: flipv();
• グレースケール化させる -IE- …filter: gray();
• 色を反転させる -IE- …filter: invert();
• マスクをかける -IE- …filter: mask();
• 波打たせる -IE- …filter: wave();
• X線写真の効果を与える -IE- …filter: xray();

△ページトップへ

• レイヤーの背景色を指定する -NN- …layer-background-color
• レイヤーの背景画像を指定する -NN- …layer-background-image
• 他のHTML文書をレイヤー表示する -NN- …include-source

△ページトップへ

• ルビの行揃え位置を指定する -IE- …ruby-align
• ルビの表示領域を指定する -IE- …ruby-overhang
• ルビの表示位置を指定する -IE- …ruby-position

△ページトップへ

• 外部スクリプトを適用する -IE- …behavior

△ページトップへ

• 入力フォームなどにフォーカスが移動したときの日本語変換（IME）の動作を指定する -IE- …ime-mode
• 拡大・縮小表示する -IE- …zoom

△ページトップへ

セレクタ

• セレクタに１つのHTMLの要素を記述しデザインを加える…要素名 { 〜プロパティ〜 }
• セレクタに複数のHTMLの要素を記述しデザインを加える…要素名,要素名 { 〜プロパティ〜 }
• そのクラス名を持つ要素にだけデザインを加える…要素名.クラス名 { 〜プロパティ〜 }
• そのID名を持つ要素にだけデザインを加える…要素名#ID名 { 〜プロパティ〜 }
• そのクラス名を持つすべての要素にだけデザインを加える….クラス名 { 〜プロパティ〜 }
• その親要素に含まれるその子孫要素にだけデザインを加える…親要素名 子要素名 { 〜プロパティ〜 }
• ある要素がある要素の直接の子要素にだけデザインを加える…親要素名>子要素名 { 〜プロパティ〜 }
• 要素名１と要素名２が並んでいる場合、要素名２にのみデザインを加える…要素名１+要素名２ { 〜プロパティ〜 }
• その要素名にその属性名が付いている要素にだけデザインを加える…要素名[属性名] { 〜プロパティ〜 }
• その要素名にその属性名、その値が付いている要素にだけデザインを加える…要素名[属性名="値"] { 〜プロパティ〜 }
• その要素に半角空白で区切られた属性の値があるときにだけデザインを加える…要素名[属性名~="値"] { 〜プロパティ〜 }
• その要素にハイフン「 - 」で区切られた属性の値があるときにだけデザインを加える…要素名[属性名|="値"] { 〜プロパティ〜 }
• すべての要素に対してデザインを加える…* { 〜プロパティ〜 }

@ルール

• CSS内に外部CSSファイルを読み込む… @import
• 外部CSSファイル内の文字コードを指定します… @charset
• 特定のメディア別に異なるスタイルを適用できます… @media
• 印刷したときのページボックスのマージンなど、ページ設定を行う指定です… @font-face
• ウェブフォントに関する設定を行います。… @page

△ページトップへ

疑似クラス

• 未訪問のリンクにデザインを加える…link疑似クラス
• 訪問済みのリンクにデザインを加える…visited疑似クラス
• 要素の上にマウスポインタを合わせたとき、リンクのデザインを加える…hover疑似クラス
• 要素がアクティブになったとき、リンクにデザインを加える…active疑似クラス
• 入力欄などの要素にフォーカスがあったときとき、デザインを加える…focus疑似クラス
• ある要素が他の要素のはじめの子要素になっているときデザインを加える…first-child疑似クラス
• 要素が何語で記述されているかによってデザインを加える…lang疑似クラス

疑似要素

• 要素の１文字目にデザインを加える…first-letter疑似要素
• 要素の１行目の行にデザインを加える…first-line疑似要素
• 要素の前に文字や画像を追加します…before疑似要素
• 要素の前後に文字や画像を追加します…after疑似要素

△ページトップへ

<TOP>