【初心者向け】CSS でよく使う項目をリファレンス

2024.01.03
cssレファレンス

「CSSでよく使う項目を一覧で見れるようにしておきたい」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

  • CSSでよく使う項目一覧がわかる

また本記事では、「初心者」を想定しているので必要以上に細かい項目は敢えて割愛します。初心者の頃に細かすぎる内容を見ても理解できないですし、消化しきれないためです。

是非本記事をお読みいただき、理解を深めてください。

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に関する理解を深めてください。

＼プログラミングスクールを比較／

DMM WEBCAMP

COACHTECH

RUNTEQ
DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
 フリーランスエンジニア WEBエンジニアへの転職
分割払い ○ ○ ○
補助金 ○ × ○
転職保証 ○ × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり 		【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当 		【とことん勉強してから転職したい方向け】
1,000時間（約9カ月）のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後		 42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

  • puroguraminguninenreihakankeinai

    プログラミングに年齢は関係ない！その理由と年代別の最適な行動を解説

    2024.01.29
  • Raspberry Piでできること15選!

    ラズパイってなに？できること15選と人気の理由を紹介

    2024.01.04
  • 廃止になったvalign属性の使い方とは?現在はCSSで対応可

    【HTML】廃止になったvalign属性の使い方とは？現在はCSSで対応可

    2024.01.04
  • プログラミング 頭に入らない

    【お悩みの方必見】プログラミングが頭に入らない9つの原因と対処法

    2024.01.17

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5