１）CSSの記述【文字】
| color | 文字色（前景色）を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| color:#666666; color:rgba(0,0,255,0.5); | 「#000000」16進法の文字列 カラーネーム rgbaの記述等 | 文字色の指定 |
| opacity | 要素の透明度を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| opacity:0.7; | 0.0（完全に透明） ～1.0（完全に不透明）の範囲で指定 （初期値は1） | 要素の透明度を指定 |
| text-align | ブロックコンテナ内の行の揃え位置・均等割付を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| text-align:center; | left right center | ブロックコンテナ内の行の揃え位置 |
| text-decoration | テキストの線・色・スタイルをまとめて指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| text-decoration:none; | none（無し） underline（下線） | テキスト傍線のつけ方 |
| text-shadow | テキストに影をつける |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| text-shadow: 5px 5px 2px #333333; | 初期値は「none」スペース区切りで「水平方向の距離」 「垂直方向の距離」 「影のぼかし半径」 「影の色」を指定 「,」区切りで複数可 | テキストに影をつける |
| font-family | フォントの種類 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| font-family: “Hiragino Sans W3”, “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN W3”, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif; | フォント名で指定 キーワードで指定 | フォントの種類を指定 |
| font-size | フォントサイズ |
|---|
| 述例 | 値 | 意味 |
|---|---|---|
| font-size: 80%; | 数値で指定 ％で指定 キーワードで指定 | フォントのサイズを指定 |
| font-weight | 文字列の太さ |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| font-weight:bold; | 数値で指定 「normal」標準の太さ 「bold」一般的な太字の太さ ※｢bold｣のみで事足りることが多い | フォントの太さを指定 |
| font-style | 文字列の斜体 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| font-style:italic; | normal italic oblique ※多くの場合イタリック体（italic）と斜体（oblique）のブラウザ上の表示は同じ | フォントのスタイルを指定 |
| line-height | 行間隔 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| line-height:1.6; | normal 数値にpxやemやexなどの単位 単位をつけずに数値のみを指定 ％値で指定 | 行の高さを指定 |
| white-space | ソース中のホワイトスペース・改行の表示方法 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| white-space:pre; | 「pre」そのまま表示 「nowrap」自動改行しない | 改行の表示方法を指定 |
| font | font-style font-weight font-size line-height font-family フォントのプロパティを一括で指定※font-sizeとfont-familyの値は省略できない※font-styleとfont-weightの値の順番は入れ替わっても良い※line-heightの値の前には「/（スラッシュ）」を入れる |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| font:”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,sans-serif 80% bold italic/1.6; | ※font-sizeとfont-familyの値は省略できない※font-styleとfont-weightの値の順番は入れ替わっても良い※line-heightの値の前には「/（スラッシュ）」を入れる | フォントのプロパティを一括で指定 |
２）CSSの記述【背景】
| background-color | 背景色を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-color:#333333; | 「#000000」16進法の文字列 カラーネーム rgbaの記述等 | 背景色の指定 |
| background-attachment | 背景画像の固定・移動を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-attachment: fixed; | 「fixed」背景画像の位置が固定 「scroll」背景画像も移動 | スクロールに伴って移動するかどうかを指定 |
| background-image | 背景画像を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-image:url(“images/sample_img001.jpg”); | url(“”);で画像を指定 初期値はurl(“none”); | 背景画像の指定 |
| background-repeat | 背景イメージの繰り返し方法を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-repeat:no-repeat; | 「repeat」繰り返して表示：初期値 「repeat-x」横方向にのみ背景画像を繰り返し 「repeat-y」縦方向にのみ背景画像を繰り返し 「no-repeat」一回だけ表示 | 背景画像を繰り返しを指定 |
| background-position | 背景イメージの位置を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-position:top left; | 置を表すキーワードで指定「left,center,right」「top,center,bottom」 %値で指定 数値で指定 | 背景画像の表示開始位置を%値や数値で指定 |
| background | background-color background-attachment background-image background-repeat background-position 背景のプロパティを一括で指定※順番の指定はなし |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background:#fff url(“images/sample_img001.jpg”) no-repeat top left fixed; | ※順番の指定はなし | 背景のプロパティを一括で指定 |
| background-size | 背景画像のサイズを指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| background-size:400px; | px,%の数値 | 背景画像のサイズを指定（数値） |
| background-size:cover; | 「auto」自動的に算出（初期値） 「contain」縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する 「cover」縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する | 背景画像のサイズを指定する際に使用 キーワード |
３）CSSの記述【リスト】
～よく使うのは「list-style:none;」の指定が多い～
| list-style-type | 行頭記号または行頭番号の種類を指定 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| list-style-type:none; | 「none」マーカーなし 「disc」黒丸 「circle」白丸 「square」黒四角 「lower-roman」小文字のローマ数字 「upper-roman」大文字のローマ数字 「decimal」算用数字 など | マーカー文字の種類を指定 |
| st-style | list-style-type list-style-image list-style-position リストのプロパティを一括指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| list-style:none; | list-style-type list-style-image list-style-position | リストのプロパティを一括指定する |
※あまり使用しない
| list-style-image | 行頭記号または行頭番をイメージにする |
|---|---|
| list-style-position | 行頭記号または行頭番号の位置を指定 |
４）CSSの記述【疑似クラス・疑似要素】
| 要素名:link | 未訪問のリンク |
|---|---|
| 要素名:visited | 訪問済のリンク |
| 要素名:hover | カーソルが乗っている要素 |
| 要素名:active | クリック中の要素 |
| 要素名:nth-child(n) | n番目の子となる要素 |
| 要素名:nth-last-child(n) | 後ろから数えてn番目の子となる要素 |
| 要素名:nth-of-type(n) | n番目のの要素 |
| 要素名:nth-last-of-type(n) | 後ろから数えてn番目の要素 |
| 要素名:before | 要素の直前 |
|---|---|
| 要素名:after | 要素の直後 |
５）CSSの記述【配置】
| width | 内容の幅 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| width:90%; | 「auto」初期値 「px,%,me」などの数値で指定 | 内容の幅 |
| max-width | 幅の最大値を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| max-width:400%; | 「auto」初期値 「px,%,me」などの数値で指定 | 幅の最大値を指定する |
| min-width | 幅の最小値を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| min-width:400%; | 「auto」初期値 「px,%,me」などの数値で指定 | 幅の最小値を指定する |
| height | 内容の高さ |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| height:90%; | 「auto」初期値 「px,%,me」などの数値で指定 | 内容の高さ |
| max-height | 高さの最大値を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| max-height:400%; | 「auto」初期値 「px,%,me」などの数値で指定 | 高さの最大値を指定する |
| min-height | 高さの最小値を指定するさ |
|---|
| min-height:400%; | 「auto」初期値 「px,%,me」などの数値で指定 | 高さの最小値を指定する |
| float | 回り込み |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| float:left; | left | 指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。 |
| float:right; | right | 指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。 |
| float:none; | none | 特に配置を指定しません。これが初期値です。 |
| clear | 回り込みを解除 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| clear:both; | left right both none | 回り込みを解除 ※「clear:both;」を覚えときましょう。 |
| position top left bottom right z-index | 要素の配置方法 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| position:static; | static | この値のときには、top、bottom、left、rightは適用されません。初期値 |
| position:relative; | relative | 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 |
| position:absolute; | absolute | 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 |
| position:fixed; | fixed | 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。 |
| top:0; left:5px; bottom:5%; right:auto; | 「auto」 「auto」初期値 「px,%,me」などの数値で指定 | positionプロパティを併用して、配置方法（基準位置）を設定 |
| z-index:999; | 整数値で指定（数値が多きほど上） 「auto」初期値 | z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 |
| display | 要素の表示形式 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| display:block; | block | p、div、ul、h1～h6などのタグの初期値 |
| display:inline; | inline | a、span、omgなどのタグの初期値 |
| display:inline-block; | inline-block | 並びはinline、中身はblock |
| display:none; | none | 非表示 |
| display:flex; | flex | ブロックレベルのフレックスコンテナボックスを生成する |
| overflow | ボックスからあふれた内容の処理 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| overflow:visible; | 「visible」初期値 | 内容がボックスに収まらない場合、ボックスからはみ出して表示される |
| overflow:hidden; | 「hidden」 | 収まらない部分は非表示 スクロールバーなどは表示されない ※clearfixと同じ効果として扱われる場合がある |
| overflow:scroll; | 「scroll」 | 収まらない部分はボックスからはみ出さない。内容が収まらない場合には、スクロールバーなどが表示される |
６）CSSの記述【ボックス】
| border-style | 枠線のスタイル |
|---|---|
| border-color | 枠線の色 |
| border-width | 枠線の太さを指定する |
| border-top | 枠線(上)のプロパティを一括 |
| border-right | 枠線(右)のプロパティを一括 |
| border-bottom | 枠線(下)のプロパティを一括 |
| border-left | 枠線(左)のプロパティを一括 |
| border | border-style border-color border-width フォントのプロパティを一括で指定※順番の指定はなし |
| 記述例 | 値 | 意味 |
|---|---|---|
| border:solid 1px #ccc; | 半角区切りで 「枠線のスタイル」 「太さ（px,%）」 色（各指定方法） | 上下左右まとめて境界線の指定 |
| border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; | 「none」なし 「solid」実線 「dashed」2本線 「dotted」点線 | 上下左右それぞれの境界線の指定 |
パディング
| padding-top | 上パディング |
|---|---|
| padding-bottom | 下パディング |
| padding-left | 左パディング |
| padding-right | 右パディング |
| padding | padding-top padding-bottom padding-left padding-right 指定をまとめて行う |
| 記述例 | 値 | 意味 |
|---|---|---|
| padding:5%; | 1つ「上右下左」一括指定 | パディングの設定 |
| padding:5% 10%; | 2つ「上下 右左」の指定 | パディングの設定 |
| padding:5% 10% 15%; | 3つ「上 右左 下」の指定 | パディングの設定 |
| padding:5% 10% 15% 20%; | 4つ「上 右 下 左」の指定 | パディングの設定 |
| padding-top:5%; padding-bottom:5%; padding-left:5%; padding-right:5%; | 「上右下左」それぞれの指定 | パディングの設定 |
| margin-top | 上マージンを指定する |
|---|---|
| margin-bottom | 下マージンを指定する |
| margin-left | 左マージンを指定する |
| margin-right | 右マージンを指定する |
| margin | margin-top margin-bottom margin-left margin-right マージンに関する指定をまとめて行う |
| 記述例 | 値 | 意味 |
|---|---|---|
| margin:5%; | 1つ「上右下左」一括指定 | マージンの設定 |
| margin:5% 10%; | 2つ「上下 右左」の指定 | マージンの設定 |
| margin:5% 10% 15%; | 3つ「上 右左 下」の指定 | マージンの設定 |
| margin:5% 10% 15% 20%; | 4つ「上 右 下 左」の指定 | マージンの設定 |
| margin-top:5%; margin-bottom:5%; margin-left:5%; margin-right:5%; | 「上右下左」それぞれの指定 | マージンの設定 ※マイナスの値が可能 ※「margin-top」はややこしい |
| border-radius | 角丸をまとめて指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; | 最大はこの指定 | 角丸それぞれの指定 |
| border-radius:50%; | %での指定（楕円形になる） | 角丸一括指定 |
| border-radius:10px; | pxでの指定（簡単な角丸） | 角丸一括指定 |
| box-shadow | ボックスに影をつける |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| box-shadow: 5px 5px 5px #ccc; | 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 | ボックスに1つまたは複数の影をつける |
| 複雑なCSSはジェネレータで CSS3 box-shadowとborder-radiusジェネレーター – bad-company | ||
| box-sizing | ボックスサイズの算出方法を指定する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| box-sizing:border-box; | 「content-box」パディングとボーダーを幅と高さに含めない（初期値） 「border-box」パディングとボーダーを幅と高さに含める | ボックスサイズの算出方法を指定 |
| ボックスモデルの設定に悩んだらコレ！ | ||
| content | 内容（コンテンツ）を挿入する |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| content:””; | 「””」に挿入したい内容を入れる | 内容（コンテンツ）を挿入する |
| 疑似要素「要素名:before」「要素名:after」と合わせて使うことが多い | ||
７）CSSの記述【表】
| border-collapse | セルのボーダーの表示の仕方 |
|---|
| 記述例 | 値 | 意味 |
|---|---|---|
| border-collapse:collapse; | 「collapse」隣接するセルのボーダーを重ねて表示 「separate」隣接するセルのボーダーを間隔をあけて表示 | 隣接するセルのボーダーを重ねを指定 |
コメント