- ベストアンサー
divとpの使いわけ
noname#83425の回答
回答ではなく、と言って皮肉を言うつもりもないのですが、 何でもdivで解決しようとすることを「div病」と言うそうです。 ※お礼・返信不要です
noname#83877
関連するQ&A
- css使って<br>みたいに改行したいけど出来ない
ブログの記事を書くときに<br/> を連発して改行していたんですが、seo敵によろしくないらしいのでこれからは cssを使って書き変えていこうと思いました ワードプレスのエディターから style.css の一番下に p.p1{ margin-top: 1em; } p.p2{ margin-top: 2em; } p.p3 { margin-top: 3em; } こうやって書きました。 それでブログの記事htmlを書くときには <p class=“p1"></p> ⇐これ書けば1行空白が空く <p class=“p3"></p> ⇐これ書けば3行空白が空く と思い書いてみたんですが <p class=“p1"></p> <p class=“p3"></p> どちらを書いても、記事は1行分の空白しか空きませんでした 大げさに p.p6{ margin-top: 6em; } というのをcssに書いて 記事のhtmlに <p class=“p6"></p> と 書いても空白は1行しか空きませんでした（；へ：） ブラウザのキャッシュを消して表示し直したりしてますが駄目です1行しか空きません なぜでしょうか？？cssの記入場所が悪いのか書き方が悪いのか margin-top を margin-bottom に変えても変わりませんでした 初心者にもわかるよう、 cssを使った改行、レイアウト変更方法を教えてください なんかcssで指定して html側になんかp classみたいな指定をした方が SEO対策になっているとか ルールにのっとっているらしいですが ググってもわかりませんでしたし なぜか一行分の空白しか空きませんで困っております。 こうやって何行も空けたいです！ <p style="margin-top:6em;"></p> とhtml側に書くと改行思ったようにできます これが一番簡単ですがそれもcssで指定してないから良くないらしいです たすけて！
- 締切済み
- その他（インターネット・Webサービス）
- 角丸にしたDiv内の画像の角がはみ出してしまう
よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ａタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ｂタイプ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- 上下マージンの取り方（CSS）
スタイルシート（CSS)に携わる方々へ、 皆様の知恵を拝借したく、質問させていただきます。 段落間（P,UL等）の上下マージンの取り方についての質問です。 （A）予め段落の上マージンをゼロにリセットし、段落間は下マージンで操作 例： p,ul { margin-top:0; margin-bottom:1em; } /* リセット */ .hoge { margin-bottom:0.5em; } /* 上の段落に指定 */ （B）予め段落の下マージンをゼロにリセットし、段落間は上マージンで操作 例： p,ul { margin-top:1em; margin-bottom:0; } /* リセット */ .hoge { margin-top:0.5em; } /* 下の段落に指定 */ サイト構築において、（A）か（B）で悩んでいます。 皆様の意見を「具体的な理由」もあわせてお教え下さい。
- 締切済み
- HTML
- ｐタグによる段落間のアキ調整について
こんにちは。 HTMLのｐタグでくくった段落が連続すると、 多くのブラウザでは段落間に１行程度のアキが生じると思います。 このアキをCSSによってなくしたいのですが どう指定すればいいのでしょうか？ たとえば段落の「margin-bottom」に０ではなく マイナス値を入れればなくせるようですが、 「ｐによる１行アキ」というのがすべてのブラウザでの 共通仕様なのか分からず、マイナス値使用に怖さを覚えます。 どういうやり方がすべてのブラウザに通用する 正しいやり方なのでしょうか？
- ベストアンサー
- HTML
- DIVのデザインがうまくいきません。
現在下記URLのページにて試験しながら更新中なのですが、DIV絡みで色々と問題が発生して困っております。 ↓問題のページ http://canada.ciao.jp/index2.html ↓問題HTMLソース。アドセンスが箱の中に正しく表示されません。下のCSSにて箱の縦幅を指定しても広告の見える部分は一部のみ。一体何が悪いのでしょうか？ <div class="ads"> <div class="title">Sponsor</div> アドセンススクリプト </div> ↓このスクリプトが記述されたHTMLが入ると途端にデザインが崩れます。これなしだとちゃんと表記されます。 <div class="box"> <div class="title">カナダドル為替換算表</div> <script type="text/javascript" language="JavaScript" src="http://money.technetium.be/curcalc.js?cur[]=CAD&cur[]=JPY"></script> </div> ↑ここにスクリプト貼ると全てちゃんと表記されてませんが、実際のソースにはちゃんとスクリプト記載しているつもりです。一体どこがおかしくてデザインが崩れてしまっているのでしょうか？ ↓上のHTMLなしの場合 http://canada.ciao.jp/index3.html ↓問題のCSS #right .ads { margin-bottom: 10px; border: 1px solid #C00; height: 650px; } #right .box { margin-bottom: 10px; padding-bottom: 10px; border: 1px solid #C00; } #right .title { margin: 0 0 10px 0; font-size: x-small; font-weight: bold; line-height: 25px; background: #FCF; border-bottom: 1px solid #C00; color: #C00; text-align:center; } 数時間、色々と試したのですが、結局原因が不明のままです。 是非アドバイスの程、宜しく御願いいたします。
- ベストアンサー
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- divやp要素の前後は改行されるとありますがどこから改行されるのでしょうか
<body> <div align="center"> <br> あいうえお<br> <img src="../xxx/1.jpg" width="640" height="400" border="0"> <br> <p class="text_min"> あいうえお<br> </p> あいうえお<br> <br> </div> </body> 上記の場合、改行位置はこうでしょうか？↓ ＊改行＊ <div align="center"> </div> *改行* ＊改行＊ <p class="text_min"> </p> ＊改行＊ という事でしょうか？ 当たり前のような質問ですいません！
- 締切済み
- HTML
- プロのコーダーは、仕事の時長い文章を改行したり、イ
プロのコーダーは、仕事の時長い文章を改行したり、インデントを入れたりする時すべてCSSでやるものなのでしょうか？ それともbrや全角空白でやったほうが早いのでこちらで良いのでしょうか？ 私は下記のようにCSSでやっているのですが、下記のようなやり方でもWEB制作会社で働く場合問題にならないでしょうか？ p.indent,dd.indent,dt.indent { text-indent: 1em; margin-top: 0px; margin-bottom: 0px; } p.indentnewline,dd.indentnewline,dt.indentnewline { text-indent: 1em; margin-top: 0px; } dt.indentnewline { text-indent: 1em; margin-top: 0px; padding-bottom: 1em; } p.newline,dd.newline,dt.newline { margin-top: 0px; padding-bottom: 1em; }
- ベストアンサー
- CSS
- 定義リストの横並びと<DIV>要素の改行
スタイルシートでテーブルのように横並びでレイアウトさせた定義リストの<dt>の内容にリンクを張っているのですが、 FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。 文字色はリンク用のスタイルシートを反映した色になっています。 スタイルシートの記述に問題があるのだと思うのですが、どこが悪いのかが分かりません。 アドバイス頂けると幸いです。 <dl id="sample"> <dt><a href="aaa.html">リンク１</a> <dd>説明 <dt><a href="bbb.html">リンク２</a> <dd>説明 <dt><a href="ccc.html">リンク３</a> <dd>説明 <dt><a href="ddd.html">リンク４</a> <dd>説明 </dl> dl#sample { margin-left: 1.5em; float: left; width: 450px; padding: 1px 1px 0; color: #000; } dl#sample dt { float: left; clear: both; width: 70px; margin-right: 10px; margin-bottom: 1px; padding: 2px 0 2px 2px; } dl#sample dd { float: left; width: 350px; margin-bottom: 1px; padding: 2px; } --------------------------------------- それともう一つ、 http://jquery.andreaseberhard.de/toggleElements/ このJavascriptを利用してDIV要素を開閉しているのですが、 DIV要素を以下のように二つ並べた場合 <div class="toggler-c" title="タイトル１"> <p>内容</p> </div> <div class="toggler-c" title="タイトル２"> <p>内容</p> </div> 二つとも閉じた状態の時、改行せずに タイトル１タイトル２ と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。
- ベストアンサー
- HTML
- 、<div>と<P>では、どちらを使ったほうが良い
ページの上の部分に内容のタイトルを表示させています。 そのタイトルにタグをつけて装飾する場合 cssで設定するのですが、<div>と<P>では、どちらを使ったほうが良いのでしょうか？
- ベストアンサー
- HTML