2022.7.5｜コーディング

レスポンシブWebデザインでスマホ時のみ改行「br」タグを無効化する方法

レスポンシブWebデザインでスマホ時のみ改行「br」タグを無効化する方法

レスポンシブWebデザインで制作したWebサイトでは、横幅サイズが異なるためPCサイトの場合は正しく文章の改行が出来ていてもスマートフォンサイトの場合、間違った位置で改行が起きてしまう場合があります。

今回は、レスポンシブWebデザインでスマホ時のみ改行「br」タグを無効にする方法を解説します。

本記事の内容

レスポンシブWebデザインでスマホ時のみ改行「br」タグを無効化する方法

レスポンシブWebデザインでは、PCサイトに合わせて記述したHTMLのため、スマートフォンサイトで閲覧すると文章が間違った改行がされてしまう場合があります。文章の改行には「br」タグを利用しますが、スマートフォンサイトで間違った改行が起きなくするため、スマートフォンサイトの場合に改行タグで利用する「br」タグを無効化することで実装することができます。
レスポンシブWebデザインでスマホ時のみ改行「br」タグを無効にする場合は、CSSにメディアクエリ「@media」を利用して記述する必要があります。「br」タグを無効化する場合は、「display」プロバティに「none」要素を記述することで無効化できます。
また、有効化する場合は、「display」プロバティに「inline」要素を記述することで有効化されます。

htmlコード
<!DOCTYPE html>
<html>

　<head>
　HTMLドキュメント情報
　</head>

　<body>
　<p>レスポンシブWebデザイン対応の<br>文章です。</p>
　</body>

</html>
cssコード（無効化）
@media screen and (max-width: 767px) {
  br {
    display: none;
  }
}
cssコード（有効化）
@media screen and (max-width: 767px) {
  br {
    display: inline;
  }
}

まとめ

レスポンシブWebデザインでは、PCサイトとスマートフォンサイトの見え方が異なるので、ユーザービリティの向上するにはこのような細かい施策を行う事で高まります。スマートフォンユーザーが増加する中、訪問ユーザーにとって文章を読みやすくすることも大事です。

«
»

関連記事