この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。

Webサイトを運営していると、長いURLやテキストリンクが原因でデザインが崩れてしまうことがあります。特に、長いリンクが画面の幅を超えてしまうと、サイドバーが画面外に流れたり、レイアウト全体が崩れたりして、スクロールバーが表示されることもあります。

そこで今回は、長いURLがデザインからはみ出さないように、CSSを使って簡単に折り返す方法をご紹介します。

まずはCSSで折り返し指定した場合と、してない場合を以下の［RunPen］を押してご覧ください。

上記のように、折り返し指定がないとピンクの枠から出てしまうのが分かります。

設定方法

設定方法は簡単です。CSSのファイルに任意のセレクター［HTMLに書かれているクラス名やタグ等］と［overflow-wrap： anywhere;］を書くだけです。

HTML

 <a class="break"> https://example.com/thisisaverylongurl </a>

CSS

.break［任意のセレクター］ { overflow-wrap: anywhere; }

［overflow-wrap: anywhere;］ は、折り返し指定に便利なプロパティです。長いURLがデザインを崩すのを防ぐだけでなく、ユーザーにとっても見やすいレイアウトを実現できます。ぜひ活用してみてください！