レスポンシブサイトの作成時に、文字を指定の位置で改行させる為に<br>で改行すると、PC表示では問題ありませんが、スマホ表示にすると不自然な改行になり、困ったことはないでしょうか?また、タイトルや見出しの文字を改行したくない位置で、改行されてしまうことは無いでしょうか?

そんな時は、今回ご紹介する方法を使うと、簡単に改行位置を指定することが出来ます。

index

brで改行する場合の問題点

まず最初にレスポンシブサイトで<br>で改行する場合の問題点について、再確認していきます。

レスポンシブサイトで<br>を入れて改行する場合、PC表示の時には適切であっても、スマホ表示の時に不自然になることがあります。

例えば、PC表示で下記の見出しにし、
を入れた場合

<h3>ミツバチが花の蜜を採集し、<br>巣の中で加工、貯蔵したものが蜂蜜です。</h3>

PC表示はもちろん問題はありません。

スマホ表示では、画面サイズで改行され、文の区切りが不自然です。

また、文字を中央揃えにしていると、より不自然になります。

PC表示がメインのサイトならあまり気にする必要はないかもしれませんが、レスポンシブサイトで<br>を使うと、デバイスに関係なく改行されてしまうので、あまり適切ではありません。ページの本文中に入れている<br>の場合は、文字が大きくないので、それほど気にならないかもしれませんが、文章の見出しやタイトル部分の目立つ文字に使う時には注意が必要です。

では次に、レスポンシブサイト向けに最適な改行位置にするには、どのようにすればいいのかをご紹介します。

CSSで改行位置を指定する方法

1. メディアクエリを使った改行指定

メディアクエリを使った改行指定を行うと、デバイスサイズに応じて細かい改行指定ができます。

(1)PCでは改行しないで、モバイルの時に改行位置を指定します。

//css

.sp_br {
   display: none;
}
@media screen and (max-width: 480px){
    .sp_br {
       display: block;/ *blockでもinlineでも可 */
    }
}

// html 

<h3 class="title">ミツバチが花の蜜を採集し、<br class="sp_br">巣の中で加工、貯蔵したものが蜂蜜です。</h3>

PC表示にすると、

スマホ表示にすると、

(2)PCでは改行して、モバイルの時に改行しない場合。

//css

.pc_br {
   display: block
}
@media screen and (max-width: 480px){
    .pc_br {
       display: none;
    }
}

// html 

<h3 class="title">ミツバチが花の蜜を採集し、<br class="pc_br">巣の中で加工、貯蔵したものが蜂蜜です。</h3>

PC表示にすると、

スマホ表示にすると、

2. インラインブロックを使った改行指定

display: inline-block;はinline要素のような表示ですが、要素の中身はblockで高さ・横幅などを指定できます。

使い方としては、改行したくない文字を<span>で囲むことで、改行が入らず、文字を横に並べることができます。

//css
h3 > span {
 display: inline-block;
}

//html
 <h3 class="title"><span>ミツバチが花の蜜を採集し、</span><span>巣の中で加工、</span><span>貯蔵したものが蜂蜜です。</span></h3>

スマホ表示にすると、

3. word-breakを使い、単語の途中で改行させない

1と2に比べると少しゆるい指定になりますが、文字を指定の位置で改行させるのではなく、単語の途中で改行させたくない場合は、word-break:keep-allが有効です。

下記のようにすると

//css
is-wbka{
word-break:keep-all;
}

//html
<h3 class="is-wbka">ミツバチが花の蜜を採集し、巣の中で加工、貯蔵したものが蜂蜜です。</h3>

スマホ表示ではこのようになります。

word-breakの注意点

word-break:keep-allを使うと、単語の途中で改行出来なくなりますが、下記のサイトで詳しい記載を見ると、

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

CJK (中国語、台湾語、日本語、韓国語) テキストの改行を許可しません。 CJK以外のテキストについては normal と同じ挙動となります。

word-break:keep-allはCJK以外のテキストには反映されません。英語の表記はもちろんですが、「-(ハイフン)」「/(スラッシュ)」などの直後で改行されることがあるので、注意してください。

例えば、下記のような型番の場合は途中で改行されてしまいます。

<h3 class="is-wbka">I-O DATA HDMI-SDカード/HDD保存 GV-HDREC </h3>

スマホ表示にすると、

つまりword-break:keep-allを使うと、指定のためのタグを入れる必要はなく、単語の途中で改行させないことができますが、上記の点があるので、完全には制御出来ないというご理解ください。

最後に

レスポンシブデザインでは、どのデバイスでもそれなりに最適に表示することを目指すものなので、改行を指定しないものですが、クライアントの要望でどうしても文字を改行したくないと言われた場合に、上記の方法をおすすめします。

前の記事 次の記事