【初心者でもわかる】HTML・CSSの[改行][文字送り][非改行]のマニュアル

どうも7noteです、改行させたい時、逆に改行させたくない時の書き方

「目指せ改行のスペシャリスト！」

webサイトでは必ずといっていいほど改行する場面が出てきます。
場所によっては改行させたくないところや、この単語だけは途中で改行させたくない等細かい仕様を決めることができます。

改行する方法、逆に改行させない方法などを解説していきます。

オーソドックスな改行： <br>

index.html

<p>本日は<br>
晴天なり</p>

-結果-

本日は
晴天なり。

最もシンプルな改行の方法です。brタグを使った改行。

<br> と<br />の違いは？

<br> はHTML、<br />はXHTMLの書き方の違いです。
現在はHTML5で<br>が推奨されています。ですが<br />と書いてもWEBサイトにはちゃんと反映されます。

適材適所で自動的に改行される：「文字送り」

index.html

<p>本日は晴天なり本日は晴天なり本日は晴天なり</p>

-結果-

本日は晴天なり本日は晴 |←（ここが要素の右端）
天なり本日は晴天なり

改行とは別物です。
改行は任意の場所で行われるのに対し、「文字送り」は要素の幅によって改行される位置が変わる。

---

〜ここから非改行の解説〜

文字送り(折返し)を禁止する方法: nowrap

index.html

<p class="nowrap">本日は晴天なり本日は晴天なり本日は晴天なり</p>

style.css

.nowrap {
  white-space: nowrap;
}

-結果-

これ単体ではあまり使う機会はありませんね。
overflow-x: auto;と組み合わせてこんなやつを作ったりするのに使えますね。

特定の文字の途中では文字送り(折返し)を禁止する： inline-block

index.html

<p>本日は晴天なり本日は晴天なり<span class="dib">本日は晴天なり</span></p>

style.css

.dib {
  display: inline-block;
}

-結果-

インラインブロック要素はインラインブロック要素内で改行されないようになります。
住所や名称など、途中で改行されると読みにくいものなどに入れておくと効果的です。

---

注意： エディタ上の改行は「改行」にはならない

index.html

<p>本日は
晴天なり</p>

-結果-

本日は 晴天なり。

**エディタ上の改行は、ブラウザ表示時には「改行」と認識されません。**エディタ上の改行はあくまでもエディタ上でしか反映されません。

それだけだったらいいのですが、エディタ上で不要な改行をした場合、ブラウザ表示時に余計な半角スペースを発生させてしまいます。
ブロック要素同士の間が改行されている場合は問題ないですが、インライン要素同士の間をエディタ上で改行した場合に発生します。

---

ブロック要素を横並びにして改行(文字送り)させる方法: flexbox

index.html

<div class="flex">
  <p>本日は晴天なり</p>
  <p>本日は晴天なり</p>
  <p>本日は晴天なり</p>
  <p>本日は晴天なり</p>
</div>

style.css

.flex {
  width: 200px;
  border: solid 1px #000;
  display: flex;   /* 子要素を横並びにする */
  justify-content: space-around;
  flex-wrap: wrap; /* 横一列で入らないなら文字送りならぬ要素送りをする */
}

p{
  width: 80px;
  border: solid 1px #AAA;
}

-結果-

ブロック要素を横並びにする方法はいくつかありますが、flexboxを使った方法を紹介。
display: flex;でブロック要素だろうと構わずすべて横並びにできます。さらにflex-wrap: wrap;を設定することで、一列で入り切らない分を次の行に送ってくれます。

ブログサイトなどで、カードの形をした記事見出し等を並べたりするのにも使えますし、googleの画像検索結果ページみたいな感じのデザインも作ることができます。（googleは実際はdisplay-inlineblockにして横並びさせているだけです。）

---

おまけ：PCだけ改行、スマホだけ改行する方法

pc専用・スマホ専用のクラスをそれぞれ用意して対応できます。
専用クラスについての記事も過去に書いてますのでよければ。

→【初心者でもわかる】PCとスマホで表示非表示を切り換える共通CSSを作ると効率UP！

index.html

<p>PCの時だけ改行されるよ。<br class="pcinline">PCの時だけ改行されるよ。<br class="pcinline">PCの時だけ改行されるよ。<br class="pcinline">PCの時だけ改行されるよ。<br class="pcinline">PCの時だけ改行されるよ。<br class="pcinline"><p>

style.css

.pcinline { display: inline; }
.spinline { display: none; }

@media screen and (max-width:768px) {
  .pcinline{ display: none; }
  .spinline{ display: inline; }
}

---

まとめ

・改行したい時　　　　→**<br>**
・文字送りしたい時　　→親要素の幅を超えたら自動で文字送りされる
・文字送りを禁止する　→**white-space: nowrap;**
・単語の途中で改行を禁止　→**inline-block**
・ブロック要素を横並びにして改行　→flexboxがオススメ
・エディタ上での改行　→余計な半角スペースが開く原因
・pcだけ、スマホだけで改行 →専用クラスで出し分ける

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