文章構成に役立つnowrapとwbrタグの合わせ技

Webデザインにおいて、テキストは文中改行(<br>)せずに流し込み、ブロック幅での自然改行に委ねるのが美しいとされていますが、そのうえでも文章の区切りのいい位置で改行させたいケースはあると思います。

そこで役立つのか下記のような手法です。

<p style="white-space:nowrap">清秋の候、<wbr>皆様におかれましては<wbr>益々ご健勝のことと<wbr>お慶び申し上げます。</p>

「white-space:nowrap」は自然改行を発生させないCSSプロパティです。
これを入れるとテキストがブロック幅を突き抜けてしまうのですが、文章内の区切りの良い箇所に<wbr>タグを入れています。

<wbr>タグは「改行してもよい」という意味合いのタグで、メールアドレスなど長い半角英数の途中で自然改行を発生させる時のほか、こうしてnowrapの中でも使うことができます。

上記のコードで狭いブロック幅であれば必ず下記のような構成になります。

清秋の候、
皆様におかれましては
益々ご健勝のことと
お慶び申し上げます。

ただし当然ながら、最低の文字幅よりさらに狭いブロックでは文字が突き抜けてしまうので、使いどころの見極めは必要です。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様