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

レスポンシブデザインの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でご用意しております。社内での検討時などにご利用ください。

ダウンロードする

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

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。