これだけは知ってほしい！最新の独自リセットCSSを解説します！

以前、リセット系CSSとしてdestyle.cssのご紹介をしました。

destyle.cssの内容以外で、追加で設定しておいたほうがよいリセット項目について解説致します。
コーディングに役立つリセット・ベーススタイルのテクニックを分解して解説していますので、ぜひ参考にしてみてください。

コードについて

以下のCodePenに追加のコードを記述しています。

CSSの最初にdestyle.css を追加しているので、今回紹介するコードは416行目からになります。

ベーススタイルに:where()を使う理由

ベーススタイルを書く際に、各セレクタの指定に :where() を使用しています。
:where()を使用すると詳細度が0になる特性があります。

詳細度 - CSS: カスケーディングスタイルシート | MDN

詳細度が0なので、あとから他のセレクタで上書きがしやすくなります。
なので、ベーススタイルの指定には最適です。

一方で、上書きされやすいので意図しないスタイルになる可能性があることに注意が必要です。

:rootを使う理由

CSSのセレクタで:root擬似クラス を使用していますが、:root擬似クラス はhtml のセレクタと同じ意味になります。
一方で、htmlセレクタより :root擬似クラスのほうが詳細度が高いので、CSS変数やリセットCSSを書くときに管理がしやすいメリットがあります。

コードの説明

次から、実際のベーススタイルについて細かく説明をしていきます。

変数の定義

:root {
  --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --color-background-base: white;
  --breakpoint-sm: 375;
  --breakpoint-lg: 1024;
  --font-size-base: 16;
  --rem: 0.0625rem;
}

今回使用するCSS変数を:root{}内に宣言します。
--font-family-base で定義したfont-familyはICSメディアさんの記事を参考にしています。

2024年に最適なfont-familyの書き方 - ICS MEDIA

--rem: 0.0625rem; の変数は、pxの単位をremに変換するために利用します。実際使用する場合は、下記のようにcalc()と併せて使用します。

calc(var(--rem) * 10); // 10pxをrem単位に変換

一番最後でリキッドレイアウトの例を説明していますが、そのときに使用する場合が多いです。

テキストの折り返し設定

:where(:root) {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  hyphens: auto;
}

テキストの折り返しの項目は、ICSメディアさんの記事を参考にさせていただきました。

文章の折り返し指定のCSS最新版 - ICS MEDIA

overflow-wrap: anywhere
長い単語を途中で折り返すようにする
word-break: normal
英単語を極力そのまま表示し、必要なときのみ折り返しする
line-break: strict
日本語の禁則処理を厳密に行い、読みやすさ向上させる
hyphens: auto;
英単語が長い場合に自動的にハイフンで区切って改行させる

日本語の禁則処理とは、日本語を読みやすくするために、特定の文字が行頭や行末に来ないようするためのルールのことです。
たとえば「、」や「。」や小文字の「ぁ」等が行の先頭に来ないようにする、などの項目がルール化されています。

スマートフォン端末でのフォントサイズの調整

:where(:root) {

  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

}

スマホブラウザでは、「フォントサイズが小さいページ」や「ブラウザを横向きにした時」などでテキストが自動的に拡大する場合があります。
この機能は開発者の意図に沿わない場合もあるので、自動拡大を防止して文字サイズを維持します。

スクロールバーとレイアウト

:where(:root) {

  scrollbar-gutter: stable;
  line-height: 1.5;
  overflow-x: clip;

}

scrollbar-gutter: stable; （注意点あり）
スクロールバーの表示・非表示が混在しているとレイアウトのガタツキが起こる場合があります。スクロールバーの表示領域を確保して、ガタツキを防ぐ設定です。

scrollbar-gutter: stable; の設定ですが、モーダル内にスクロールがあるときに2箇所スクロールバーが表示されるなど、実装方法によって表示崩れが起きる可能性がありますので、使用する際には十分な検証が必要となります。

line-height: 1.5;
destyle.cssはline-heightが1.15になっており、行間が狭いのでline-height: 1.5;を指定します。
• overflow-x: clip;
overflow-x: clip;を指定することで、overflow: hidden;にはない次のようなメリットがあります。

