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] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

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

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

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …