よく使うCSSプロパティ一覧【CSS基礎】

Webサイトを作ってみよう|連載CSS
記事内に広告が含まれています。

CSSのプロパティは200以上、HTMLの要素以上の数があるんだよ。

えっ、そんなにあるんですか?

ただHTMLと同じく、よく使うものは限られるよ。暗記する必要はないので、よく使うものだけをさらっと見ておこう。

テキスト関係

color(カラー)

文字の色。

p {
      color : #ff0000;
}
プロパティ 値の例 値の説明
color #ff0000 16進数のカラーコード。他にRGB値、色名などで指定してもOK。
rgb(255, 0, 0); RGB値
red 色名(147色定義されている)

font-size(フォントサイズ)

文字サイズ。

p {
      font-size : 20px;
}
プロパティ 値の例 値の説明
font-size 20px 値は数字+単位。単位はpxrem」em%など。

font-weight(フォントウェイト)

文字の太さ。

p {
      font-weight : bold;
}
プロパティ 値の例 値の説明
font-weight bold 標準はnormal、太字はbold
700 標準は400、太字は700

font-style(フォントスタイル)

文字の形。

p {
      font-style : italic;
}
プロパティ 値の例 値の説明
font-style normal 標準(垂直の状態)。
italic 筆記体風の斜体。イタリックがフォントに含まれていない場合は普通の斜体になる。
oblique 斜体。

font-family(フォントファミリー)

フォントの種類。

p {
      font-family: "Noto Sans JP", sans-serif;
}
プロパティ 値の例 値の説明
font-family serif フォント名をカンマ区切りで複数指定できる。左から順にフォントがあればそれで表示。serifは明朝体。sans-serifはゴシック体。

line-height(ラインハイト)

行の高さ。

p {
      line-height: 40px;
}
プロパティ 値の例 値の説明
line-height 40px 1行の高さを指定する。フォントサイズが20pxでline-heightを40pxにした場合、文字の上下に10pxの余白をとる。

letter-spacing(レタースペーシング)

文字と文字の間のサイズ。

p {
      letter-spacing: 3px;
}
プロパティ 値の例 値の説明
letter-spacing 3px 文字と文字の間のサイズ。

text-align(テキストアライン)

要素内のテキスト等の水平方向の位置。

p {
      text-align: center;
}
プロパティ 値の例 値の説明
text-align left 文字等の位置を、左寄せ、真ん中寄せ、右寄せなどに設定する。
center
right

text-decoration(テキストデコレーション)

文字の装飾。

p {
      text-decoration: underline;
}
プロパティ 値の例 値の説明
text-decoration underline 下線や点線などを文字に適用する。

要素(タグ)の調整・装飾

width(ウィズ)

要素の幅。

.box {
      width: 200px;
}
プロパティ 値の例 値の説明
width 200px 値は数字+単位。単位はpx%など。インラインボックスには反映されない。

max-width(マックスウィズ)

要素の最大幅。

.box {
      max-width: 200px;
}
プロパティ 値の例 値の説明
max-width 200px 基本はwidthと同じ。値のサイズより大きくはならず、小さくは可変する。

min-width(ミニマムウィズ)

要素の最小幅。

.box {
      min-width: 200px;
}
プロパティ 値の例 値の説明
min-width 200px 基本はwidthと同じ。値のサイズより小さくはならず、大きくは可変する。

height(ハイト)

要素の高さ。

.box {
      height: 500px;
}
プロパティ 値の例 値の説明
height 500px 値は数字+単位。単位はpx%など。インラインボックスには反映されない。

max-height(マックスハイト)

要素の最大高さ。

.box {
      max-height: 500px;
}
プロパティ 値の例 値の説明
max-height 500px 基本はheightと同じ。値のサイズより大きくはならず、小さくは可変する。

min-height(ミニマムハイト)

要素の最小高さ。

.box {
      min-height: 500px;
}
プロパティ 値の例 値の説明
min-height 500px 基本はheightと同じ。値のサイズより小さくはならず、大きくは可変する。

margin(マージン)

要素の外側の余白。

.box {
      pmargin: 50px;
}
プロパティ 値の例 値の説明
margin 50px 20px 50px 20px 値が1つだと4方向。2つだと上下左右。3つだと左右。4つだとと時計回り。値はスペースで区切る。
margin-top 50px 要素の外側の上方向の余白。
margin-right 要素の外側の右方向の余白。
margin-bottom 要素の外側の下方向の余白。
margin-left 要素の外側の左方向の余白。

padding(パディング)

要素の内側の余白。

.box {
      padding: 50px;
}
プロパティ 値の例 値の説明
padding 50px 20px 50px 20px 値が1つだと4方向。2つだと上下左右。3つだと左右。4つだとと時計回り。値はスペースで区切る。
padding-top 50px 要素の内側の上方向の余白。
padding-right 要素の内側の右方向の余白。
padding-bottom 要素の内側の下方向の余白。
padding-left 要素の内側の左方向の余白。

border(ボーダー)

要素の枠線。

.box {
      border: 1px solid #000000;
}
プロパティ 値の例 値の説明
border 1px solid #000000 要素の4方向に枠線を付ける。線幅線の種類線の色をスペース区切りで指定。順不同。
border-top 要素の上方向に枠線を付ける。
border-right 要素の右方向に枠線を付ける。
border-bottom 要素の下方向に枠線を付ける。
border-left 要素の左方向に枠線を付ける。

border-radius(ボーダーレイディアス)

要素を角丸にする。

.box {
      border-radius: 30px;
}
プロパティ 値の例 値の説明
border-radius 30px 値が1つだと4つ角、4つだと左上右上右下左下と時計回り。値はスペースで区切る。他にも指定方法があるが、この2つで大体OK。

background(バックグラウンド)

要素の背景色や背景画像を設定する。

.box {
      background: #ffffff url(images/bg.jpg) repeat;
}
プロパティ 値の例 値の説明
background #ffffff url(images/bg.jpg) repeat background関連プロパティの一括指定(値が一つでも使える。複数はスペースで区切る)。background-positionbackground-size/(スラッシュ)で区切り連続する必要があるが、他は順不同。
background-color #ffffff 背景色の指定。16進数のカラーコード、他にRGB値、色名などで指定してもOK。
background-image url(images/bg.jpg) 背景画像をurl(パス)で指定。
background-repeat no-repeat 背景画像の繰り返し。
background-position left top 背景画像の位置。横・縦で指定。数値も可。
background-size 50% 背景画像のサイズ。数値以外にもcontain(要素に合わせて拡大)cover(要素に合わせて隙間なく拡大)なども指定可。

transform(トランスフォーム)

要素の変形。

.box {
      transform: scale(2, 1);;
}
プロパティ 値の例 値の説明
transform translateX(50px) 移動回転拡大縮小ひずみなど要素の様々な変形が可能。

transition(トランジション)

CSSプロパティの変化の時間や動作。

.box {
      transition: background 1s;
}
プロパティ 値の例 値の説明
transition all 1s 対象のプロパティとその秒数などを指定する。:hoverなどと組み合わせて使用。

list-style(リストスタイル)

リスト要素のマーカーデザイン。

.box {
      list-style: none;
}
プロパティ 値の例 値の説明
list-style none list-style関連プロパティの一括指定。noneはリストマーカー無し。
list-style-type disc リストマーカーの形を指定。
list-style-image url(images/list.jpg) リストマーカーを画像にする場合url(パス)で指定。
list-style-position inside リストマーカーの位置を指定。要素の内外。

box-sizing(ボックスサイジング)

要素の幅と高さの計算方法。

.box {
      box-sizing: border-box;
}
プロパティ 値の例 値の説明
box-sizing border-box 要素のpaddingborderの値を、widthheightに含める。
content-box 要素のpaddingborderの値を、widthheightに含めない。初期値。

overflow(オーバーフロウ)

要素からはみ出したコンテンツの表示方法。

.box {
      overflow: hidden;
}
プロパティ 値の例 値の説明
overflow visible はみ出して表示。初期値。
hidden はみ出したら非表示。
scroll スクロールバーを常に表示。
auto はみ出したらスクロールバーを表示。
clip hiddenとほぼ同じだが、要素内での全てのスクロールが禁止。

レイアウト関係

display(ディスプレイ)

要素のボックスの変更や、子要素のレイアウト方法の指定。

.box {
      display: flex;
}
プロパティ 値の例 値の説明
display block 要素がブロックボックスを生成する。
inline 要素がインラインボックスを生成する。
inline-block 要素がインラインブロックボックスを生成する。(インラインボックスのまま、幅・高さ・余白の設定が可能)
flex 要素がフレックスボックスモデルを生成する。
grid 要素がグリッドモデルを生成する。

超重要!次の記事で解説します。

position(ポジション)

要素の配置方法。

.box {
      position: fixed;
}
プロパティ 値の例 値の説明
position static 要素配置の既定値(元の状態)。
relative 要素の元位置からの相対配置。
absolute 親要素を基準とする相対配置。親要素指定がなければブラウザ基準。
fixed ブラウザを基準としての絶対配置。固定され、スクロールしても動かない。
sticky 直近の親要素を基準として、スクロールで通り過ぎずに指定位置で固定される。

positionと一緒に使うプロパティ

positionで移動させる要素の位置等。

.box {
      position: fixed;
      top: 50%;
      right: 10px;
      z-index: 5;
}
プロパティ 値の例 値の説明
top 100px 上からの移動距離。
right 50% 右からの移動距離。
bottom 50px 下からの移動距離。
left 50% 左からの移動距離。
z-index 5 position要素の重なり順。数字を順に使う必要はなく、単純に数値の大きい方が上になる。

よく使うものだけで、こんなにあるんですか?

これでも大分厳選してるよ。Webサイトをいくつか作っていくと自然と覚えていくので、先に丸暗記する必要はないよ。次からはCSSのプロパティを少し深堀りしていきます。