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] 横並び、flexboxの使い方

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

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[超初心者] CSSの書き方

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