---
title: "日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました"
description: "単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSS「kiso.css」をリリースしました。その名が示すように、Webサイト構築の「基礎」として機能します。"
canonical: https://www.tak-dcxi.com/article/introduce-kiso-css/
published: 2025-06-16
last-updated: 2025-06-16
category: "CSS"
tags: ["kiso.css", "text-autospace", "text-spacing-trim", "line-break"]
---
# 日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました。
[kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS](https://tak-dcxi.github.io/kiso.css/)
Note
この記事はkiso.css v1.1.3（2025年6月）時点の内容です。2026年11月時点の最新版（v1.2.4）では、次の点が記事の内容と異なります。
- 見出しの`text-wrap: pretty`は、英語（`:lang(en)`）の見出しだけに指定しています。あわせて、英語の段落（`p`要素）と表のキャプション（`caption`要素）にも指定するようになりました。
- 和文で斜体を打ち消す要素から`var`要素を外しました。
また、`text-autospace`プロパティはChrome 140とFirefox 145でもサポートされました。サポートした全てのブラウザで、指定しない場合の初期値が`no-autospace`（アキを挿入しない）相当になっているため、記事で紹介している「初期値の挙動がChromeとSafariで異なる」という問題は現在は起きません。記事で触れているOSレベルのフォントスケールのCSS環境変数（`env(preferred-text-scale)`）はChrome 138でリリースされましたが、kiso.cssの`text-size-adjust`の指定は変えていません。
kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。
有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。
kiso.cssは[destyle.css](https://github.com/nicolas-cusan/destyle.css)や[UA+](https://github.com/fokus-dev/uaplus)を参考にしつつ、独自性も加えています。
## インストール
### npm / yarn
```bash
npm install kiso.css
# or
yarn add kiso.css
```
CSS内でimport
```css
/* import your CSS file */
@import "kiso.css";
```
### CDN
headの中で読み込む
```html
```
### ダウンロード
GitHubから直接ダウンロードすることもできます。
[GitHub - tak-dcxi/kiso.css: This is a reset CSS that provides a 'foundation' with domestic products in mind. "Kiso" (基礎) means "foundation" in Japanese.](https://github.com/tak-dcxi/kiso.css/)
## 日本語組版への配慮
kiso.cssの最大の特徴は、日本語環境での使用を前提とした設計にあります。
現在も多くのリセットCSSが開発・紹介されていますが、その大半は欧文を前提としており、日本語のWebサイトで使用する際には追加の調整が必要になることが少なくありません。
kiso.cssでは、副作用が少ない範囲で日本語に特化したスタイル調整を加えています。
kiso.css
```css
:where(:root) {
/* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
text-spacing-trim: trim-start;
/* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
text-autospace: normal;
/* Prevents misreading by applying strict line-breaking rules. */
line-break: strict;
}
:where(em:lang(ja)) {
/* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
font-weight: bolder;
}
:where(:is(i, cite, em, dfn, var):lang(ja)) {
/* Italic style is not common in Japanese, so the `font-style` is reset. */
font-style: unset;
}
```
主に適用しているスタイル調整は次のとおりです。
### text-spacing-trim プロパティ
`text-spacing-trim`プロパティは、約物（句読点や括弧など）と他の文字との間のスペースを制御します。
このプロパティをサポートするブラウザでは、デフォルト値の`normal`によって、約物が連続する場合に不要なスペースが自動的に削除されます。
kiso.cssでは、一般的な組版の慣習に則り`text-spacing-trim: trim-start`を指定しています。これにより、`normal`の挙動に加え、行頭のスペースも自動的に除去されます。
kiso.css
```css
:where(:root) {
/* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
text-spacing-trim: trim-start;
}
```
`text-spacing-trim: trim-start`を指定する具体的な理由については、以下の記事で詳細に解説されているため、ここでは割愛します。
[CSSの新しい国際化機能、対応ブラウザ状況は？](https://zenn.dev/masahiko888/articles/0e6301de9f4a08)
一方で、デフォルト値の`normal`でも約物間のスペースは調整されるため、何も指定しない場合でも`
`要素などでは意図しない表示のズレが生じる可能性があります。
そのため、`
`要素には`text-spacing-trim: space-all`を明示的に指定し、スペースが維持されるようにしています。
kiso.css
```css
:where(pre) {
/*
* Since `text-spacing-trim` can affect spacing in `
` elements even with its initial value, the final rendering may depend on the user's font settings.
* To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
*/
text-spacing-trim: space-all;
}
```
`text-spacing-trim`は現在、Google ChromeとMicrosoft Edgeでサポートされています。未対応ブラウザでは無視されるプログレッシブエンハンスメントとして導入可能であるため、積極的に採用しました。
### text-autospace プロパティ
`text-autospace`プロパティは、日本語などの文字と英数字との間に自動でスペースを挿入するかどうかを制御します。
具体的には、`1ic`（漢字「水」の幅を基準とする単位）の8分の1に相当するスペースが、和文と欧文の間に挿入されます。
この機能はMicrosoft Wordなどのワープロソフトでは標準的であり、Webにおいても日本語と英数字の間にスペースを設けることで可読性が向上するとされています。
kiso.cssは、デフォルトでこのアキを有効にする`text-autospace: normal`を設定しています。
kiso.css
```css
:where(:root) {
/* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
text-autospace: normal;
}
```
`text-autospace`は現在、Safariでサポートされており、Google Chromeでも[バージョン139以降でサポートが予定](https://groups.google.com/a/chromium.org/g/blink-dev/c/gwRvkPJ5pws/m/F3r-VeGoBAAJ)されています（Canary版では利用可能）。こちらもプログレッシブエンハンスメントとして導入できるため、採用しました。
注意点として、`text-autospace`を指定しない場合の初期値`auto`の挙動が**ChromeとSafariで異なる**点が挙げられます。Chromeではスペースが挿入される`normal`相当の挙動ですが、Safariでは挿入されない`no-autospace`相当の挙動となります。1pxもズレが無くデザインを再現する、文字通り「ピクセルパーフェクト」を行っている方は`text-autospace: no-autospace`を明示しないとChrome 139以降は苦労が水の泡になるのでご注意ください。
「Figmaのデザインと文字の詰まり方が変わるから指定したくない」という場合でも、ブラウザ間の差異をなくすために`text-autospace: no-autospace`を明示的に指定することが望ましいです。とはいえ、文章の読みやすさを向上させる機能を、デザインツールが未対応だからという理由で採用しないのは本末転倒な気もします。
kiso.cssでは、スペースが自動挿入されると不都合が生じやすい``や`