webページの各コンテンツはそれぞれグループ分けして、改行や空白を付けて見やすく表示します。そのためにpタグを使用します。今までのソースコードで何気なく書いてたp要素にはこのような機能がついておりました。
試しにp要素を続けて使用して文章を書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>犬種人気ランキングL</title>
<meta charaset="utf-8">
<meta name="description" content="犬のペットとして人気のある種類のランキングを付けます。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>犬種人気ランキング</h1>
<p>犬の人気のある種類をランキング方式でお届けします。あなたの買っているペットは何位かな？</p>
<h2>犬の人気ランキング</h2>
<h3><strong>１位</strong>チワワ</h3>
<img src="images/076757.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;">
<p>昔CMでも話題になったチワワが第一位です。可愛いですもんね。人気の理由は割愛します。</p>
<p>ここでもう一つ段落を</p>
<h3><strong>２位</strong>トイプードル</h3>
<img src="images/2138128.jpg" alt="トイプードルの写真" title="トイプ" style="width: 200px;">
<p>ぬいぐるみみたいな可愛さですね。私も飼いたいです。人気の理由は割愛します。</p>
<h3><strong>３位</strong>ロングコートチワワ</h3>
<img src="images/2118049.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;">
<p>やっぱり可愛いですね。でもチワワに含めていいですよね。人気の理由はやっぱり割愛します。</p>
</body>
</html>
文章が段落で分けられているのがお分かりでしょうか。このように段落はpタグで囲むのが基本となってきますので、段落分けをきっちりやって表示しましょう。
img要素もpタグで囲む
先ほどまでの説明ですと文章だけをpタグで囲めば良いと思ってしまうかもしれませんが、段落を付けるのは文章や文字だけではありません。画像もれっきとした1つの段落と言えます。ですので、基本的に画像も段落とするためpタグを付けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>犬種人気ランキングL</title>
<meta charaset="utf-8">
<meta name="description" content="犬のペットとして人気のある種類のランキングを付けます。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>犬種人気ランキング</h1>
<p>犬の人気のある種類をランキング方式でお届けします。あなたの買っているペットは何位かな？</p>
<h2>犬の人気ランキング</h2>
<h3><strong>１位</strong>チワワ</h3>
<p><img src="images/076757.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;"></p>
<p>昔CMでも話題になったチワワが第一位です。可愛いですもんね。人気の理由は割愛します。</p>
<h3><strong>２位</strong>トイプードル</h3>
<p><img src="images/2138128.jpg" alt="トイプードルの写真" title="トイプ" style="width: 200px;"></p>
<p>ぬいぐるみみたいな可愛さですね。私も飼いたいです。人気の理由は割愛します。</p>
<h3><strong>３位</strong>ロングコートチワワ</h3>
<p><img src="images/2118049.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;"></p>
<p>やっぱり可愛いですね。でもチワワに含めていいですよね。人気の理由はやっぱり割愛します。</p>
</body>
</html>
再読み込みして表示してみても変化が無いと感じるかもしれませんが、中身はしっかりと画像も段落として認識されるので、無くても良いんじゃ無いかと思っても、きちんとした作法でwebページを作りましょう。
まとめ
- pタグを付けて段落として文章を改行、空白を付け加えて見やすくする。
- 画像もpタグで囲んで段落とする
短い内容となりましたが、htmlの基本となってくるのでしっかりと覚えておきましょう。
コメント