【HTML5】p要素の使い方を覚えよう

p(Paragraph: ピー)要素は段落を意味します。

p要素の開始タグ終了タグの間にテキストを記述することで、ひとかたまりの文章(段落)を作成できます


<p>むかし、むかし、ある所におじいさんとおばあさんが住んでいました。</p>
<p>おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。</p>

むかし、むかし、ある所におじいさんとおばあさんが住んでいました。

おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。

br要素で改行する

段落の中で改行を行う場合はbr要素を使用します。


<p>むかし、むかし、ある所におじいさんとおばあさんが住んでいました。</p>
<p>おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。<br>おばあさんが川で洗濯をしていると大きな桃が流れてきました。</p>
        

むかし、むかし、ある所におじいさんとおばあさんが住んでいました。

おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると大きな桃が流れてきました。

a要素でリンクを作成する

文章内で他のページのリンクを設定したい場合はaタグを使用します。


<p>むかし、むかし、ある所に<a href="https://ja.wikipedia.org/wiki/おじいさん" target="_blank">おじいさん</a>と<a href="https://ja.wikipedia.org/wiki/おばあさん" target="_blank">おばあさん</a>が住んでいました。</p>
<p>おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。<br>おばあさんが川で洗濯をしていると大きな桃が流れてきました。</p>
        

むかし、むかし、ある所におじいさんおばあさんが住んでいました。

おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると大きな桃が流れてきました。

p要素を作成してみましょう

  • p要素を作成してみよう!
  • p要素の文章内で改行してみよう!
  • p要素の文章にリンクを設定してみよう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。