• 子要素のposition: sticky; が使用できる

• x方向、y方向のみ切り出しができる

【CSS】Safari 16.0でフルサポートされたoverflow: clipが便利

タップ時のハイライト無効化

:where(:root) {
  -webkit-tap-highlight-color: transparent;
}

スマホ端末でリンクなどをタップすると発生する領域ハイライトを消すプロパティです。ユーザー体験も向上すると言われています。

タップ領域のハイライト色とユーザー体験の改善 | COFUS技術ブログ

基本スタイル

:where(:root) {
  background-color: var(--color-gray-base);
  font-family: var(--font-family-base);
  color: var(--color-black);
}

サイト全体のベーススタイルをカスタムプロパティで管理してしていします。

bodyを画面の高さに合わせる

:where(body) {
  min-block-size: 100svh; /* bodyの高さを画面高さに合わせる */
}

body に画面の高さを指定することで、コンテンツが少ないときでもサイトの表示崩れを防ぐことに繋がります。 min-block-size: 100svh; の指定で、モバイルブラウザのアドレスバーなどの表示・非表示による高さ変化にも対応できます。

あなたが教わってるそのCSSテクニックはもう古い – TAKLOG

インタラクティブ要素のタッチ操作最適化

:where(a, area, button, [role="button"], input:not([type="range"]), label, select, summary, textarea) {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

モバイル端末でリンクやボタンなどをダブルクリックすると自動的に拡大される場合があります。touch-action: manipulation; の指定で誤操作や不要なズームを防ぐことができます。

4. リンクスタイル

:where(a) {
  color: inherit; /* 親要素の色を継承 */
  text-decoration: none; /* 下線を削除 */
  cursor: pointer; /* カーソルをポインターに */
}

color: inherit;
リンクの文字色を、親要素で指定されている色に合わせる設定です。
text-decoration: none;
ブラウザ標準で設定される下線をリセットします。
cursor: pointer;
リンク上にマウスカーソルが来たとき、ポインタ（手の形）に切り替わる指定です。

電話番号リンクの無効化

@media (any-hover: hover) {
  :where(a[href^="tel:"]) {
    pointer-events: none;
  }
}

@media (any-hover: hover) を使用することで、ホバー操作が可能な端末のみ (PCやノートPCのみ)に適用されます。
aタグのhref属性に 「tel:」が含まれる場合、ホバー操作可能な端末ではリンクが無効化されます（PCやノートPC等で電話のリンクが無効になる）

cssのメディア特性any-hoverを選択する理由

画像スタイル

:where(img) {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

max-width: 100%;、width:100%;
画像を親要素いっぱいにひろげる設定です。個人的には max-width: 100%;、width:100%;を併用することで、画像をいっぱいにひろげるほうが扱いやすいと考えています。
親要素いっぱいにひろげることに抵抗がある場合は、max-width: 100%; のみの指定でもいいと思います

• height: auto;
画像のアスペクト比を保持しながらリサイズします。
• vertical-align: bottom;
img要素 はインライン要素で、デフォルトでは行のベースラインに合わせられるため、下に余計な空白が出る場合があります。vertical-align: bottom; にすることで、画像の最下部が行の底辺に揃い、余白が削除されます。

ダイアログスタイル

:where(dialog) {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

:root:has(dialog[open]) {
  overflow: hidden; /* ダイアログが開いている間はスクロールを禁止 */
}

::backdrop {
  background-color: unset; /* ダイアログの背景色をリセット */
}

要素のデフォルトスタイルを全解除
ブラウザ独自の外枠や背景をリセットして、独自のモーダルUIを実装しやすくします。

dialog要素を使用したモーダルウィンドウの実装例 – TAKLOG

参考記事に詳しく解説されているので、すごく勉強になります。

:root:has(dialog[open])
モーダルが開いている間、モーダル背面のスクロールを停止します。
::backdrop
::backdrop疑似要素の background-color: unset; とし、デフォルトの黒っぽい背景をリセットしています。

フォームスタイル

:where(input:not([type="checkbox"]):not([type="radio"]), textarea) {
  border: 1px solid var(--color-gray-dark); /* 入力フィールドの境界線 */
}

チェックボックスやラジオ以外の input と textarea にフラットな1pxの境界線を付与します。
destyle.cssのフォームリセットは強力なので、フォームのみの初期設定をもっと詳しく設定したいところです、、

テキストエリアの基本設定

textarea {
  field-sizing: content; /* コンテンツに基づくサイズ調整 */
  min-height: 4lh; /* 最小高さを4行分に設定 */
}

field-sizing: content;  を使用することで、入力する行数が増えたときに自動的に行が増えるようになります。

• min-height: 4lh;
lh は line-height に基づく単位。4行分の高さを確保しつつ、行間をベースに調整できます。

これらはChromeの最新バージョンでのみ利用できる感じなので、まだ実用性はないかもしれません、、
https://caniuse.com/?search=field-sizing%3A%20content%3B

レスポンシブフォントサイズ設定（補足：リキッドレイアウト向け）

リキッドレイアウトとは

リキッドレイアウトは、主にタブレットサイズ（今回の場合 769px ~1024px）で1025pxのPCサイズを維持しながら、全体を縮小表示してくれるコーディング手法のことです。

※少しわかりにくいですが、769px〜1024px で全体が縮小されています。

リキッドレイアウトでデザインするコツ!!コーディングのやり方まとめ | 東京のホームページ制作 / WEB制作会社 BRISK

ここでは、コード内の 「レスポンシブフォントサイズ設定」 や 「メディアクエリのフォントサイズ調整」 をまとめて解説します。

ブレイクポイントごとのフォントサイズ調整（変更後のメディアクエリ）

body {
  /* レスポンシブフォントサイズ設定 */
  font-size: calc(var(--font-size-base) / var(--breakpoint-sm) * 100svi);

  /* ブレイクポイントごとのフォントサイズ調整 */
  @media (min-width: 375px) {
    font-size: unset;
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    font-size: calc(var(--font-size-base) / var(--breakpoint-lg) * 100svi);
  }
  @media (min-width: 1025px) {
    font-size: unset;
  }
}

上記の設定をすることで、769px ~ 1024pxの間では、remで指定したサイズのものが 1025pxのサイズを維持しながら縮小してくれます。
また、同様に 375px 以下の画面幅も、376px のサイズを維持しながら、全体を縮小してくれます。

フォントサイズの指定方法

リキッドレイアウトを実装する場合、すべての単位をremで実装する必要があります。
最初の方の商で説明しましたが、ここでcalcとvar(--rem)を併用して使用します。

pタグのフォントサイズが、10pxの場合

p {
  font-size: calc(10 * var(--rem));
}

まとめ

このリセット＆ベーススタイルは、ブラウザ間の初期値をフラットにしつつ、モバイルとデスクトップ双方に対応したUI/UXを実現するための最低限かつ拡張性の高いコード例です。
• 文字折り返しや日本語の禁則処理
overflow-wrap, word-break, line-break などを使い、横スクロールを極力防ぎつつ美しい文章表示を維持。
• スマホでのタップ操作を最適化
-webkit-tap-highlight-color: transparent; や touch-action: manipulation; で、誤作動や自動拡大を抑止。
• ダイアログやフォームのデフォルトスタイルをリセット
<dialog> 要素やOS依存のフォーム装飾を排除し、デザイン自由度を上げる。
• 実験的プロパティや単位
field-sizing, lh, svi など、今後標準化される可能性のある機能を積極的に試している。
• リキッドレイアウト・レスポンシブフォント
calc(...) + svi（あるいは vw）を併用し、ビューポートに合わせて文字サイズを可変させる。必要に応じてメディアクエリで部分的にリセットすることで、閲覧性・操作性を確保。

今回のコードは、すべてが絶対に必要というわけではありません。プロジェクトの要件・ユーザー層・対応ブラウザなどを考慮した上で、必要な部分を抜き出して使うことが大切です。