「CSSを使った改行のルールについて知りたいな」
「<br>タグじゃなくて、CSSを使って改行とかできないかな」
このように思ったことはありませんか？
実はHTMLタグの<br>タグを使わずに、CSSだけで同じような改行操作をすることが可能なんです！
<br>タグを使わないから後からレイアウト変更する時も、CSSだけを調整すればいいのでとてもかんたん。いくつかCSSの改行ルールが存在するので、この記事で詳しく解説していきますね。
- CSSを使って改行をさせたい or させたくない
- CSSの改行ルールを知ってサイト制作を効率化したい
こういった方はぜひ参考にしていただけるとうれしいです。
【CSSの改行ルール】サイト制作を効率化しよう
サイト制作を快適に進めるため、改行ルールというものを理解しておきましょう！
改行ルールとは、その名前の通りコードを記述して改行する際に大切なルールです。「インデントマナー」とも呼ばれ、大多数のプログラマーは活用していますので覚えておきましょう。
これを知らないと、サイト制作をしていくときに
（あれ、変なところで改行しちゃった…）
という事態に陥ります。
本記事で改行ルールをしっかりと理解して気持ちの良いサイト制作を行いましょう！
「white-space」を使って改行しよう！
「white-space」というパラメータを使用すれば、”ボックスの左に行ったら改行する“のようなことがカンタンにできます！
基本の形はこのような感じですね。
|
1 2 3 |
.text{ white-space:[値]; } |
この値に「normal」・「pre」・「nowrap」・「pre-wrap」・「pre-line」の５つを使用します。
では、１つずつ解説していきましょう！
normalの動作
“normal” を使用することによって、複数の半角スペース・TAB・改行を半角スペース１つ分として表示します。
これは文章が枠の端に到達したときに改行します。一般的な動作をすることがわかりますね。
preの動作
“pre” を使用することによって、半角スペース・TAB・改行をそのまま表示します。
文章が枠の端に到達しても改行されないため、そのまま表示したい方向けですね。
nowrapの動作
“nowrap” を使用することによって、複数の半角スペース・TAB・改行を半角スペース１つ分として表示します。
文章が枠の端に到達しても改行されないという特徴があり、normalとpreの動作を行う形です。
pre-wrapの動作
“pre-wrap” を使用することによって、半角スペース・TAB・改行をそのまま表示します。
文章が枠の端に到達したときに改行するという特徴があり、nowrapと逆の動作を行うことになります。
pre-lineの動作
“pre-line” を使用することによって、複数の半角スペース・TAB・改行を半角スペース１つ分として表示します。
文章が枠の端に到達したときに改行するという特徴と、ソース内も改行されるという特別な動作を行います。
「line-break」を使って禁則処理をしよう！
「line-break」というパラメータを使用すれば、”禁則処理“がカンタンにできます！
禁則処理の有り無しはこのような感じですね。
禁則処理なし
明日の6時に起きて友人の「マコちゃん
」と東京に行くので、今日は早く寝ます！
禁則処理あり
明日の6時に起きて友人の「マコちゃん」
と東京に行くので、今日は早く寝ま
す！
つまりは文頭・文末に「!」・「？」・「、」・「。」などの約物を持ってこない設定です。
これを使用することで綺麗に分を処理でき、ユーザーにも読まれやすくなります。
基本の形はこのような感じです。
|
1 2 3 |
.test{ line-break: [値]; } |
この値に「auto」・「loose」・「normal」・「strict」の4つを使用します。
では、１つずつ解説していきましょう！
autoの動作
autoは禁則処理を行わない、いわば初期値となっています。
looseの動作
最低限の禁則処理を行います。
normalの動作
基本的な禁則処理を行います。
「々」・「…」・「:」・「;」・「!」・「?」などの記号が行頭に送られなくなります。
strictの動作
“normal” より細かく禁則処理を行います。
「ｱｲｳｴｵ」のようなカナ文字・「～」・「-」などの記号が行頭に送られなくなります。
「word-wrap」を使って改行しよう！
「word-wrap」というパラメータを使用すれば、”英単語の途中でも改行”ができるようになります。
用途はあまりありませんが、いざという時のために覚えておいてのいいかもしれませんね！
基本の形はこのような感じです。
|
1 2 3 |
.test{ word-wrap: [値]; } |
この値に「normal」・「break-word」の2つを使用します。
では、１つずつ解説していきましょう！
normalの動作
normalは英単語の途中でも改行を行わない、いわば初期値となっています。
break-word
break-wordを使用することによって、単語の途中でも改行することができます。
CSS改行ルールを活用してできること
改行ルールについては説明した通り、コードを記述するだけで改行がラクになり見やすさも向上します！
では、実際にどんな変化が起こるかを説明していきましょう！
文章もコードもスッキリできる！
改行ルールの中に、「pre-line」というのがありました。
「pre-line」を使用すると文章を綺麗に見せることができ、サイトのイメージが良くなります。それと同時にコードを編集する際にも見やすくなり、デザインの編集がしやすくなります。
<br>で改行をするよりもCSSでカンタンに編集できるようになりましょう！
禁則処理でより見やすくできる！
文章もコードもスッキリさせたのはいいですが、文章を改行したときに「!」や「？」が文頭に来たら見た目が悪く感じます。
「line-break」を使用すると文章の文頭・文末に記号が来るのを避けることができ、文章を読んでいて違和感を感じることが無くなります。文章やコードをスッキリさせたのなら、一緒に読みやすさも向上させましょう！
CSSでの改行はメリットがあるの？
なぜCSSで改行をしたほうがいいのかと言いますと、<br>タグだとデバイスによって字崩れすることがでてくるからです。
実際にあった事例だとこのような感じです。
～パソコンでの見え方～
東京の今日の天気は今週で１番の晴れ模様で、<br/>
青空が輝いています！
～スマホでの見え方～
東京の今日の天気は今週で１番
の晴れ模様で、<br/>
青空が輝いています！
「晴れ模様で、」の後はパソコンだと綺麗に読点で改行することができていますが、スマホだと（なんでそこで改行しているんだよ…）と思われてしまいます。
そのようなことを防止するためにCSSの改行ルールを活用するメリットがあります！
このような場合は「pre-line」を使うと綺麗に改行できますね。用途に合った改行ルールを活用し、見やすく、デバッグのしやすいサイト制作を行っていきましょう！
まだ<br>タグを使っているようでしたら、ぜひともこの機会に改行ルールをご活用ください！
まとめ
いかがでしたか？
この記事では「CSSの改行ルール」について解説してみました。
CSSをうまく活用すると、HTMLの<br>タグを使わなくても改行操作をすることができます。
あとからサイトのレイアウト変更をする際、CSSだけを修正すればいいので手間が少なくなり効率よくサイト制作をすることができますね。
HTMLで<br>タグを使ってもいいのですが、CSSでレイアウトを変更するのであればCSSで完結させた方が効率的です。仮にCSSでエラーがあれば、レイアウトが大きく変わってしまいますしね。
またどうしても改行させたくない場合にも、CSSの改行ルールを覚えていれば改行させずに表示させることができますので、しっかりと覚えておいてくださいね。
この記事を参考に、あなたのサイト制作が効率よくなるとうれしく思います。
