当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】文章の段落・区切り・改行の使い方

アイキャッチ画像
みきてぃ東西線
口コミ用キャラクターアイコン

HTMLで文章を書きたい!だけど、段落はどうやったら作ればいいの?

口コミ用キャラクターアイコン

文章と文章に区切りを付けたいけど、どうすればいいの?

口コミ用キャラクターアイコン

HTMLで文章を改行する方法を教えて!

今回は「HTMLタグで文章の段落・区切り・改行する方法」について、初心者でも分かりやすく解説していきます。

htmlタグ概要
pタグ1つの文章の段落であることを示すタグ
hrタグ段落と段落の間に区切りをつけるタグ
brタグ文章を改行するためのタグ

pタグ:段落を作る

1<p>ここにテキストが入ります。</p>

pタグとは、その名の通り文章の段落を示すためのタグのことを表します。

HTML上で文章を書く場合は、必ずpタグが使われます。

サンプルコード

1<p>ここにテキスト1が入ります。</p>
2<p>ここにテキスト2が入ります。</p>
3<p>ここにテキスト3が入ります。</p>

▼ブラウザでは以下のように表示されます。

HTML pタグの使い方

hrタグ:段落と段落の間に区切りをつける

1<hr>

hrタグとは、段落と段落との間に区切りをつけるためのタグです。主に冒頭と本題、またはテーマごとに区切る場合は、hrタグが使われることがあります。

サンプルコード

1<p>ここにテキスト1が入ります。</p>
2<p>ここにテキスト2が入ります。</p>
3<hr>
4<p>ここにテキスト3が入ります。</p>
5<p>ここにテキスト4が入ります。</p>

▼ブラウザでは以下のように表示されます。

HTML hrタグの使い方

brタグ:文章を改行する

1<br>

brタグとは、文章を改行するためのタグです。

注意点

デザインや余白を作るためのタグではないので、2回以上連続でbrタグを使って改行してはいけません。

文章と文章との間に余白スペースを作りたい場合は、CSSのmarginプロパティ、もしくはpaddingプロパティを使いましょう。

サンプルコード

1<p>これはサンプルテキストです。<br>
2brタグを使うと、文章が改行されます。</p>
3<p>余白スペースを取る場合は、CSSのmarginプロパティか、paddingプロパティを使います。</p>

▼ブラウザでは以下のように表示されます。

HTML brタグの使い方

まとめ

というわけで、今回は「HTMLタグで文章の段落・区切り・改行する方法」についてについて解説しました。

最後にもう一度、pタグ・hrタグ・brタグについて簡単にまとめてみました。

htmlタグ概要
pタグ1つの文章の段落であることを示すタグ
hrタグ段落と段落の間に区切りをつけるタグ
brタグ文章を改行するためのタグ

いずれも基本的によく使われるタグですので、正しい使い方をマスターしていきましょう。

特にbrタグは「余白を作るためのタグ」ではなく、「文章を改行するためのタグ」ですので、brタグを使う場合は十分注意しておきましょう。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました