Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

【コピペで簡単】<br>タグをPCまたはスマホのときだけ反映しないようにする方法

テキストを中央揃えにしたとき、スマホで見たときにちょうど良いところへ改行を入れて、綺麗に読めるように。

でもそれだとPCでは改行が多すぎる・・・なんてとき、ありませんか?

またはその逆で、PCでは良い位置で改行設定をしたけれど、スマホでは適切な位置にならない・・・。

今回はそんなPCとスマホで起こりうる改行問題を解決するための方法を紹介します。

CSSコードをコピペで簡単に実装できるので、必要に応じて利用してみてください。

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

br改行有無を実装した結果のイメージ

概要としては、PC or スマホ端末で指定した<br>タグが改行として反映しないようcssを仕込んでおく形。

文字だけだとイメージが伝わりづらいかと思い、横100%の画像の下へテキストを入力するパターンのイメージを作成しました。

PCでのイメージは今回改行なしタイプ

スマホでのイメージは改行を任意の場所に入れたタイプ

htmlはbrタグにclass指定を入れておく

<br class="nobr">

<br>タグに対して1つclassを指定しました。

すべての<br>へ適用させるわけにもいかないと思うので、必要な<br>にだけ適用させるようclassを指定してあげます。

上記プレビュー画像で実際のhtmlはこんな感じ。

<p>テキスト情報はPCとスマホで<br class="nobr">改行される位置が違うので、<br class="nobr">スマホ表示をメインにする場合は<br class="nobr">PCでの見栄えが気になる。</p>

スマホで見たときに綺麗に見えるよう改行を3箇所入れました。

コピペするCSS

@media screen and (min-width:767px){
br.nobr{display:contents;}
}

CSSはこんな感じ。

<br>に「display: contents;」を指定することで改行が消えます。

そしてそれをメディアクエリ(@media)で指定することにより、端末の横幅が767pxよりも大きくなったとき<br class=”nobr”>を指定した改行が反映しないようになる。(主にPCで改行したくないとき向け)

もちろん「min-width:767px」のところを「max-width:767px」にすれば、767pxよりも小さくなったときに効果が発動します。(主にスマホで改行したくないとき向け)

逆にスマホのときだけ<br>の改行を反映したくないときも簡単ですね。

<br>タグをPCまたはスマホのときだけ反映しないようにする方法についてまとめ

cssに仕込んでおけば、端末のサイズによって良い感じの改行ができる。

センタリングを基調にしたコンテンツだと便利に使えそう。

文章コンテンツというより、画像メインに注釈を入れるようなコンテンツで主に利用できそうなテクニックですね。

 

良きWEBデザインをっ!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