| 設定項目 | 属性 | 値等 | 解説 |
| 全体 | background | #FFFFFF等 | 背景指定 |
| background-color | #FFFFFF等 | 背景色指定 | |
| background-image | url(画像ファイル) | 背景画像指定。css3からはlinear-gradientを使うことでグラデーションも可能。 | |
| background-attachment | fixed,scroll | 背景画像を固定するか、スクロールに追随させるか | |
| outline | outline: dotted(形式) px数 色指定(#xxx);等 | アウトラインを表示する | |
| opacity(css3) | 0.5等 | 透明度指定 | |
| box-shadow(css3) | px等 | ボックスに影をつける | |
| resize(css3) | none,both,horizonal,vertical等 | リサイズ可能にする | |
| content | url("xxx.png");等 | 指定した要素の前後に画像やテキスト等の追加ができる | |
| cursor | pointer等 | カーソルの形状を指定する | |
| pointer-events(css3) | none,auto等 | 要素をポイントした時の動作を指定する。リンク等を無効化できる | |
| shape-inside(css3) | rectangle(0, 0, 100%, 100%, 50%, 50%)等 | 指定した形に文章を流し込む | |
| mix-blend-mode(css3) | mix-blend-mode: soft-light; | 要素に対して、指定したブレンドモード(要素を重ね合わせた時の色の融合方式)を適用する。 | |
| 文章 | column-count(css3) | 3等 | 文章をカラム構成にする |
| column-width(css3) | 100px等 | カラムの幅を指定 | |
| column-gap(css3) | 100px等 | カラム間隔を指定 | |
| column-rule(css3) | 10px solid red等 | カラムの区切り線を指定 | |
| テーブル系 | border-spacing | 10px等 | セルのボーダーのスタイルを指定 |
| 行等 | line-height | 0em等 | 行の高さを指定 |
| word-spacing | 0px.ex等 | 単語の間隔を指定 | |
| letter-spacing | 0px,ex等 | 文字の間隔を指定 | |
| vertical-align | top,middle,bottom,text-top,text-bottom,super,sub | 画像等との揃え位置決定 | |
| list-style-type | <ul>タグ等のリスト表示のスタイルを変える。 | ||
| フォント | font | 下のような属性のものを一度に設定 | captionやicon等、システムフォントも使うことが出来る |
| font-size | 0em,xp等,small,medium,large,larger | フォントサイズの指定 | |
| font-family | serif,sans-serif,cursive,fantasy,monospace | フォント種類の指定 fontfamily{種類,種類,総称}で指定。 http://w3g.jp/sample/css/font-familyを参考にスタイルを決定しよう。 | |
| font-style | normal,italic,oblique | イタリックや斜体(oblique)指定 | |
| font-variant | normal,small-caps | small-capsは小文字サイズの大文字 | |
| font-weight | normal,bold,bolder,lighter | フォントの太さの指定 | |
| color | #FFFFFF等 | 色の指定。font-colorでないことに注意。 | |
| テキスト | text-align | right,left,center,justify | テキストの行揃えの位置指定 |
| text-transform | uppercase,capitalize,lowercase | 大文字小文字の指定 | |
| text-decoration | none,underline,line-through,overline,blink | 下線等のテキスト装飾指定 | |
| text-indent | 0px,ex等 | 段落等のインデント幅を指定 | |
| text-shadow(css3) | px等 | テキストに影をつける | |
| 画像構成 | margin | 0px,ex等 | マージン幅(領域外の間隔)を決める。 margin-left:0%から-100%等に変更することで擬似的にスライドしているように見せるテクニックもある。 |
| padding | 0px等、個数により指定変化 | 領域内の間隔を決定する | |
| width | 0px,%等 | 幅の指定 | |
| height | 0px,%等 | 高さの指定 | |
| border | 0px等 | ボーダーの指定。border-radius(css3)は角丸を指定できる。 | |
| position | static,relative,absolute,fixed | 配置方法の指定。 | |
| z-index | 数値 | 対象のレイヤを決めるのに使う。z-indexを使うにはposition:static以外の指定が必要。 | |
| float | none,left,right | 要素を寄せる位置を決める[leftと指定した場合には自分を左に押し込み、次要素を右に回り込ませる。]。 | |
| clear | none,left,right,both | 回り込み等の解除 | |
| display | none,block,inline,table,table-cell,box(css3),flex(css3) | 表示形式の指定 | |
| overflow | visible,scroll,hidden,auto | はみ出た場合に、スクロールバーを表示するかどうかとか | |
| visibility | visible,hidden,collapse | 表示・非表示の切替 | |
| margin | px等 | 背景＋中身の文字[その要素の周りの余白の調整を行う。2つなら、上下、左右。3つなら、上、左右、下。4つなら上、右、下、左。] | |
| padding | px等 | 中身の文字[その要素の中身の余白の調整を行う。] | |
| アニメーション | animation(css3) | animation名,animationの長さ(s),animationの進行具合, animationの遅延開始時間(s),animationの繰り返し回数,再生の繰り返し方向 |
アニメーションの設定をする。アニメーション終了時の状態を遷移前もしくは遷移後を維持するかは、animation-fill-mode(参考サイト)を使って指定してみよう！ |
| transition(css3) | transition-property,transition-duration, transition-timing-function,transition-delay |
hover等で切り替わる際の設定を行う。transition-duration等で変化にかかる時間等も設定できる | |
| transform(css3) | matrix,matrix-3d,translate,scale,rotate等 | 要素を変形する | |
| checked,selected,hover focus,active,disabled target,visited,link,empty(css3) |
ボタンがチェックされた時のスタイルを指定することで、表示が切り替わっているように見える。 |
