pとdivの違い

サイトは基本的にHTMLタグを記述して作っていきます。

最初は訳がわからず、あんちょこ片手に頑張ることになると思いますが、
ある程度こなしていくと大体分かってくるものです。
大概は、はさめばOKなので少ない英単語を覚える要領でしょうか?

私も最初はかなり苦労しましたが、
タグの意味とスペルも大体覚えることが出来てきました。

そんな当時、疑問に思ったのがdivとp。

正直、違いがぜんぜん分かりませんでした。
なのでいまさらなんですが、ここでなんとなく書いておきます。

  • <p>:ひとつの段落であることを表す際に使用。
  • <div>:ひとかたまりの範囲として定義する際に使用。
  • ウー無!!
    いまいち説明文だけでは分かりませんねー。

    普通に使っている分には、おそらく違いが分からないくらいなので、
    どっちを使ったからといって、特に問題は起きないのではないでしょうか?

    <p>と<div>の目立った違いは2つ

    目だった違いは2つあります。

    <p>は隙間が開く

    1つ目は、隙間です。
    これはほんのちょっとの差ですね。
    分かりやすいようにアウトラインをつけて比べてみます。

    <div>タグだと

    HTML記述

    <div style=”border:solid 1px;background-color:#ffffe9;”>
    div上
    </div>
    <div style=”border:solid 1px;background-color:#c8feff;”>
    div下
    </div>

    表示結果

    div上
    div下

    上下でピッタリ隙間なく、くっつきますが、
    <p>タグの場合

    HTML記述

    <p style=”border:solid 1px;background-color:#ffffe9;”>
    p上
    </p>
    <p style=”border:solid 1px;background-color:#c8feff;”>
    p下
    </p>

    表示結果

    p上

    p下

    こんな風に隙間が開きます。
    ちなみに<p>と<div>を連続して重ねると

    HTML記述

    <div style=”border:solid 1px;background-color:#ffffe9;”>
    div
    </div>
    <p style=”border:solid 1px;background-color:#c8feff;”>

    </p>
    <div style=”border:solid 1px;background-color:#ffffe9;”>
    div
    </div>

    表示結果

    div

    div

    <p>は下のみに隙間が開くことが分かります。

    この隙間に関しては、
    サイトのもともとのデザイン設定によりますが、
    たいていは隙間が開くようにあらかじめ設定されているようです。

    ブロック要素の入れ子の可、不可

    2つ目は、ブロック要素の入れ子の可、不可です。
    これはでかいですね。

    ブロック要素についてはこちらをどうぞ。

    ブロック要素の入れ子とは?

    ちなみに<p>と<div>はこてこてのブロック要素です。

    たとえば、<div>や<P>の終了タグの間に別の<div>や<p>等のブロック要素を入れ込むことです。

    HTML記述

    <div style=”border:solid 1px;width:100%;”>
    div親

     <div style=”border:solid 1px red;width:70%;”>
     div入れ子
     </div>

    </div>

    表示結果

    div親

    div入れ子

    と、divが親の場合はこんな感じで親の中に入れ込むことが出来ますが、
    親のdivをpに入れ替えてみると、

    HTML記述<

    <p style=”border:solid 1px;width:100%;”>
    p親

     <div style=”border:solid 1px red;width:70%;”>
     div入れ子
     </div>

    </p>

    表示結果

    p親

    div入れ子

    崩れてしまいますねー。

    このように<p>タグの中にはブロック要素を入れ子にすることが出来ません。
    気をつけましょう。
    <div>タグの方だけを使ってる分には特に問題は大丈夫そうです。

    と高をくくっていたのですが・・・
    この二つの違いはあくまで画面に表示される視覚的な違いにすぎません。

    実際<p>と<div>は正しくちゃんと使い分ける必要があります。
    <p>と<div>を正しく使い分けることで、
    検索エンジン巡回ロボット「クローラー」に正しく記事を認識させ、
    SEO上の有利にも繋がります。

    詳しくはこちらをどうぞ。

    <p>タグと<div>タグの正しい使い分け

    こんにちは、このサイトの管理人「けだま」です。

    もしあなたが、

    • 今のままでは、経済的に不安がある
    • ちょっとでも、お小遣いを増やしたい
    • 起業して自由になりたいけど、何をしていいのか分からない

    と言った類の悩みをお持ちでしたら、 このサイトが少しお力になれるかもしれません。

    このサイトでは、仕事を続けながら、 自宅でパソコンを使い、副業でお金を稼ぐ方法を紹介しています。

    あなたはこのメルマガを愛読して初期費用0円で作業するだけで、 知らず知らずのうちに稼ぐための思考やコツが身に付きます。

    断っておきますが、ある程度作業しなくては絶対にお金にはなりません。

    解除はいつでもできますので、ご興味がありましたら登録してみてください。

    今なら
    パソコンで文字が打てればOK!
    「誰でも確実にただで十万円以上稼げる方法」
    プレゼント中!

    パソコン一つで178万円稼いだ方法

    ※フリーメールアドレスでの登録をお薦めいたします。

    ※メール内容の性質上、迷惑メールに振り分けられやすくなっています。
    不達のようでしたら、迷惑メールフォルダもご確認ください。

    おもな手法としては、「アフィリエイト」を駆使します。

    アフィリエイトは、極めてリスク無く初められるビジネスです。

    私は、アフィリエイトの様々な手法を試し、収入を得ていますが、

    そのやり方を、このサイトで教えています。

    主にアダルトアフィリエイトのやり方が主ですが、 追々一般アフィリエイトのやり方についても、発信していきます。

    コメントを残す

    メールアドレスが公開されることはありません。

    AlphaOmega Captcha Classica  –  Enter Security Code