CODING

HTMLの改行方法

投稿日:


どうも、べ〜やんです。

今回はHTML5で改行する方法を紹介します。





タグが必要

HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。

<p>HTML5で改行するためには
普段文章を書いている感覚と同じように
Enterで改行はできません。</p>

HTML5で改行するためには 普段文章を書いている感覚と同じように Enterで改行はできません。


<br>

<br>タグを使うと改行することができます。<br>タグはBReak(改行)の略です。

<br>タグには終了タグはありません。

See the Pen NWWdeQx by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。

注意点

デバイスの違い

<br>タグは文章の改行の部分を決定する便利なタグですが、どの部分で改行する方が読みやすいのか、どの部分で改行する方が綺麗に見えるかはデバイスによって違います。

パソコンの画面で見て読みやすい改行でもスマートフォンで見ると不自然で読みにくい改行になってしまう可能性などがあるので<br>タグを多様するのはおすすめできません。


行間

行間をあけるために連続で<br>タグを使ってレイアウトするのはよくありません。

See the Pen GRRrPab by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。

このような時には、CSSを使ってレイアウトするようにしましょう。


<p>

<p>タグはParagraphの略で段落を意味するタグです。

<p></p>で囲んだ部分をひとつの段落とします。

<br>タグと<p>タグは全く同じように改行される訳ではありませんので、細かい調整はCSSを使って調整してみてください。

See the Pen WNNRLYQ by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。



おわりに


今回はHTML5で改行する方法を紹介しました。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …