ブレイクポイントで改行する方法

4233 ワード
CSS MediaQueries HTML HTML テキストリンク

対象

モバイルレイアウトにした際に改行が見づらい、、、
改行したい！そんな方が対象です！

前提知識

  • html, cssの基礎

実践

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div>
    <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります改行したい</p>
  </div>
</body>
</html>

とりあえず適当に書きます。
改行したいの部分で改行する感じです。

こちらPCレイアウト


モバイルレイアウト

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div>
    <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります<br>改行したい</p>
  </div>
</body>
</html>

こーするとPCでもモバイルでも改行されてしまいます。
ではPCでは改行せず、モバイル飲み改行したい場合はどうすれば良いのか？

style.css
.br {
  display: none;
}

@media (max-width: 480px) {
  .br {
    display: block;
  }
}

結論これだけです！