変数でフォントサイズ等の情報を一括管理するCSS変数（カスタムプロパティ）

2025年1月5日

CSSにてフォントサイズを修正する時に一括で変えたい時があると思います。
CSS変数（カスタムプロパティ）というのがあるのでそれを使います

CSSコード:root {
  --main-base-title-font-size: 1.5rem;
  --main-base-title-line-height: 2.0rem;
}

CSSコード
1 2 3 4	`:root {` `--main-base-title-font-size:` `1.5rem;` `--main-base-title-line-height:` `2.0rem;` `}`

CSSコード(実際に使用する場合).title01 {
    font-size: var(--main-base-title-font-size);
    line-height: var(--main-base-title-line-height);
}

CSSコード(実際に使用する場合)
1 2 3 4	`.title01` `{` `font-size: var(--main-base-title-font-size);` `line-height: var(--main-base-title-line-height);` `}`

: 細かいけど効果抜群！ラインやスペーシングで魅せるデザインテク

ウェブデザインを魅力的にするために、「ライン（線）」と「スペーシング（間隔）」は非常に重要な役割を果たします。この記事では、CSSだけで簡単に実現できる細かいけど効果抜群のデザインテクニックを紹介し ...

CSS HTML

: 【CSS】Flexboxを完全マスター！基本から応用まで徹底

Flexbox（フレックスボックス）は、CSSでレイアウトを柔軟に制御できる強力な機能です。この記事では、基本から応用まで詳しく解説します。 1. Flexboxの基本 1-1. display: f ...

CSS HTML

: トップページだけにCSSを反映させたい場合の記述方法

どうもうちのアフィンガーちゃんトップページのmainがおかしいもよう… ちゃんと直すべきだが原因がわからないので、トップのmainだけpaddingを0にして応急処置を施したいどうやら先頭に[.ho ...

CSS HTML WordPress

: 【第5回】たくさんのデータをまとめて扱う！PHPの「配列」入門

chatGPTに記事を書いてもらってますプログラムでは、「たくさんのデータをまとめて使いたい」場面がよくあります。そんなときに便利なのが配列（はいれつ）です！配列ってなに？配列とは、複数の ...

HTML PHP

: 段落タグ<p>とは？基本の使い方から注意点まで

HTMLの基本！タグで段落を作ろう HTMLを使ったWebページ作成において、文章を整理して表示するために欠かせないのが <p>タグです。このタグは「段落」を表すもので、読みやすい文章構 ...

HTML

absoluteで上下左右中央表示する

スマホ・タブレットにて横向きにしてサイトを見られたくない場合の処理