• 締切済み

pとdivのどちらが良いでしょうか?

pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか? ページの上部に ~サイトの名前~ みたいにしたいです。

  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

noname#217950
noname#217950
回答No.1

サイトのトップページのタイトル部分を作っているんですね。 目立つように色を付けてサイズ調整したいと… この場合ならpかspanかdivの中で選ぶなら pタグがいいでしょう。しかしpタグはparagraph(文章の段落)ですから、一般的にツラツラ~っと書く普通の文章の部分に使われます。 トップページのタイトルで使うのならh1タグがベストでしょう。これはheadline(見出し)で、h1~h6まで見出しの重要度に合わせて使います。h1は見出しの中でも一番重要なとこに使います。 使い分けの感覚もつかみやすいように書いてみました。下のソースを参考にしてみて下さい。 <div style="background : skyblue;"> <h1 style="text-align : center;font-weight : bold;color : red;">~タイ<span style="font-weight : normal;">ト</span>ル~</h1> </div> <div style="background : lightpink"> <p>本文</p> </div> spanについて 上のソースだとタイトルの「ト」だけがspanですよね。これで太文字でなくなります。このようにh1~h6やpタグ等のブロック要素の中で「ここだけ別の装飾にしたい!」って時にspanが必要になります。 divについて 上のソースだとタイトルのh1と本文のpが別のdivに囲われてますよね。これで背景色を変更しています。いろんなものをひっくるめて囲ってdiv自体を色々装飾する事で複雑なレイアウトができるようになります。 だいたいですが、とりあえずこんな感じです。使い分けの感覚はつかめたでしょうか?

関連するQ&A

  • 、<div>と<P>では、どちらを使ったほうが良い

    ページの上の部分に内容のタイトルを表示させています。 そのタイトルにタグをつけて装飾する場合 cssで設定するのですが、<div>と<P>では、どちらを使ったほうが良いのでしょうか?

    • ベストアンサー
    • HTML
  • xhtml+cssでdivをdivで内包する

    xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 cssハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、IE7とIE-MACが対象のようです。 これと同じような効果が得られるもので、IE6以降、Firefox2以降、Fodoraそれぞれに対応している方法はありますでしょうか? 私がどうしたいのか少しわかりにくいかもしれませんが、上記URLでどうしたいのかはわかると思います。 アドバイスお願い致します。

    • ベストアンサー
    • CSS
  • spanタグとpタグのどちらを使えばいいのです

    html内で文字を囲ってcssで色やサイズの装飾をする場合は、 spanタグとpタグのどちらを使えばいいのですか? 基準がわかりません。

    • ベストアンサー
    • HTML
  • floatで並べた2つのdivの高さを揃えるには?

    コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか? 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。

    • 締切済み
    • CSS
  • divタグはどういう時に使えばいいのでしょうか?

    特に文字の装飾や配置をしたいわけではなくても セクション?を分ける場合は、divタグで囲った方が良いのでしょうか?

    • ベストアンサー
    • HTML
  • HTMLのタグを出力 マクロ

    A1、B1、C1…にテキストを入れます。 A1セル スズキ B1セル タロウ C1セル 東京  ・  ・ HTML出力 A1セル→<div>スズキ</div> B1セル→<p>タロウ</p> Cセル→<span>東京</span> <div>スズキ</div> <p>タロウ</p> <span>東京</span> それを行の数値が入ってないセルまで繰り返しってのをやりたいのですが、どうしたら良いでしょうか? 宜しくお願いします。

  • float divの関係

    ブロックdiv(Pとします)の中に、2つのブロックdivがあります。それぞれA、Bとします。 floatでA、Bを左寄せに並べた場合、Pに適用したスタイルシートがA、Bに反映されません。(文字サイズなど) 何が問題でしょうか? よろしくお願いします。 <div id="P-style"> <div id="A-style">aa</div> <div id="B-style">bb</div> </div>

    • ベストアンサー
    • CSS
  • HTMLのdivについて

    HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </div> </div> </body> という場合 <div=”c”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか? ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか?

  • タグを切り替えるJavaScriptについて

    下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1">  <h2>page1</h2>  <p>パンクズ</p>  <div class="nav">   <ul id="tab">    <li><a href="#page1"><span>page1を選択中</span></a></li>    <li><a href="#page2"><span>page2</span></a></li>    <li><a href="#page3"><span>pave3</span></a></li>   </ul>  </div>  <p>段落1</p> </div> <div id="page2">  <h2>page2</h2>  <p>パンクズ</p>  <div class="nav">   <ul id="tab2">    <li><a href="#page1"><span>page1</span></a></li>    <li><a href="#page2"><span>page2を選択中</span></a></li>    <li><a href="#page3"><span>pave3</span></a></li>   </ul>  </div>  <p>段落1</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。

  • <div>テキスト</div>

    HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか? 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか?

    • ベストアンサー
    • HTML

専門家に質問してみよう