【コーディング】CSS ど忘れコードまとめ

2024年6月11日2026年8月5日

閲覧ありがとうございます。

ページテーマ

CSSを書いていて“あのコードは何だっけ？”をまとめました

ん、あのコードどうやって書くんだっけ？

コードの記述順、何が先だっけ？

そんな問題解決につながれば嬉しいです。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

各名称

.selector{
  property: value;
}

.セレクタ｛プロパティ：値；｝

ｐｘ（ピクセル）

スクリーンの１ピクセルの長さを１とした単位
固定サイズで表示させたい箇所全般に広く使われる

用途

固定したサイズで表示したいとき

文字サイズに使用した場合、ブラウザの文字サイズ変更機能が効かなくなる

<div class="box_px"></div>

.box_px{
  width: 200px;
  height: 200px;
  background: #666666;
  margin: 0 auto;
}

画面サイズが変わっても四角のサイズは変わりません。

％（パーセント）

親要素に対する割合で表示する
画面サイズが変わっても指定した割合を維持

用途

親要素のサイズに比例して変化するようにしたいとき

摘要するプロパティーによって親要素の何のサイズを基準にするのかが異なる

対象のプロパティ	基準となるサイズ
width	親要素のcontent-boxの横幅
height	親要素のcontent-boxの縦幅
margin・padding	親要素のcontent-boxの横幅（上下左右ともに）
left・right	親要素のpadding-boxの横幅
top・bottom	親要素のpadding-boxの縦幅
font-size	親要素に指定・継承されたフォントサイズ ※挙動はemと同じ

要素が入れ子になっている場合、計算が複雑になる可能性がある

クセがあるのでどのサイズが基準となっているのかを良く考えて使う必要がある。

<div class="parent">
  <div class="box_%">
  </div>
</div>

.rarent{
  width: 800px;
  height: 200px;
  margin: 0 auto;
}

.box_%{
  width: 70%;
  height: 200px;
  background: #666666;
  margin: 0 auto;
}

親要素（ここではコンテンツ幅）に合わせてグレーの部分の幅が変化します。

em（エム）

親要素に指定・継承されている文字サイズが基準の単位

大文字Mの高さ＝全角文字分とのことです。

用途

その時々の文字サイズに連動したサイズ指定をしたいとき

ex.

本文の字下げ
一行の高さ
テキストに付随するアイコンのサイズ

親要素の文字サイズを基準にしているのでem指定の要素が入れ子になった時、計算が複雑になる

<div class="box">
  <div class="em_ex-1">
    <div class="col1">
      <p>テキスト</p>
    </div>
  </div>
  <div class="em_ex-2">
    <div class="col1">
      <p>テキスト</p>
    </div>
  </div>
</div>

/*省略*/

.em_ex-1{
  font-size: 16px;
  background: #333333;
  margin-left: auto;
}

.em_ex-2{
  font-size: 32px;
  background: #333333;
  margin-right: auto;
}

