CSSおぼえがき

HTMLCSSJavaScript/HTMLJavaScript/HTML5サイトマップホーム


書き方を忘れた場合にご活用ください。詳細は記述しておりません。CSSの一般的な指定を掲載しております。参考で、下記のツールも参照してください。
1.スタイルシート確認ツール、2.文字サイズ・行間 確認ツール、3.色生成ツール、4.テーブル設定ツール(HTML5)、5.画像・バーナーサイズ確認用ツール

No. 分類 スタイル 説明 使用例・ほか
1 文字色・背景

 (参考
color 文字色(前景色)を指定する
background 背景に関する指定をまとめて行う
background-color 背景色を指定する
background-image 背景画像を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像のリピートの仕方を指定する
2 フォント

 (参考
font フォントに関する指定をまとめて行う
font-style フォントをイタリック体・斜体にする
font-variant フォントをスモールキャップにする
font-weight フォントの太さを指定する
font-size フォントのサイズを指定する
font-family フォントの種類を指定する
font-size-adjust フォントのサイズを調整する
font-stretch フォントを縦長・横長にする
3 テキスト

 (参考
line-height 行の高さを指定する
text-align 行揃えの位置・均等割付を指定する
vertical-align 縦方向の揃え位置を指定する
text-decoration テキストの下線・上線・打ち消し線・点滅を指定する
text-indent 一行目のインデント幅を指定する
text-transform テキストの大文字表示・小文字表示を指定する
white-space ソース中のスペース・タブ・改行の表示の仕方を指定する
letter-spacing 文字の間隔を指定する
word-spacing 単語の間隔を指定する
text-shadow テキストに影をつける
4 マージン

 (参考
margin マージンに関する指定をまとめて行う
margin-top 上マージンを指定する
margin-bottom 下マージンを指定する
margin-left 左マージンを指定する
margin-right 右マージンを指定する
5 パディング

 (参考
padding パディングに関する指定をまとめて行う
padding-top 上パディングを指定する
padding-bottom 下パディングを指定する
padding-left 左パディングを指定する
padding-right 右パディングを指定する
6 ボーダー

 (参考
border ボーダーのスタイル・太さ・色を指定する border: 10px solid #993333;
border-color ボーダーの色を指定する
border-style ボーダーのスタイルを指定する
border-width ボーダーの太さを指定する
border-top 上ボーダーのスタイル・太さ・色を指定する
border-top-color 上ボーダーの色を指定する
border-top-style 上ボーダーのスタイルを指定する
border-top-width 上ボーダーの太さを指定する
border-bottom 下ボーダーのスタイル・太さ・色を指定する
border-bottom-color 下ボーダーの色を指定する
border-bottom-style 下ボーダーのスタイルを指定する
border-bottom-width 下ボーダーの太さを指定する
border-left 左ボーダーのスタイル・太さ・色を指定する
border-left-color 左ボーダーの色を指定する
border-left-style 左ボーダーのスタイルを指定する
border-left-width 左ボーダーの太さを指定する
border-right 右ボーダーのスタイル・太さ・色を指定する
border-right-color 右ボーダーの色を指定する
border-right-style 右ボーダーのスタイルを指定する
border-right-width 右ボーダーの太さを指定する
7 幅・高さ width 幅を指定する
max-width 幅の最大値を指定する
min-width 幅の最小値を指定する
height 高さを指定する
max-height 高さの最大値を指定する
min-height 高さの最小値を指定する
8 表示・配置 overflow はみ出た内容の表示方法を指定する
position ボックスの配置方法(基準位置)を指定する
top 上からの配置位置(距離)を指定する
bottom 下からの配置位置(距離)を指定する
left 左からの配置位置(距離)を指定する
right 右からの配置位置(距離)を指定する
display 要素の表示形式(ブロック・インライン)を指定する
float 左または右に寄せて配置する float:right/left/clear;
clear 回り込みを解除する
9 テーブル

 (参考
テーブル設定ツール参照
table-layout テーブル(表)の表示方法を指定する
caption-side テーブル(表)のキャプションの位置を指定する
border-collapse セルのボーダーの表示の仕方を指定する
border-spacing セルのボーダーの間隔を指定する
empty-cells 空白セルのボーダーの表示・非表示を指定する
10 リスト list-style マーカーに関する指定をまとめて行う
list-style-image マーカー画像を指定する
list-style-type マーカー文字の種類を指定する
list-style-position マーカーの表示位置を指定する
marker-offset マーカーとの間隔を指定する
11 セレクタ 要素型セレクタ(タイプセレクタ) 特定の要素にスタイルを適用する 要素名 {color:blue;}
全称セレクタ(ユニバーサルセレクタ) すべての要素にスタイルを適用する * {color:blue;}
classセレクタ(クラスセレクタ) 特定のclass名がつけられた要素にスタイルを適用する .クラス名 {color:blue; font-size:small;}
idセレクタ 特定のid名がつけられた要素にスタイルを適用する #id名 {background-color:#66cc33;}
:link擬似クラス 未訪問のリンクにスタイルを適用する a:link {color: #0000FF;}
:visited擬似クラス 訪問済のリンクにスタイルを適用する a:visited {color: #0000FF;}
:hover擬似クラス カーソルが乗っている要素にスタイルを適用する a:active {color: #0000FF;}
:active擬似クラス クリック中の要素にスタイルを適用する a:hover { background-color:#ff8080; }
:focus擬似クラス フォーカスされた要素にスタイルを適用する
:lang擬似クラス 特定の言語を指定された要素にスタイルを適用する
複数のセレクタ 複数のセレクタに同じスタイルを適用する h2, p {color:blue;}
子孫セレクタ 子孫要素にスタイルを適用する p span {color:#ffffff;}
12 コメント /*コメント*/ CSSソース中にコメントを入れる

※指定値(一つの場合):上側の値、右側の値、下側の値、左側の値
 指定値1 指定値2(二つの場合):上側の値1、右側の値2、下側の値1、左側の値2
 指定値1 指定値2 指定値3 指定値4(四つの場合):上側の値1、右側の値2、下側の値3、左側の値4

HTMLCSSJavaScript/HTMLJavaScript/HTML5サイトマップホーム