【入門編】インライン要素内のテキスト折り返し制御 – HTML実践ガイド

こんにちは！Web制作の世界へようこそ。
コードを書き始めたばかりの頃、誰もが一度は「あれ？なんでこの文字だけ、枠からはみ出して突き抜けていくの？」と不思議に思ったことがあるはずです。

大丈夫、難しいことはありません。身近な例えを使いながら、スッキリ解決していきましょう。

—

まず、ブラウザの気持ちになってみましょう。
ブラウザは基本的に「単語の途中でぶった切るなんて、失礼だよね」と考えています。特に英語などの単語は、途中で切ると意味が変わってしまうことがありますよね。

例えば、「Supercalifragilisticexpialidocious」という長い単語があったとします。ブラウザは「これを途中で切ったら可愛そうだから、いっそこのまま突き抜けて表示しよう！」と判断してしまうんです。これが、レイアウト崩れの正体です。

このブラウザの「優しさ（過保護）」を、適切なルールでコントロールしてあげるのが、今回紹介する3つのプロパティです。

—

CSSには、文字の折り返しを制御するプロパティがいくつかありますが、初学者がまず押さえておくべきは以下の3つです。

「どんな場所でもいいから、とにかく枠に収まってくれ！」という強引な手段です。
単語の途中で容赦なく改行します。日本語のような「どこで切ってもあまり問題ない」文章には適していますが、英語の文章だと単語がバラバラに切れるので、少し読みづらくなるのが難点です。

「基本は単語の切れ目を優先するけど、どうしようもなくなったら泣く泣く改行するよ」という、非常に賢く優しい設定です。
現代のWeb制作では、これが一番のおすすめです！

これは `overflow-wrap` の昔の名前（別名）です。古いブラウザに対応するために併記することもありますが、基本的には `overflow-wrap` を使えば今の現場ではバッチリです。

—

では、さっそくエディタを開いて試してみましょう。まずは「はみ出してしまう」悪い例と、それを解決するコードを並べてみますね。

どうですか？下の箱は、ちゃんと端っこで折り返されていますよね。

—

span {
display: inline-block; / インライン要素を「箱」として扱えるようにする /
width: 100%; / 親要素いっぱいに広げる /
}

これを加えるだけで、`` がただのテキストの塊から、しっかりとした「箱」に進化します。そうすれば、先ほどの改行ルールもより正確に効くようになりますよ。

—

Web制作は、ブラウザという「ちょっと不器用な相棒」に、CSSという言葉でルールを教えてあげる作業です。

最初は迷うかもしれませんが、まずはこの2つを使い分けてみてください。レイアウトが崩れても焦る必要はありません。「あ、ブラウザが困ってるんだな」と気づいて、CSSでそっと助けてあげればいいだけですから。

また何か小さな「困った！」があれば、いつでも聞きに来てくださいね。あなたのWeb制作ライフを応援しています！