【CSS】スマホの時だけテキストの改行をする方法

概要

ホームページを作成する時、パソコン画面だけではなく、スマホ画面のことも考えてレスポンシブ対応が必須になってきています。

パソコン画面ではテキストを改行しなくて良くても、スマホ画面では改行したいという場合があると思います。

CSSだけで簡単に対応をすることができるので、今回はそれを実現する方法です。

スマホの時だけテキストの改行をする方法

スマホ画面の時だけテキストの改行をする場合の方法を説明します。

ここでのスマホ画面は画面幅が520px以下の場合とします。

See the Pen スマホの時だけ改行をする by take it easy (@take-it-easy) on CodePen.

HTML

<p>スマホの場合(幅が520px以下)は、<br class="sp-br">改行されます。</p>

改行を入れたい場所に「br」タグを挿入します。ポイントは、class属性を設定することです。ここでは「sp-br」というクラス名を設定しています。

CSS

/**
 * パソコン画面では改行をしない
 */
.sp-br {
  display: none;
}

/**
 * スマホ画面（520px以下）の場合
 */
@media screen and (max-width: 520px) {
  /**
   * 改行をする
   */
  .sp-br {
    display: block;
  }
}

5行目で、パソコン画面（幅が521px以上）の場合は改行をしないようにしています。

11行目に、スマホ画面（520px以下）の場合のメディアクエリを追加します。

16行目で、スマホ画面（幅が520px以下）の場合は改行を行うようにしています。

スマホとタブレットでテキストの改行を分ける方法

最近では、タブレットや２つ折りのスマートフォンも普及してきているので多くの画面サイズに対応が必要になっています。

そこで今回は、スマホとタブレットでテキストの改行を分ける方法を説明します。

ここでのタブレット画面は画面幅が960px以下、スマホ画面は画面幅が520px以下の場合とします。

See the Pen スマホ・タブレットで改行をする by take it easy (@take-it-easy) on CodePen.

HTML

<p>タブレットの場合(幅が960px以下)は、<br class="sp-br-960">改行されます。</p>
<p>スマホの場合(幅が520px以下)は、<br class="sp-br-520">改行されます。</p>

改行を入れたい場所に「br」タグを挿入します。class属性を設定するのですが、タブレットの場合は「sp-br-960」、スマホの場合は「sp-br-520」というクラス名を設定します。

CSS

/**
 * パソコン画面では改行をしない
 */
.sp-br-960,
.sp-br-520 {
  display: none;
}

/**
 * タブレット画面（960px以下）の場合
 */
@media screen and (max-width: 960px) {
  /**
   * 改行をする
   */
  .sp-br-960 {
    display: block;
  }
}

/**
 * スマホ画面（520px以下）の場合
 */
@media screen and (max-width: 520px) {
  /**
   * 改行をする
   */
  .sp-br-520 {
    display: block;
  }
}

6行目で、パソコン画面（幅が521px以上）の場合は改行をしないようにしています。

12行目に、タブレット画面（960px以下）の場合のメディアクエリを追加します。

17行目で、タブレット画面（幅が960px以下）の場合は改行を行うようにしています。

24行目に、スマホ画面（520px以下）の場合のメディアクエリを追加します。

29行目で、スマホ画面（幅が520px以下）の場合は改行を行うようにしています。

最後に

レスポンシブ対応は今や必須です。少しでも使いやすくみやすいサイト作りをしましょう！！