HTML の改行<br>タグをモバイル端末に合わせて CSS で無効化/有効化する方法

改行<br>タグとは

<br>タグは、改行を入れるのに使います。「br」というのは「Break(改行)」の略で、テキストや画像をブラウザ表示で改行させたいときに HTML に記述します。

たとえば詩のように、ひと続きの文章の途中に改行を入れる必要があるときには<br>を使います。しかし、住所フォームの入力項目のようにデザイン上の理由で<br>を使うことは適当ではありません。そういう場合には、それぞれの入力項目を<p>…</p>で囲むことが推奨されています。

4.5 Text-level semantics — HTML5

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses. (br 要素は、詩や住所のように、実際にコンテンツの一部である改行のためだけに使用しなければなりません)

デバイスによって有効・無効を切り替える

PC 表示とモバイル端末で表示を変えたいときなどにも便利です。当ブログでは、改行しないと文字が収まらないので、そうする必要がありました。

当ブログのサイト名で PC 表示は以下のようになっています。

サイトロゴ【PC表示】

一方、モバイル端末では、文中の改行を無効化しています。

サイトロゴ【モバイル端末】

このように、ある場合には文章の改行をさせないで、別の場合には改行を有効化させたいときにはどうすればいいか。すこし悩みましたが意外と単純な方法でした。

以下のように、スタイルシートで指定するだけです。

br { display:none; }

これだけで<br>タグを無効化することができます。

具体例

たとえば、

のように記述すると、

こんにちは。
今日はいい天気ですね。
それではまた!

とブラウザでは表示されます。そこで<br>タグを無効化するために、

のように本文中<p>…</p>内にある<br>タグの効果を消してしまう指定をすると、

こんにちは。今日はいい天気ですね。それではまた!

というように、改行なしのひと続きの文章になります。さらに、これをまた改行ありに戻したい場合には、

としてインライン要素にしてしまいます。これで最初の表示に戻りました。

簡単ですね。

レスポンシブ Web デザインでの利用

もしレスポンシブ Web デザインによるブレイクポイントの切り替えを行うのであれば、CSS3 のメディアクエリを使用します。

これは横幅が 640px 以上になったら改行を復活させるようしています。

レスポンシブ Web デザインについては、以下の書籍を参考にしてください。

関連記事

Google AdSense の住所(PIN)の確認手続き

Google AdSense で一定額の収益を上げると、ホーム画面でつぎのような通知が表示されます。 お客様の住所の確認が完了していないため、お客様のお支払いは現在保留中となっています。PINが郵送で届き次第、ここをクリックして住所の確認手…

はてなブログのサイトマップを送信してみた

Googleウェブマスターツールに「はてなブログ」のサイトマップを追加してみました。 サイトマップそのものは、たとえばサイトマップを作成-自動生成ツール「sitemap.xml Editor」というサイトでカンタンに作ることはできるのですが…

WordPress 初心者が「wpX レンタルサーバー」へ移転するときに参照するマニュアルの補足事項

「wpX レンタルサーバー」へ移転してみました。そこで、サーバー移転の初心者である自分がつまずいてしまった点を書いておきます。自分の失敗が、これからサーバー移転を考えている人に役立てば幸いです。 ちなみに以下の内容はレンタルサーバー側の問題…