なぜ、Webの「改行」はこんなにも気難しいのか？
Webサイトを作っていて、こんな経験はありませんか？
「せっかく綺麗にデザインしたのに、長い英単語がはみ出してレイアウトが崩れてる！」とか、「逆に、変なところでプツンと切れていて読みづらい……」なんてこと。
特に、スマホの狭い画面で英語の長い文章を表示させるとき、ブラウザは「どこで改行していいかわからない！」とパニックを起こしがちです。
今日はそんな「改行の悩み」を、CSSの魔法で解決する`hyphens`（ハイフン）プロパティのお話をします。これを知っておくだけで、あなたのサイトの読みやすさは一段とプロっぽく洗練されますよ。
—
ハイフネーションって、そもそも何？
普段の日本語の文章だと、あまり意識しませんよね。でも英語圏の文章には、単語の途中で「-（ハイフン）」を入れて改行する文化があります。
例えば、「internationalization（国際化）」という長い単語。
画面の幅が足りなくなったとき、無理やり全部を表示させようとするとレイアウトが崩れます。そこで、「inter-」と「nationalization」に分けてあげれば、スッキリ収まりますよね。
この「よし、ここで切ってハイフンを入れよう！」という判断を、ブラウザに自動でお願いできるのが`hyphens`プロパティなんです。
—
さっそく使ってみよう！
使い方はとってもシンプル。CSSに数行書き加えるだけです。
.text-box {
/ ここで「自動でハイフンを入れてね！」と指示を出します /
-webkit-hyphens: auto; / Safariなどのために必要 /
-ms-hyphens: auto; / IEなどのために必要 /
hyphens: auto; / これが標準の書き方です /
}
たったこれだけで、ブラウザは賢く改行場所を探してくれます。
ここで一つ、大切な「お約束」
この魔法を効かせるためには、「この文章は何語なのか？」をブラウザに教えてあげる必要があります。HTMLの`lang`属性を忘れないようにしましょう。
Supercalifragilisticexpialidocious… (すごく長い単語など)
`lang=”en”` がないと、ブラウザは「どの言語のルールでハイフンを入れればいいの？」と迷子になってしまい、せっかくのCSSも動いてくれません。「準備運動」だと思って、ぜひセットで覚えておいてくださいね。
—
なぜ「自動（auto）」が重要なのか？
「全部自分で改行位置を決めればいいんじゃない？」と思うかもしれません。でも、Webの世界は画面サイズが無限大です。PC、タブレット、スマホ、さらには折りたたみスマホまで……。
すべてを人間が手作業で調整するのは、「お買い物に行くたびに、その日の気温に合わせて服をイチから縫い直す」くらい大変なことです。
`hyphens: auto;` を使えば、どんな画面サイズでもブラウザが「今ここがちょうどいい改行ポイントだね」と、臨機応変に判断してくれます。余計な苦労はブラウザに任せて、私たちはもっとクリエイティブなことに時間を使いましょう！
—
つまずきやすいポイント：日本語の場合は？
「よし、日本語のブログでも使ってみよう！」と思った方、ちょっと待ってください。
実は`hyphens`プロパティは、基本的に「アルファベットなどの言語」のために作られています。日本語は単語の途中で切ることがないので、残念ながらこのプロパティを日本語の文章に適用しても、劇的な変化はありません。
日本語で改行を美しく制御したい場合は、`word-break: break-all;`（無理やり改行させる）や、`overflow-wrap: break-word;`（単語の切れ目を優先する）といった別のプロパティと組み合わせて使うのが一般的です。
最後に：完璧を目指さなくても大丈夫！
Web制作を始めたばかりの頃は、完璧なレイアウトを求めて悩んでしまうことも多いはずです。でも、安心してください。プロの現場でも、改行の制御は常に試行錯誤の連続です。
今日覚えた`hyphens: auto;`は、あなたの武器の一つになります。まずは自分のサイトの英語テキストに適用してみて、「お、ちょっと読みやすくなったかも！」という小さな発見を楽しんでみてくださいね。
コードを書いて、保存して、ブラウザをリロードする。その積み重ねが、いつかあなたを素晴らしいフロントエンド・エンジニアにしてくれますよ。応援しています！
コメント