株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • 今あるWebサイトを改善する⑩|CSSで長いURLのはみ出しを防ぐ!簡単な折り返し設定方法
2025年1月28日
今あるWebサイトを改善する⑩|CSSで長いURLのはみ出しを防ぐ!簡単な折り返し設定方法

この「今ある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がデザインを崩すのを防ぐだけでなく、ユーザーにとっても見やすいレイアウトを実現できます。ぜひ活用してみてください!

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする

  1. 今あるWebサイトを改善する