CSSサンプルコード

クラス名のつけ方

よく使う表現をまとめました

• main … 主要な
• faq … よくある質問
• title … （サイト、セクションの）タイトル、見出し
• heading … 見出し
• lead … 見出しの補足
• wrapper … 容器（レイアウト）
• container … 容器（全体的な囲むもの）
• desc … 概要（description）
• detail … 詳細
• feature … 特徴

単位使い分け

emは親要素のフォントサイズを参照するのでletter-spacing疑似要素の間隔に使い、絶対的な値はpxでそれ以外はreｍにすることで、レスポンシブデザインに対応するスタイルにできます。

• em　…　letter-spacingや疑似要素との間隔
• px　…　border等可変でない値

カスタムプロパティの定義

@charset "UTF-8";

:root {
    --primary-color: #45CCC4;
    --red: #EB4E45;
    --blue: #0158A8;
    --bg-color: #ECFCFB;
    --text-color: #333;
    --breakpoint-sm: 576px;
}

画像の大きさの最適化

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

※親要素より横幅が大きい場合のみ縮小され、
高さも自動で縮小され、歪みません

※画像の上下に余白（line-height分の余白）ができない

書き出し位置は左寄せ揃えかつ中央寄せ

▼ulの親要素、ulに下記のスタイルをあてる

/* ulの親要素 */
.list-center {
  text-align: center;
}

.list-center ul {
  text-align: left;
  display: inline-block;
}

▼pタグも同様に

.center-left {
  text-align: center;
}

.center-left p {
  text-align: left;
  display: inline-block;
}

カラム子要素　下揃え

↓ボタンの高さが不揃い

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

↓CSSで高さを同じに

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！

ダミー

各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！

ダミー

.columns-f .wp-block-column {
  display: flex;
  flex-direction: column;
}

.columns-f .wp-block-column *:last-child {
  margin-top: auto!important;
}

backgroundプロパティ

一括指定の順番

background: url background-position / background-size background-repeat;

background-position / background-sizeの順番は決まっている

linear-gradient

background: linear-gradient(red, #eee);
background: linear-gradient(to bottom, red, #eee);
background: linear-gradient(180deg, red, #eee);

背景を2色にする

background: linear-gradient(90deg, red 0%, red 30%, #f4f7f8 30%, #f4f7f8 100%);

背景画像にオーバーレイ（透過カラー）を重ねる方法

background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../) center center / cover no-repeat;

親要素を超えて全幅にしたい場合

※サイドバー分左右ずれてます

.full {
	padding: 4px 8px;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}