お気軽にご相談ください
050-8885-7511
全国対応・平日10時〜18時

意外に知られていないレスポンシブデザインでの改行位置の変更方法

代表取締役

児島 大

レスポンシブデザインのWebサイトを制作していると、パソコンでの閲覧時には適度に改行をはさみたいが、スマートフォンで閲覧したときに改行ばかりになってしまって読みづらいということになってしまいます。
今回の記事はそんなお悩みを一発解決してしまう方法を解説します。

これは見出しや段落を中央寄せして適度に改行をつかったデザイン例です。

<h2>多様なクリエイティブを通して<br>ICT戦略をお手伝いいたします。</h2>
<p>株式会社296(ツクル)は、集客や売上に貢献できる<br>Webサイト制作やコンテンツ企画、映像制作、グラフィック制作、運用マネジメントを提供するとともに、<br>多様化するICTの利活用についてもコンサルティングいたします。</p>
h2 {
	text-align: center;
}
p {
	text-align: center;
}

パソコンのモニター画面では程よく改行しているのでとても読みやすいのですが、このページをスマートフォンで見てみると改行の位置の影響で非常にぎこちないデザインになってしまいます。
スマートフォンの画面の横幅は機種により様々ですので、意図した位置で改行が反映されて画面に収まることもあれば、下のように1文字だけ溢れてしまうということもでてきます。さらに中央寄せをしているので、非常に読みづらい文章にになってしまいます。

スマートフォンではテキストは左寄せで改行をしないほうが読みやすい

スマートフォンは画面の横幅が機種によって様々なので、改行の可能性のある長さのテキストは左寄せにしてしまうのがレスポンシブデザインでは理想です。

見比べていただければわかりますが、スマートフォンの画面では、テキストを左寄せして改行をしないほうが読みやすくなります。

パソコン版では改行し、スマートフォン版では改行しないように実装する方法

意外に知られていないのですが、<br>タグはCSSのdisplayプロパティで非表示にすることができます。
メディアクエリなどで画面幅で条件分岐させて、スマートフォンでの表示時のみ<br>タグを非表示にして改行をしないというように書きましょう。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

資料準備中…

お電話でのお問い合わせはこちら

  • ※電話番号はおかけ間違いのないようご注意ください。
  • ※セールス目的のお電話はお断りしております。