基本的な改行4選
改行について書いていきます。
改行する方法はいくつかあると思いますが今回はbrタグ、ブロック要素、インラインブロック要素、wbrダグで改行する4つの使用方法とそれぞれの使い所、メリット・デメリットを書いていきます。
brタグを使っての改行
〒xxx-xxxx 〇〇県〇〇町1-2 〇〇<br>
TEL:012-3456-7891
結果
〒xxx-xxxx 〇〇県〇〇町1-2 〇〇
TEL:012-3456-7891
使用方法
改行させたい位置に<br>を挿入するだけです。単独で使用するタグで、終了タグは必要ありません。
使い所
<br>タグで改行をするのはあくまでも意味があるところです。例えば例で出した住所と電話番号などそれぞれ役割を分けたい、などの時に使います。
しかし、変なとこで改行されてしまうからという見た目の理由で、文の改行に意味や役割がないところに<br>をつけるのは不適切です。
では見た目上改行したい時はどうするのか、次のタイトルで説明します。
メリット・デメリット
メリットとしてはcssを触ることなく、直接改行させたい位置に記述するだけなので楽です。
デメリットとしてはbrタグで改行した場合、文字サイズや画面幅関係なくbrタグの位置で必ず改行がされるので例えば画面幅が〇〇以下の時はここで改行させたいなどのときはメディアクエリを使うなどして調整する必要があり記述量が増えてしまいます。
display: block;を使っての改行
ぼくが６つのとき、よんだ本にすばらしい絵があった。<span class="newline">『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。</span>
.newline {
display: block;
}
結果
ぼくが６つのとき、よんだ本にすばらしい絵があった。
『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。
使用方法
改行させたい箇所にクラスを当て、ブロック要素にします。
ブロック要素にすると要素は縦に積まれるので、見た目上の改行ができます。見た目上改行したい時は改行したい箇所をブロック要素にしましょう。
使い所
<br>タグを使っての改行で話した、意味や役割はないけど見た目的に改行させたい時などに使えます。
メリット・デメリット
メリットとしてはレスポンシブデザインに対応しやすく、HTMLの構造と見た目のスタイルを分離できるのでセマンティックなHTMLを維持できます。
デメリットとしては要素をブロック要素にするために場合によってはクラス名を追加する必要があったり、画面幅によってはメディアクエリを使うなどして調整する必要があり記述量が増えてしまいます。
display: inline-block;を使っての改行
<span class="newline">コーヒーの香り、朝の目覚め。</span>
<span class="newline">夕焼け空、一日の終わり。</span>
<span class="newline">星空の下、願いを込めて。</span>
<span class="newline">雨上がりの虹、希望の光。</span>
.newline {
display: inline-block;
}
結果
コーヒーの香り、朝の目覚め。夕焼け空、一日の終わり。星空の下、願いを込めて。
雨上がりの虹、希望の光。
使用方法
改行させたい箇所にクラスを当て、インラインブロック要素にします。
インラインブロック要素にするとその要素が1行に収まらない場合のみ改行されます。つまり1行に収まる場合は改行されないということです。上記で説明しているdisplay: block;を使っての改行との一番の違いはここで、display: block;を使っての改行は1行に収まっても収まらなくても必ず改行されます。
この方法もdisplay: block;を使っての改行と同じく、見た目上の改行ができます。
使い所
<br>タグを使っての改行で話した、意味や役割はないけど見た目的に改行させたい時などに使えます。
メリット・デメリット
メリットとしてはレスポンシブデザインに対応しやすく、HTMLの構造と見た目のスタイルを分離できるのでセマンティックなHTMLを維持できます。
デメリットとしては要素をブロック要素にするために場合によってはクラス名を追加する必要があったり、画面幅によってはメディアクエリを使うなどして調整する必要があり記述量が増えてしまいます。
wbrタグを使った改行
<p class="word-break">
コーヒーの香り、朝の目覚め。<wbr>夕焼け空、一日の終わり。<wbr>星空の下、願いを込めて。<wbr>雨上がりの虹、希望の光。
</p>
.word-break {
word-break: keep-all;
}
結果
コーヒーの香り、朝の目覚め。夕焼け空、一日の終わり。星空の下、願いを込めて。
雨上がりの虹、希望の光。
使用方法
改行させたい位置に<wbr>を挿入するだけです。終了タグは必要ありません。
ただし日本語の場合は親要素にword-break: keep-allをつけないと文字間の折り返しが起こってしまいます。なので日本語の場合は<wbr>とword-break: keep-allを一緒に使いましょう。
使い所
長い単語やURLなどブラウザの横幅を超えてレイアウトを崩すのを防ぎたい場合に有効です。
ただこの方法は、強制的に改行されるわけではありません。あくまでもここで改行してもokだよという位置を示すものになり、一部ブラウザの判断に委ねられます。親要素の幅やフォントサイズなどに応じて、実際に改行されるかどうかが決まります。
メリット・デメリット
メリットとしては改行位置を細かく制御できるので、自然な改行を実現できます。
デメリットとしては不適切な位置に挿入すると、逆に読みづらくなってしまう可能性があります。
まとめ
今回は4つの方法を紹介しました。個人的にはdisplay: inline-block;を使っての改行がやりやすいなという感じです。
改行一つでもさまざまな方法がありますね。大事なのは見た目ではなくちゃんと役割を意識したマークアップをするということですね。
Discussion