この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: hyphensプロパティ
SEOタイトル: CSS hyphens プロパティ｜英単語のハイフネーション自動化・lang属性との関係・ブラウザ対応

この記事の要点
  • hyphens は英単語の自動ハイフネーション（行末で単語を分割しハイフン - を入れる）を制御する CSS プロパティ
  • 値は none / manual / auto。既定は manual
  • auto を効かせるには html lang="en" のように言語属性が必須。日本語 (lang="ja") では基本的に効かない
  • ­（ソフトハイフン）や ‐（明示ハイフン）を manual 値と組み合わせると狙った位置でだけ分割できる
  • Safari は古くから -webkit-hyphens プレフィックスが必要だったが、現代ブラウザはほぼ標準対応

hyphens とは

hyphens は CSS のテキスト整形プロパティの 1 つで、長い英単語が行末に来た時にハイフン (-) を入れて自動的に折り返す「ハイフネーション」機能を制御します。新聞や書籍の英文組版でおなじみの処理を、ブラウザ上で実現できます。

構文と値

selector {
  hyphens: none | manual | auto;
}
値意味
noneハイフン分割を一切行わない。­ も無視
manual (既定)­ や明示ハイフンがある場所でだけ分割可能
autoブラウザが言語辞書を使って自動分割。lang 属性必須

auto を効かせるための条件

hyphens: auto は単独では効きません。HTML 側で言語属性を指定する必要があります。





  

    This is an internationalization example.

上記のように html lang="en" がないと、ブラウザはどの言語の辞書を使うか分からず、ハイフネーションを行いません。

言語が混在する場合

本文は日本語ですが、ここだけ
   internationalization
   が英語です。

manual で狙った位置だけ分割する

長い単語の「ここなら切れていい」位置に ソフトハイフン (­) を入れると、行末に来た時だけハイフンが表示されます。


  inter­national­ization

表示上は internationalization のままですが、行末では inter- / national- / ization のどこかで折り返されます。

日本語との関係

日本語は基本的に1 文字単位で改行するため、英語のようなハイフネーションは不要です。hyphens: auto を指定しても、lang="ja" ではほぼ何もしません。

日本語の禁則処理（行頭禁則・行末禁則）は word-breakプロパティ や line-break プロパティで制御します。

ブラウザ対応とプレフィックス

2026 年現在は標準で hyphens が使えますが、旧 Safari 用にベンダープレフィックスを併記する保守的な書き方もあります。

.text {
  -webkit-hyphens: auto;
  -ms-hyphens:     auto;
  hyphens:         auto;
}

典型ユースケース

1. 狭幅レイアウトの英文記事

スマホやサイドバーなど幅が狭い領域に英文を流す時に、長い専門用語が改行できずレイアウトが崩れる問題を緩和します。

article p {
  hyphens: auto;
  text-align: justify;
}

2. 多言語サイトのレスポンシブ対応

@media (max-width: 600px) {
  :lang(en), :lang(de) {
    hyphens: auto;
  }
}

関連プロパティ

プロパティ役割
word-break単語分割の方針
line-break句読点・記号の禁則処理
overflow-wrapはみ出し時の強制改行
text-align: justify両端揃え（hyphens と相性が良い）

hyphenate-character / hyphenate-limit-chars

近年のブラウザでは、ハイフネーションの記号と粒度を制御する追加プロパティが利用できます。

プロパティ役割例
hyphenate-character分割時に挿入する記号を変更hyphenate-character: "⸗";
hyphenate-limit-chars分割を許可する最小単語長と前後の文字数hyphenate-limit-chars: 6 3 2;
 
p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;   /* 6文字以上の語、前後3/2文字以上残す */
  text-align: justify;
}

justify と組み合わせるときのコツ

text-align: justify だけだと、単語間のスペースが広がりすぎて読みづらい「川 (river)」現象が起きがちです。hyphens: auto を併用するとスペースが詰まり、自然な組版になります。

FAQ

Q. CJK には効きませんか?
A. はい、原則的に効きません。日本語・中国語・韓国語は1 文字単位での折り返しが基本のため、word-break / overflow-wrap / line-break を使い分けます。

Q. auto なのにハイフンが入らない
A. ① lang 属性が設定されていない、② 親要素に英語以外の lang がある、③ そもそも単語が分割可能な長さに満たない、のいずれかを疑います。

Q. デザイン上ハイフンの形を変えたい
A. hyphenate-character: "-"; 等で記号を任意に変更可能です（対応ブラウザ要確認）。

言語別の挙動

langauto の効果備考
en強く効く（辞書が充実）欧文組版で最も恩恵が大きい
de / fr強く効く長い合成語に効果絶大
es / it / pt効く—
ja / zh / koほぼ無効1 文字単位で折り返すため不要

実務での適用パターン

狭幅レイアウトのブログ・ニュースサイトで以下のように一括指定するのがおすすめです。

article {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: anywhere;   /* 万一の長い文字列も折り返す */
  word-break: normal;
}

/* 日本語側はハイフネーション無効でも問題なし */
:lang(ja) article {
  text-align: left;
  hyphens: manual;
}

関連