htmlで文章を書く際に<p><div><span>を使い分けられたら、htmlの半分以上を制したと言えるでしょうネ。
頻繁に使うこの３個のタグ<p><div><span>を完全に理解しましょう。
それぞれのタグの意味と特徴です。
| タグ | 意味 | html 詳細 |
| <p> | 「段落」 | ブロック要素（前後に改行が入る） 終了タグの後ろにさらに空白の行ができます |
| <div> | 特に意味はなく範囲を示す空き箱のようなもの | ブロック要素（前後に改行が入る） 終了タグの後ろに空白の行はできない |
| <span> | 特に意味はなく範囲を示す | インライン要素（前後に改行が入らない） <p><div>などのブロック要素の中で使用します |
<p><div><span>の違いは上の表の通りですが、
大きな違いは、<p><div>は、ブロック要素
<span>はインライン要素だということ。
ブロック要素には改行が入って、インライン要素は改行しないと覚えておきましょう。改行しないので文章の途中で使用します。
<p>と<div>は、ほとんどのブラウザで見た目は同じに表示されます。
????????
<p>は、段落を示すタグ
<p>は、段落を示すタグなので、<p>~</p>に囲まれた文章は一つの段落と見なされます。段落なのでテーブルなどは挟めません。<div>要素も挟めません。
<div>は、テーブルや<p>要素を挟めます。
htmlで<p><div>にスタイルを設定してみる
<p>要素にスタイルを設定（文字色を変えてみます）
<p style="color:#ff4500;">HTMLで<p><div>の違いをマスターする</p> <p style="color:#228b22;">HTMLで<p><div>の違いをマスターする</p>
▼ウェブでの実際の見え方です。<p>~</p>は段落ごとに空白の行ができます。
HTMLでP要素のスタイルを変えてみよう
HTMLでP要素のスタイルを変えてみよう
<div>要素にスタイルを設定（文字色を変えてみます）
<div style="color:#ff4500;">こちらはHTMLのdiv要素で変えてみました</div> <div style="color:#228b22;">こちらはHTMLのdiv要素で変えてみました</div> <div style="color:#800080;">こちらはHTMLのdiv要素で変えてみました</div>
▼ウェブでの実際の見え方です。<div>~</div>は改行するだけで空白の行はできません。
文章の途中で<span>を使ってみる
<span>は、<p><div>などのブロック要素の中で使用します。
<p>HTMLでP要素の<span style="color:#ff4500;">スタイル</span>を変えてみよう</p> <p style="color:#ff4500;">HTMLでP要素の<span style="color:#003366;">スタイル</span>を変えてみよう</p> <div style="color:#228b22;">HTMLでdiv要素の<span style="color:#003366;"スタイル</span>を変えてみよう</div>
▼ウェブでの実際の見え方です。
HTMLでP要素のスタイルを変えてみよう
HTMLでP要素のスタイルを変えてみよう
ブロック要素とインライン要素についてのまとめ
要素はブロック要素 と インライン要素 に大別されます。<div> <p> などのブロック要素は 、ほとんどのブラウザでブロック要素の前後に改行が入ります。
<span><strong>などのインライン要素は改行しないので、ブロック要素の中で使用します。
| ブロック要素の代表的なもの （前後に改行が入る） |
・div ・p（段落） ・h1 ～ h6（見出し） |
| インライン要素の代表的なもの （前後に改行が入らない） |
・span ・strong（強調） ・img（画像） |
インライン要素は改行しないので、当たり前ですが横に並びます。<img>画像も横並びができます。
????????
外部スタイルシートに設定するともっと簡単
これまでの説明では、htmlに直接スタイルを記述しましたが、<p><div><span>のデザインをあらかじめスタイルシートに設定しておけば、文字色・文字のサイズ・背景色など簡単に変えることができます。
さらに、htmlもスッキリするという利点もあります。
例として、「sample」 というクラス名でスタイルシートに下記のように記述してみます。
css
.sample {
color:#ee0000; /*文字色*/
font-size: 13px; /*文字のサイズ*/
}
html
<div class="sample">HTMLでdiv要素のスタイルを変えてみよう</div>
<p class="sample">HTMLでdiv要素のスタイルを変えてみよう</p>
HTMLでdiv要素のスタイルを変えてみよう
<p>HTMLでdiv要素の<span class="sample">スタイル</span>を変えてみよう</p>
HTMLでdiv要素のスタイルを変えてみよう
いかがでしょうか？<p> <div> <span>の違いをマスターして見やすいホームページを作成して下さい。
ホームページ作り初心者の方の参考になればうれしいです。
????????
