【初心者向け】CSS でよく使う項目をリファレンス
「CSSでよく使う項目を一覧で見れるようにしておきたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- CSSでよく使う項目一覧がわかる
また本記事では、「初心者」を想定しているので必要以上に細かい項目は敢えて割愛します。初心者の頃に細かすぎる内容を見ても理解できないですし、消化しきれないためです。
是非本記事をお読みいただき、理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSリファレンス一覧
色に関するリファレンス
まずは主な色設定に関するリファレンスです。
| プロパティ | 説明 |
| color | テキストの色を設定する |
| opacity | 要素の不透明度を設定する |
背景に関するリファレンス
| プロパティ | 説明 |
| background | 背景に関して設定する |
| background-attachment | 背景画像の固定・移動を設定する |
| background-color | 背景色を設定する |
| background-image | 背景画像を設定する |
| background-position | 背景画像の表示開始位置を設定する |
| background-position-x | 背景画像の横位置を設定する |
| background-position-y | 背景画像の縦位置を設定する |
| background-blend-mode | 各背景レイヤ（カラー/画像）の描画モードを設定する |
| background-repeat | 背景画像の繰返し方法を設定する |
| background-clip | 背景の描画エリアを設定する |
| background-origin | 背景画像をどこに配置するかを設定する |
| background-size | 背景画像のサイズを設定する |
フォントに関するリファレンス
| プロパティ | 説明 |
| font | フォントに関する設定を行う |
| font-style | フォントをイタリック体・斜体にする |
| font-variant | フォントをスモールキャップにする |
| font-weight | フォントの太さを指定する |
| font-size | フォントのサイズを指定する |
| font-family | フォントの種類を指定する |
| font-size-adjust | フォントのサイズを調整する |
| font-stretch | フォントを縦長・横長にする |
| font-kerning | カーニング情報（字間値）の利用を制御する |
テキストに関するリファレンス
| プロパティ | 説明 |
| line-height | 行の高さを設定する |
| text-align | 行の揃え位置・均等割付を設定する |
| text-justify | 均等割付の形式を設定する |
| vertical-align | 縦方向の揃え位置を設定する |
| text-decoration | テキストの線・色・スタイルをまとめて設定する |
| text-underline-position | 下線の表示位置を設定する |
| text-indent | 一行目のインデント幅を設定する |
| text-transform | 大文字・小文字・全角文字への変換を設定する |
| letter-spacing | 文字の間隔を設定する |
| word-spacing | 単語の間隔を設定する |
| text-autospace | アルファベット等との間隔を設定する |
| word-break | 文の改行の仕方について設定する |
| word-wrap | 長い非改行の単語を改行して次の行に回り込むことを可能にする |
幅・高さに関するリファレンス
| プロパティ | 説明 |
| width | 幅を設定する |
| max-width | 幅の最大値を設定する |
| min-width | 幅の最小値を設定する |
| height | 高さを設定する |
| max-height | 高さの最大値を設定する |
| min-height | 高さの最小値を設定する |
マージンに関するリファレンス
| プロパティ | 説明 |
| margin | マージンに関する指定をまとめて設定する |
| margin-top | 上マージンを設定する |
| margin-right | 右マージンを設定する |
| margin-bottom | 下マージンを設定する |
| margin-left | 左マージンを設定する |
パディングに関するリファレンス
| プロパティ | 説明 |
| padding | パディングに関する指定をまとめて設定する |
| padding-top | 上パディングを設定する |
| padding-right | 右パディングを設定する |
| padding-bottom | 下パディングを設定する |
| padding-left | 左パディングを設定する |
ボーダーに関するリファレンス
| プロパティ | 説明 |
| border | ボーダーのスタイル・太さ・色を設定する |
| border-top | 上ボーダーのスタイル・太さ・色を設定する |
| border-right | 右ボーダーのスタイル・太さ・色を設定する |
| border-bottom | 下ボーダーのスタイル・太さ・色を設定する |
| border-left | 左ボーダーのスタイル・太さ・色を設定する |
| border-width | ボーダーの太さを設定する |
| border-top-width | 上ボーダーの太さを設定する |
| border-right-width | 右ボーダーの太さを設定する |
| border-bottom-width | 下ボーダーの太さを設定する |
| border-left-width | 左ボーダーの太さを設定する |
| border-style | ボーダーのスタイルを設定する |
| border-top-style | 上ボーダーのスタイルを設定する |
| border-right-style | 右ボーダーのスタイルを設定する |
| border-bottom-style | 下ボーダーのスタイルを設定する |
| border-left-style | 左ボーダーのスタイルを設定する |
| border-color | ボーダーの色を設定する |
| border-top-color | 上ボーダーの色を設定する |
| border-right-color | 右ボーダーの色を設定する |
| border-bottom-color | 下ボーダーの色を設定する |
| border-left-color | 左ボーダーの色を設定する |
表示に関するリファレンス
| プロパティ | 説明 |
| float | 右または左に寄せて配置する |
| clear | 回り込みを解除する |
| overflow | はみ出た要素の表示方法を設定する |
| overflow-x | はみ出た要素の左右の表示方法を設定する |
| overflow-y | はみ出た要素の上下の表示方法を設定する |
| text-overflow | はみ出た文字を非表示にする際に、非表示にしたことを示す文字列を設定する |
| visibility | ボックスの表示・非表示を設定する |
| display | 要素の表示形式を設定する |
配置に関するリファレンス
| プロパティ | 説明 |
| position | ボックスの配置方法（基準位置）を設定する |
| top | 上からの配置位置（距離）を設定する |
| right | 右からの配置位置（距離）を設定する |
| bottom | 下からの配置位置（距離）を設定する |
| left | 左からの配置位置（距離）を設定する |
| z-index | 重なりの順序を設定する |
テーブルに関するリファレンス
| プロパティ | 説明 |
| caption-side | テーブル（表）のキャプションの位置を設定する |
| table-layout | テーブル（表）の表示方法を設定する |
| border-collapse | セルのボーダーの表示の仕方を設定する |
| border-spacing | セルのボーダーの間隔を設定する |
| empty-cells | 空白セルのボーダーの表示・非表示を設定する |
ルビに関するリファレンス
| プロパティ | 説明 |
| ruby-align | ルビの行揃え位置を設定する |
| ruby-overhang | ルビの表示領域を設定する |
| ruby-position | ルビの表示位置を設定する |
改ページ・改カラムに関するリファレンス
| プロパティ | 説明 |
| break-before | 印刷時の改ページに加え、columns によるマルチカラムにおける改カラムを制御する |
| break-after | 印刷時の改ページに加え、columns によるマルチカラムにおける改カラムを制御 |
| break-inside | 印刷時の 要素内での改ページを避ける |
| page-break-before | 印刷時の改ページ位置を設定する |
| page-break-after | 印刷時の改ページ位置を設定する |
| page-break-inside | 印刷時の要素内での改ページを避ける |
リストに関するリファレンス
| プロパティ | 説明 |
| list-style | マーカーに関する設定を行う |
| list-style-type | マーカー文字の種類を設定する |
| list-style-position | マーカーの表示位置を設定する |
| list-style-image | マーカー画像を設定する |
印刷に関するリファレンス
| プロパティ | 説明 |
| size | ページボックスのサイズと向きを設定する |
| marks | トンボを印刷するかどうかを設定する |
| page | 適用するページボックス名を設定する |
| orphans | 改ページされる際の前ページの最低行数を設定する |
| widows | 改ページされる際の次ページの最低行数を設定する |
アウトラインに関するリファレンス
| プロパティ | 説明 |
| outline | アウトラインのスタイル・太さ・色を設定する |
| outline-width | アウトラインの太さを設定する |
| outline-style | アウトラインのスタイルを設定する |
| outline-color | アウトラインの色を設定する |
スクロールバーに関するリファレンス
| プロパティ | 説明 |
| scrollbar-base-color | スクロールバーのベース色を設定する |
| scrollbar-face-color | スクロールバーの表面の色を設定する |
| scrollbar-track-color | スクロールバーの下地の色を設定する |
| scrollbar-arrow-color | スクロールバーの矢印の色を設定する |
| scrollbar-highlight-color | スクロールバーのハイライトの色を設定する |
| scrollbar-shadow-color | スクロールバーの影の色を設定する |
| scrollbar-3dlight-color | スクロールバーの左端と上端の色を設定する |
| scrollbar-darkshadow-color | スクロールバーの右端と下端の色を設定する |
グリッドに関するリファレンス
| プロパティ | 説明 |
| layout-grid | グリッドに関する設定を行う |
| layout-grid-mode | グリッドに文字を乗せるかどうか設定を行う |
| layout-grid-type | グリッドへの文字の乗せ方を設定する |
| layout-grid-line | 行グリッドの高さを設定する |
| layout-grid-char | 文字グリッドの幅を設定する |
まとめ
いかがでしたでしょうか。もちろんリファレンスの内容を暗記する必要は全くなく、必要に応じて適宜参照する程度で大丈夫です。
是非本記事をきっかけに、CSSに関する理解を深めてください。
