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] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[CSS] CSSでチェックマークを作る方法

どうも、べ〜やんです。 今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。 リストなどのデザインのバリエーションを増やすのに便利です。 チェックマーク リストなどによく使われるチェック …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

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

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