---
title: "海外製ブログテンプレートの日本語の折り返しを CSS 3行で直す"
url: https://okinako.dev/posts/japanese-line-breaking-css
published: 2026-10-25T05:05:28.716Z
updated: 2026-10-25T06:02:26.511Z
description: "「で｜す。」「スマートフ｜ォン」のように語の途中で改行されていたのを、lang=\"ja\" と word-break: auto-phrase などの3行で文節の切れ目で折り返すようにしました。"
---

# 海外製ブログテンプレートの日本語の折り返しを CSS 3行で直す

海外製のブログテンプレートを日本語で使ってみたら、本文の折り返しがどうも読みにくい。よく見ると「で｜す。」「サイ｜ト」「スマートフ｜ォン」のように、語の途中で改行されていました。

原因は、テンプレートが英語前提になっていたことです。`lang` を `ja` にして CSS を3行足すと、文節の切れ目で折り返すようになりました。

## Before / After

同じ文章・同じ幅（360px）で、CSS だけを変えて比べたのがこちらです。

![日本語の折り返しの before / after 比較。Before では「で｜す。」「サイ｜ト」「スマートフ｜ォン」など語の途中で改行され、After では文節の切れ目で改行されている](https://okinako.dev/_emdash/api/media/file/01M5RKE7T5KTZS75TZMQ439YS2.png)

Before で気になっていたのは次の4つです。

1. **「です」が「で｜す。」に割れる**
1. **カタカナ語の途中で切れる**（「サイ｜ト」「タイ｜トル」）
1. **小さい「ォ」が行頭に来る**（「スマートフ｜ォン」）
1. **「読みやす｜くなります」と語が割れて、最後の行に短く残る**

After では、どれも語のまとまりで折り返されています。

## 原因: テンプレートが英語前提だった

試していたのは EmDash（Astro ベースの CMS）のブログテンプレートです。初期状態では次のようになっていました。

- `<html lang="en">` になっている
- 本文のフォントは Inter（欧文フォント）だけで、日本語は OS 任せの代替フォントになる
- 日本語向けの改行の指定がない

ブラウザは `lang` を見て改行のルールを決めます。英語として扱われると、日本語は基本的に「どの文字の間でも改行してよい」ことになり、語の途中でも平気で折り返されます。

## 直し方

### 1. `lang="ja"` にする

まずはここからです。後で出てくる `auto-phrase` も、日本語として扱われていないと効きません。

```html
<html lang="ja">
```

### 2. 本文に CSS を3行足す

```css
.prose {
  word-break: auto-phrase; /* 文節の切れ目で改行する */
  line-break: strict;      /* 行頭禁則を厳しめにする */
  text-wrap: pretty;       /* 最後の行が短く残るのを避ける */
}
```

- `word-break: auto-phrase`: ブラウザが文を文節に分け、その切れ目で改行します。①②④が直るのはこれのおかげです。
- `line-break: strict`: 小さい「ォ」「ッ」や長音「ー」が行頭に来ないようにします。③はこれで直ります。
- `text-wrap: pretty`: 段落全体を見て改行位置を調整し、最後の行に1〜2文字だけ残るのを避けます。

### 3. 日本語フォントをフォールバックに足す

欧文フォントのあとに、日本語フォントを並べておきます。

```js
// astro.config.mjs の fonts 設定
fallbacks: ["Hiragino Sans", "Noto Sans JP", "Yu Gothic", "sans-serif"],
```

Mac ではヒラギノ、Windows では游ゴシックで表示されます。

## 注意点

- `auto-phrase` は **Chrome / Edge だけ**: 執筆時点で対応しているのは Chrome / Edge（119 以降）だけで、Safari と Firefox は未対応です。未対応のブラウザでは無視されて、従来どおり1文字単位で折り返します。崩れはしないので、入れておいて損はありません。
- `text-wrap: pretty` も**ブラウザによる**: Chrome / Edge と最近の Safari は対応していますが、Firefox はまだ確認できていません。こちらも未対応なら無視されるだけです。
- **右端がガタガタになる**: 文節で改行するので、行の長さがそろいません。本文は読みやすさを優先して、このままにしています。

## まとめ

海外製のテーマを日本語で使うなら、まず `lang="ja"` と次の3行を入れるのがおすすめです。

```css
.prose {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
```

スマートフォンのように幅が狭い画面ほど効果がわかりやすいです。