ベストアンサー 、<div>と<P>では、どちらを使ったほうが良い 2015/03/23 22:41 ページの上の部分に内容のタイトルを表示させています。 そのタイトルにタグをつけて装飾する場合 cssで設定するのですが、<div>と<P>では、どちらを使ったほうが良いのでしょうか? みんなの回答 (4) 専門家の回答 質問者が選んだベストアンサー ベストアンサー blue-goheimochi ベストアンサー率72% (39/54) 2015/03/24 14:55 回答No.3 先に回答されている、sanzeroさん、lefty17さんと同様に、 私もタイトルにタグをつけるのであればh1やh2を使います。 http://www.atmarkit.co.jp/fwcr/design/tag/structure/ こちらのサイトにありますが、 文章構造を意識してタグを使い分けるといいかなと思います。 質問者 お礼 2015/04/04 08:59 回答頂きありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 その他の回答 (3) noname#249914 2015/03/24 17:29 回答No.4 Pタグを使用されるのが良いと思います。内容のタイトルとなると、Hタグ(見出しタグ)を使用する方がより適切だと思います。 質問者 お礼 2015/04/04 08:59 回答頂きありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 lefty17 ベストアンサー率21% (46/214) 2015/03/24 14:36 回答No.2 p は段落を意味し、div はブロックの汎用的なものという感覚です。 h1 や h2 ではフォントサイズが大きくなりデフォルトでマージンが使われますが、css でどうにでも見た目を変えられるのであまりこだわる必要はないのです。 ただ、クローラーでは h1 や h2 でくくられているとページのタイトルとして優先的に判断するみたいですね。 なので h1 や h2 でくくるのがいいと思います 質問者 お礼 2015/04/04 08:59 回答頂きありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 sanzero ベストアンサー率56% (58/102) 2015/03/24 09:28 回答No.1 タイトルならh1, h2, h3あたりを使います。 大見出し、中見出し、小見出し 質問者 お礼 2015/04/04 08:59 回答頂きありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発HTML 関連するQ&A 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のどちらが良いでしょうか? ページの上部に ~サイトの名前~ みたいにしたいです。 divとpの使いわけ サイトを作っているとdivとpで迷います。 「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに 思うのですがこういう方向で使い分けている等という区分ってありますか? 私の場合 <div class="title">タイトルです</div> <p>コメントです1</p> <p>コメントです2</p> <p>コメントです3</p> のような感じでcssで p {margin-bottom: 1em;} と設定しております。 コメントに改行がなく1行2行で済む場合は <div>コメントです</div> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは 囲むようにしております。 気になったもので質問させて頂きました。有利な点や不利な点など どんなコメントでも構いませんのでご意見をお待ちしております。 DreamweaverでCSSの「div id」設定方法 DreamweaverMXを使ってCSSを独学している初心者です。OSはWindowsXPです。 以下のようなタグを使って作る時 <div id="aaa">の部分を、コード部分に直接タグを挿入する以外の、Dreamweaverの使い方があれば、お教えいただますでしょうか。 (煩雑になるのでタグの<title>より上は省略して載せています) <style type="text/css"> <!-- #aaa { background-color: #CCFFFF; width: 600px; } --> </style> </head> <body> <div id="aaa"> <p>表題</p> <p>例文ああああああああああああ</p> <p>事例</p> <p>例文いいいいいいいい </p> </div> </body> </html> 「#aaa」というスタイルは「CSSスタイル」パネルから新規CSSスタイルのセレクタタイプを「詳細(ID,コンテキストセレクタなど)を選択し、セレクタに「#aaa」と入力してスタイル定義で設定しました。 ・スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点と、 <div id="aaa">部分が<div id="#aaa">ではダメな理由の知識もありません。 ・<p class="bbb">というスタイルの設定を、セレクタタイプを「クラス(すべてのタグに適用可能)」にして「.bbb」という名前にして設定したスタイルは 「文章のスタイルを適応したい部分を選択→スタイルを選択して右クリック→適応」で<p class="bbb">例文ううう</p>のようなタグが挿入されますが 「div id」の場合は同じような手順では出来ないのでしょうか? 私が持っているDreamweaverMXの解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。 ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム div内に文章をを書くときは、pタグで囲った方が良 div内に文章をを書くときは、pタグで囲った方が良いのでしょうか? タダ文章を表示させるだけではなく、 「これは文章です」という意味を込めたいのなら、pタグで囲うべきですか? 本文を記載する場合はpタグを使ったほうが良い? <div>本文</div> とするのと <div><p>本文</p></div> とするのではどちらがいいのでしょうか? 本文を記載する場合はpタグを使ったほうが良いですか? divタグで本文を表示する位置をmarginなどで設定しています。 画像はDIVタグとPタグの両方で囲むの? クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。 同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。 CSS・DIVについて CSS初心者ですが、質問させていただきます。 <やりたいこと> 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え <私が作成したもの> (関係ない部分は省略しています。) (実際は、(1)(2)の部分は半角英字の名前をつけています) <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> <表示のされ方> (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。 floatを適用したdiv内部にあるpタグのmarginについて floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> (<body>前、</body>後省略) ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv(test01)、その下に二つのdiv(test02、03)をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。 IE7の<div>のバグ IE7でgooglemapの表示がおかしくなります。 <div id=~>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id~>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。 pタグ内、一部の画像のみ左に配置したいとき。 ホームページの記事のページをDIVタグでくくって、 その中の「p」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか? できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>~</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします! spanタグとpタグのどちらを使えばいいのです html内で文字を囲ってcssで色やサイズの装飾をする場合は、 spanタグとpタグのどちらを使えばいいのですか? 基準がわかりません。 divタグはどういう時に使えばいいのでしょうか? 特に文字の装飾や配置をしたいわけではなくても セクション?を分ける場合は、divタグで囲った方が良いのでしょうか? AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム divの入れ子を多用してページをつくることはださいのでしょうか? CSSで2カラム左メニューレイアウトのサイトを作成しております。 レイアウトはできたのですが、 ページ内にいくつかdivでボーダーのないボックスをつくり 写真をいれたり文章をいれたりします。 1ページのCSSレイアウトしたコンテンツ部分のdivの中に 5つほどdivが入れ子ではいる予定です。 インターネットでdivの多用について調べると ださいだの、わかってないだと書いてあります。 でもdivを多用しなければ、 例えば写真の横にテキストを配置したり、 よこにイメージを配置したいときに テーブルやHTMLタグをつかわないといけないので、 余計ソースが汚くなるんではないでしょうか? 私は、CSSを本格的に勉強し始めてほとんど初心者ですので、 詳しいことがわかりませんので、もしご存知の方おられましたらご意見お待ちしております。 <div> で テキストを下揃えにすることはできますか? CSSでレイアウトを指定しています。 <div>内のテキスト表示位置についてご存知の方がいらしたら教えて下さい。 言葉では分かりづらいかと思いますのでサンプルのページも用意しました。 どうぞよろしくお願いいたしますm(_ _)m 【やりたいこと】 画像の横に長めのテキスト(折り返しあり)を入力する。 テキストを画像の下部に合わせて(下揃えで)表示させたい。 【できないこと】 テキストが上揃えになってしまう。 【避けたいこと】 テキストの上に透明GIFを入れてスペースを空けることは避けたいと思っています。 画像とテキストは<div>タグでくくっていますが、できれば<div>の縦サイズを固定したくないと思っています。 なるべくシンプルな指定方法だととても嬉しいです。 【サンプルページ】 http://question.oteage.net/090426.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等を教えていただけるだけでもたすかります。 よろしくお願いします。 リンク付き画像を右よりに表示するには?divタグ <a href="http://○○" target="_blank"> <img src="http://○○" border="0" /></a> というタグを、ページの右に表示させたいのですが、 どうやって、表示させればいいのでしょうか? divタグで挟むことをなんとなくわかったのですが、 divタグをどのように使えばいいのかわかりません。 cssで表示させる方法を教えてください。 今の状態でアップロードすると、自動で左寄りに表示されてしまいます Web勉強中の初心者です。pタグとdivタグの区別 こんにちは。 web勉強を初めて3ヶ月の初心者です。 よく、コーディングしていて、imgタグを入れる際に、pタグを使うべきかdivタグを使うべきか迷ってしまいます。 最初は、わけもわからずdivで括ればいいのだと思っていましたが、そうでもないと気づき始めて、改めて本やネットで調べたらpタグは「段落」、divタグは「まとまり」となっていました。自分としては、ある程度のグループとして入れる場合はdivで囲んで、ある程度の量がある文章ではpタグという認識です。 ただ、そうすると画像を1枚入れたりとか、少しの文章と背景だけを入れたいときは、divではないだろうから、pタグなのかな?とか、それともタグを入れずに、前後のdiv間に、文章やimgだけで入れるべきなのかな?と考えていくと正直混乱してしまいます。 もしくは、そういう場合は前後のdivも含めた自分のグループの分け方自体が、おかしいのかもしれません。 わかりにくい文章ですいません。 いいアドバイスありましたら、よろしくお願いします。 HTML、divについて HTMLについて質問です。 <head> <body> 文章 <hr> 文章 <hr> 文章 </body> </head> というページを作った時、上、中、下の文章はそれぞれを特にcssに設定したいことはないですが、divで囲ってグループ分け?すべきでしょうか。 このままでも構わないでしょうか。 もうひとつ、現在はhead部にtitleではなくTITLEを使うべきなのでしょか。 回答よろしくお願いします。 ■divにid指定して子供タグに適応(ソース付) みなさん、よろしくお願いします。 上の段と下の段を表示上同じ結果にしたいと思います。 現在、上の段のようにdivタグ以下の全てのタグに、GrayMojiを 指定しています。 本番のソースでは、これが大量にあるので、簡潔に書きたいと思っています。 そこで、下の段のように、1つだけidを指定しただけで、divタグに含まれている 全タグにGrayMojiを適応させたいと思っています。 でも、このソースでは、同じ結果が得られません。 どのようにすれば、良いかアドバイスをいただけないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- a:link{ color: #0033EE;} #GrayMoji {color: #666666;} --> </style> </head> <body> <div> <a id="GrayMoji" href="main/about.html">div-AタグClass</a> <p id="GrayMoji">div-pタグClass</p> </div> ------------------------------------ <div id="GrayMoji"> <a href="main/about.html">divタグClass-A</a> <p>divタグClass-p</p> </div> </body> </html> iframeの機能をcss(divタグ)で表現する方法 タイトル通りです。 cssでiframeの機能を使いたいです。 iframeのフレーム内にフレーム外からのリンクを表示する機能なんですが、iframeタグを使わずcssで代替した時の書き方がわかりません。 -----------------------ソース------------------------------ css----------- div.iframe { padding:10px; width:300px; height:200px; border:solid 1px pink; overflow:scroll; } <div class="iframe"> 内容 </div> ----------------------------------------------------------- わかる人がいたら教えて頂きたいです。 よろしくお願いします。 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
回答頂きありがとうございました。