【HTML入門】pタグbrタグで段落を表示してみよう【サンプルあり】
段落とは
例えば以下のような長い文章があったとします。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
特に区切りもなく、べた書きされていると読みづらいですね。
そこで段落を使ってみます。
親譲りの無鉄砲で小供の時から損ばかりしている。
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。
小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
（青空文庫より）
文章の区切れがよく分かるようになり、読みやすくなりました。
ブログなどを書く際には、さらに読みやすくなるように段落の中にも改行を設けます。
親譲りの無鉄砲で小供の時から損ばかりしている。
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
なぜそんな無闇をしたと聞く人があるかも知れぬ。
別段深い理由でもない。
新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。
小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
（青空文庫より）
1文単位での区切りが見えやすくなりました。
このような文章の区切りを段落、その中の文頭を左に持っていくことを改行と呼びます。
pタグを使おう
HTMLで段落を作るためには、pタグを利用します。
（pはparagraphの略です）
<p>これは一つの段落です。複数の文があっても一段落です。</p>
<p>これは二つ目の段落です。</p><p>から</p>の間に挟まれている文章が一段落としてみなされます。
また、段落の中に段落が存在することはないので、pタグを入れ子にすることはできません。
（文章を表示することはできますがメリットが無いので非推奨です）
<p>段落の中に<p>段落は作れない</p>です。</p>brタグを使おう
段落の中で改行させるには、brタグを利用します。
（brはbreakの略です）
<p>段落はここ→<br>で改行されます。</p>サンプル
上記のコードを実装すると、実際には以下Resultのように見えます。
See the Pen pタグbrタグで段落を表示してみよう by sonoha (@sonoha) on CodePen.
練習問題
- 指示通りに段落と改行を設定してみましょう。
ここをクリックすると編集できます↓
See the Pen pタグbrタグ練習問題 by sonoha (@sonoha) on CodePen.
-
前の記事
【HTML入門】hタグで見出しを表示してみよう【サンプルあり】 2020.02.01
-
次の記事
【HTML入門】HTMLの基本構造を覚えよう【初心者向け】 2020.04.25