.col1{
  font-size: 1em; /*親要素によってサイズが変わる*/
  width: 20vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

テキスト

同じ1emでも、親要素に指定した値によってテキストのサイズが変わります。

rem（レム）

ルート要素（HTML要素）で指定されている文字サイズを基準とした単位
多くのブラウザで標準文字サイズは16px（何もしなければ1rem＝16px）

ブラウザの文字サイズ変更機能に応じることができます

用途

font-sizeでpxの代わりに用いることでブラウザのサイズ変更機能を邪魔しない。
padding・marginや余白に用いることでブラウザの文字サイズ変更機能に応じてデザインバランスを保つことができる。

width・heightに使う場合、文字サイズを変更した時にレイアウトが崩れないか確認が必要です

vw・vh（ブイダブリュー・ブイエイチ）

ビューポートサイズが基準の単位。100vw＝viewportいっぱい（表示している画面幅）で100vhは同様の高さになります

基準が親要素でなく画面サイズになるので相対サイズ指定がしやすくなります

用途

ブラウザ幅に応じてシームレスに伸縮させたいとき

ex.

ファーストビュー全体を覆うようなボックスを実装する
縦横比率を維持したいとき
テキストをブラウザ幅に応じて応じて滑らかに伸縮させる

「50vwは画面サイズの半分」のようにイメージもしやすいです

値を動的に算出するための便利な関数

min()

画面幅に応じて動的に変化する値に対してあらかじめ最大値を設定できます

/*親要素の幅５０％かつ６００px以内で伸縮*/
width: min(50%,600px);

/*以下と同じことです*/
width: 50%;
max-width: 600px;

max-marginやmin-paddingといった最大値・最小値を指定するプロパティはありませんが、これならmarginやpaddingにも最大値・最小値が指定できます。

max()

min()と同様に、画面幅に応じて動的に変化する値に対してあらかじめ最小値を設定できます

/*親要素の幅５０％かつ６００px以上で伸縮*/
width: max(50%,600px);

/*以下と同じことです*/
width: 50%;
min-width: 600px;

clamp()

画面幅に応じて動的に変化する値に最大値と最小値を設定できます

/*親要素の幅５０％かつ３００px以上１０００px以下で伸縮*/
width: clamp(300px,50%,1000px);

/*以下と同じことです*/
width: 50%;
min-width: 300px;
max-width: 1000px;

画面サイズに合わせて変動するvwを使いつつ、最大値と最小値を指定してレイアウトを保つなどの使い方が可能です。

font

font-family

游ゴシックの指定方法

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

background

疑似要素

::befoer

画像に透過カラーを重ねる

.bg {
    background: url(/* 画像URL */);
    background-size: cover;
    position: relative;
    height: 100%;
}

背景画像.bgに::beforeで

.bg::before {
    content: ''; /* これを忘れずに */
    position: absolute;
    top: 0; /* 4つの0の指定で.bg全体をカバー */
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 0,0,0,はカラー、0.5は透過度 */
}

text

text-decoration

リンクタグaのアンダーラインを消す

<a href="#">下線を消す。</a>

a {
  text-decoration: none;
}

display: flex;の要素の中央寄せ

flexコンテナの要素を中央寄せするときalign-itemsとjustify-contentを使って中央寄せする方法があります。

<div class="xxx">
  <p>テキスト</p>
</div>

.xxx{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #999999;
}

テキスト

line-heightの単位

line-hightの値には単位は付けないのが定石です

親要素に単位emを付けた場合

<div class="parents">
  <p class="child">テキスト</p>
</div>

.parents{
  background: #999999;
  font-size: 16px;
  line-height: 1em;
  text-align: center;
}

.child{
  font-size: 32px;
}

見た目

テキスト

テキストが背景からはみ出してしまいます

親要素に単位を付けない場合

<div class="parents">
  <p class="child">テキスト</p>
</div>

.parents{
  background: #999999;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.child{
  font-size: 32px;
}

見た目

テキスト

テキストが背景に収まります

<div class="parents">
  <p class="child">テキスト</p>
</div>

.parents{
  font-size: 16px;
  line-height: 1em;
}

.child{
  font-size: 32px;
}

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

この記事を書いた人

k-suke

WordPressでサイトを作り、壊し、また作る。
フリーランスとしてココナラで実案件に向き合いながら、その経験をそのまま言葉にしています。
うまくいった設定も、試したら失敗した話も、ぜんぶここに書いています。
すでにWordPressを持っていて、もう一歩進めたい人に届けば。

【コーディング】CSS ど忘れコードまとめ

各名称

ｐｘ（ピクセル）

％（パーセント）

em（エム）

rem（レム）

vw・vh（ブイダブリュー・ブイエイチ）

min()

max()

clamp()

font

font-family

游ゴシックの指定方法

background

疑似要素

::befoer

画像に透過カラーを重ねる

text

text-decoration

リンクタグaのアンダーラインを消す

display: flex;の要素の中央寄せ

line-heightの単位

この記事を書いた人

コメント

コメントするコメントをキャンセル

【コーディング】CSS ど忘れコードまとめ

各名称

ｐｘ（ピクセル）

％（パーセント）

em（エム）

rem（レム）

vw・vh（ブイダブリュー・ブイエイチ）

min()

max()

clamp()

font

font-family

游ゴシックの指定方法

background

疑似要素

::befoer

画像に透過カラーを重ねる

text

text-decoration

リンクタグaのアンダーラインを消す

display: flex;の要素の中央寄せ

line-heightの単位

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル