改行と段落ついて学ぼう
段落（グループ）を作ってみよう
うさタブ
次は文章ごとにグループ・・・段落を使ってみるッピよ～
うさタブ
今度は<body></body> の中に、以下のタグを入れてみるッピ！
<p>Hello world</p>
<p>こんにちは</p>
<p>またね！</p>
<p>See you later</p>サンプルコード
<html>
<head></head>
<body>
<p>Hello world</p>
<p>こんにちは</p>
<p>またね！</p>
<p>See you later</p>
</body>
</html>
ユウキ
おお！ 文章がわかれてる！！
ユウキ
でもこれ<br />タグと何が違うんだ？
文章を区切るだけなら一緒だろ？？
うさタブ
ふふふ、それはッピね～
<br />はあくまで文章の改行、<p>は段落をつくるものゆえ、
こういうことがデキるッピ！
サンプルコード
<html>
<head></head>
<body>
<p style="background:#00FFFF;">Hello <br />world</p>
<p style="background:#00FF00;">こんにちは</p>
<p style="background:#FF00FF;">またね！</p>
<p style="background:#FFFF00;">See you later</p>
</body>
</html>ユウキ
スゲエエエエ！！ 背景の色が全く違う！！
ユウキ
あ！ わかった！
<br />は文章を区切るだけだけど、
<p>は文章のグループを作るから、こんな風に背景の色を変えたり、グループごとに変更を加えることができるんだな？！
うさタブ
そのとおりッピ！
ユウキくんは勘がいいッピネ～！
うさタブ
背景の色を変えたのは CSS という技術ッピ！
今回 CSS はやらないッピが、今度じっくり学ぶゆえ、楽しみにしてるッピよ～
解説：段落をつくるタグ <p>
うさタブ
今回は、文章のグループを作る・・・段落の作成に<p>タグを使ったッピ！
うさタブ
グループは
<p>~</p> でまとめることができるッピヨ～
ユウキ
<br />は文章を区切る
<p>は段落を作る
ちゃんと覚えたぜ～！
学習のまとめ
- <br /> で長い文章を区切って次の行に移れる
- <p> ~ </p> でコンテンツのブロック、段落を作れる
確認テスト
うさタブ
上手くできたッピか？
これからも色んなホームページの基礎解説をしていくッピ！
次回も楽しみにしているッピよ～～！
