ホームページにおいて改行の使い方はとっても大切
はい、今回はホームページ作成では誰もがお世話になっているbrタグのお話です。
このbrタグは言わずとしれた改行タグ。ホームページにおける文章は、あまり長文でダラダラと書き連ねるとユーザーにとっては読みづらいページになってしまいがちです。そんなときは適した位置に改行を入れていくことが大事。これだけでユーザーにとっての可読性は全然違ってきます。
しかしこのbrタグによる改行、「ONとOFFを使い分けたいな」ってときありません？
とくにレスポンシブデザインでホームページを作っているとき。パソコン画面で見たときの最適な改行位置と、モバイル画面で見たときの最適な改行位置って違うんですよねぇ。「パソコン画面だとこの改行があったほうが見栄えがいいのに、スマホで見ると この改行のせいでレイアウト崩れちゃう！」っていうパターン、けっこうあります。
パソコンでは改行したいけど、スマホでは改行したくない。どうしよう？ ・・・でもご安心ください。実はレスポンシブデザインにおけるこのbrタグの無効化、非常に簡単にできるんです！
brタグを簡単にCSSで無効にする方法
CSSを使えばbrタグはとっても簡単に無効化することができます。無効化の記述はこれだけ。
display: none;
めちゃくちゃ簡単ですね。
「display: none;」って、なんとなくそのオブジェクトを見えなくするっていうイメージがあったので、これで改行の無効化ができるのはちょっと意外。初めてこの方法を知った時には「え？マジでこれでいいの？」って感じでした。
実際にはこんな感じで運用すると楽ちん
常に有効化したい改行タグと、モバイル端末で見たときに無効化したい改行タグを使い分けて書くようにしましょう。
【常に有効化したい改行】
<br />
【幅800px以下の端末で見たときは無効化したい改行】
<br class=”mobile” />
【スタイルシートの記述】
@media screen and (max-width: 800px) {
br.mobile { display: none; }
}
このように書くことで、端末幅に合わせて有効な改行と、無効化する改行を使い分けることができます。
レスポンシブデザインでホームページを作る際にはかなり有効な豆知識です。記述も簡単ですしね♪ ぜひ活用くださいませー。
