こんにちは！フロントエンドの現場で日々コードと格闘しているライターです。
Webサイトを作っていて、「英語の長い単語だけ、なぜか右端からはみ出してしまう……」「そこだけ不格好な空きができてしまう」なんて経験はありませんか？
実はそれ、Webデザインにおける「あるある」中のあるあるなんです。今日は、そんな悩みをスマートに解決してくれるCSSの魔法、`hyphens`（ハイフンズ）プロパティについてお話しします。難しい技術用語は一旦置いておいて、身近な例え話から入っていきましょう！
—
なぜ英語の単語は「折り返し」が苦手なの？
私たちが普段使っている日本語は、どこで切っても（あるいは文字単位で）改行できるので、あまり気にすることはありませんよね。でも、英語などの欧米言語は「単語」というひとまとまりの単位で扱われます。
想像してみてください。「めちゃくちゃ長くて分厚い辞書」を、幅の狭いポケットに無理やり押し込もうとしている状態を。辞書（単語）はバラバラにできないので、ポケット（カラム）に入りきらないと、そのまま外に飛び出してしまいますよね。
これが、Webサイトで単語がはみ出したり、不自然な空白ができてしまう原因です。
そこで登場するのが、`hyphens` です。「長い単語なら、途中でハイフン（-）を入れて区切っていいよ！」と教えてあげることで、単語をスマートに折り返してくれるようになるんです。
—
さっそく使ってみよう！
この機能を使うには、たった2つのステップが必要です。
1. HTMLで「ここは何語か」を教えてあげる
ブラウザに「これは英語だよ！」と伝えないと、ハイフンのルールが適用されません。HTMLの``タグや、対象の要素に`lang`属性を忘れずに入れましょう。
Supercalifragilisticexpialidocious
2. CSSでハイフネーションを有効にする
次に、CSSで`hyphens: auto;`を指定します。これだけで、「入りきらないなら、いい感じの場所でハイフンを入れて折り返してね！」という指示が出せます。
/ すべての段落に適用してみましょう /
p {
/ これが魔法の呪文です /
hyphens: auto;
/ 折り返しを綺麗にするために、これもセットで覚えておくと便利！ /
word-wrap: break-word;
}
—
実践的なコード例
実際に、どのように記述すればいいか確認してみましょう。コピペして、お手元の環境で試してみてくださいね。
The implementation of internationalization is truly fascinating.
—
ちょっとした注意点：ここだけは気をつけて！
この`hyphens: auto;`、すごく便利なんですが、実は少しだけ「気まぐれ」な一面があります。
- ブラウザの対応状況: 最近のブラウザならほぼ問題ありませんが、古いブラウザや、OSの言語設定によっては、ハイフンが入らないこともあります。
- 単語の辞書データ: ブラウザが「この単語はここで切っていいんだな」と判断するための辞書データがOS側に必要です。そのため、WindowsとMacで見た目が微妙に異なることもあります。
「絶対にここで改行させたい！」という厳密なレイアウトを求める場所には向いていませんが、「文章の流れを損なわないように、自然に折り返してほしい」というケースには最強のツールです。
—
最後に：完璧を目指さなくて大丈夫
Web制作を始めたばかりの頃は、「なぜ思い通りに動かないんだ！」とイライラしてしまうこともあるかもしれません。でも、Webの世界は多様なデバイスや言語が入り混じっている場所です。
`hyphens`プロパティのように、「ブラウザにお任せして、いい感じに調整してもらう」という考え方は、Webデザインにおいてとても大切です。全部をコントロールしようとせず、時にはブラウザの賢さを信じて、ちょっとだけヒント（プロパティ）を添えてあげる。
そんな「ゆとり」を持つことが、長く楽しくWeb制作を続けるコツですよ。
もし今回紹介したコードで「うまくいかないな？」と思ったら、まずは`lang=”en”`がちゃんと入っているか確認してみてくださいね。それだけで解決することも多いはずです！
それでは、また次回の記事でお会いしましょう。ハッピーなコーディングを！
コメント