はじめまして。
今回CSSに挑戦しているのですが、widthとheightを指定して、それぞれpaddingを指定すると自動的に指定したpx分だけwidthやheightが広がってしまいます。
見るブラウザによってはwidthやheightに影響することなく指定できたりするのですが・・・
これらを解決する方法はありますでしょうか?
今は、応急処置として大枠の中にもうひとつ枠を用意してmarginを指定しています。
ただ、あまりdivを入れ子?にするにもよくないと聞いたので・・・直接解決できればありがたいのですが・・・
どうかよろしくお願致します。
No.3ベストアンサー
- 回答日時:
うん 確かにdivの入れ子は良くないけれど、結局他の人たちが言うようにpaddingの表現に違いが出てしまうから解決するには入れ子しか無いんだよね・・・
外側のdivで大きさ指定、内側は余白(paddingやmargin)を指定、という多重構造。
何の為のcssなんだか判らないやりかたになるからよろしくないというだけで、
現行の方法でレイアウトが崩れたら「W3Cに準拠してないのが悪い」という方向で突っ走るか入れ子か、どっちかしかないね。
この回答への補足
すみません・・・何度も。
>外側のdivで大きさ指定、内側は余白(paddingやmargin)を指定、という多重構造。
今ふと思ったんですけど、paddingを指定して、widthやheightが広がらない条件ってのもあるのでしょうか?
枠といっても私の場合、一番大枠をwrapで囲っているので、一応内側といえば内側なので・・・
marginもfloatと一緒に使えなかったりするので、少しでもpaddingが使えればとてもありがたいのですが・・・
再度ご覧になられましたらどうかよろしくお願致します。
ありがとうございます。
これ!といった解決方法はないのですか・・・
最終的にはwrapから考えると、3重、4重になってしまいます・・・
ちなみに、私が読んだ本によると、divの入れ子はこれが悪い!というのではなく、やめたほうがいい程度だったのですが、いったい何がいけないのでしょうか?
No.1の方のdivにheightも気になりますし・・・
No.6
- 回答日時:
divにheight指定しない方がいいって理由は
今のWebにはユーザの環境がバラバラって事もあり、どのユーザーにも対応出来るようにWebサイトを作るのが主流というか普通になっているんです。
heightを指定した場合、タイリング(フォントサイズを大きくしたり、小さくしたり)に対応出来なくなるので、出来るだけheightを指定はしない方がいいですよ。
No.5
- 回答日時:
全体=margin+padding+width+border
の場合と
全体=margin+width
width=paddin・borderも含む
と2種類のモードがあります。標準モードと互換モードです。
そして、それの切り替えをDOCTYPEスイッチ、文書宣言で行います。
innovaさんがだれに見て欲しいか?だれを切り捨てるか?等の選択で決まります。正しいのは標準モード、古い間違った解釈をするのが互換モードです。宣言によって、いろいろな解釈をブラウザがしますので……。divを増やすのは、paddingの扱いが違うのだから、paddingを使わなければいいということで、あまりおすすめできる方法ではありません。そして、自分が選択した計算にあうように数値を指定すれば解決です。
「ボックスモデル」で調べると図解されたページが沢山出てきます。最初によく躓くところですので。でも、ある程度、基本を理解していないと図を誤解する可能性もあるのですが。divはボックス要素、pはインライン要素ってわかりますか?わかる事を祈って、レッツ検索!
ありがとうございます。
レッツ検索(笑)してみます!
ボックス要素、インライン要素・・・このあたりしっかり理解して、出直してみます。
本当にありがとうございました。
No.4
- 回答日時:
>一番大枠をwrapで囲っている
どういう方法だかは判らないけれど
要するにこう
<div style="width:100px;height:100px;">
<div style="margin:1em">
本文
</div>
</div>
内側のpaddingや本文がどうなっていようとも外側のdivは不変、っていうやりかた。
ここでの問題になっている「widthとpadding」は、widthにpaddingを含んで描画されるのかされないのか、という話に尽きる。
つまり空間として確保するのがwidthでpaddingはその外側、ってなると件の膨らみが発生。
そうでなくpaddingはwidthの空間の中で取られる、という描画だと膨らまず、そしてその描画になるのかならないのかはブラウザ依存、という状況。
ありがとうございます。
emをあまり使ったことがなく、emという文字を見ただけで、わからなくなってしまうのは理解できていないからでしょうね・・・
勉強して、頑張ってみます。
本当にありがとうございました。
No.2
- 回答日時:
>見るブラウザによってはwidthやheightに影響することなく指定できたりするのですが・
つまり、ブラウザによってwidthの解釈が違うということです。
padding分を差し引く方法だと、ブラウザによっては指定したい幅より狭くなります。
>あまりdivを入れ子?にするにもよくないと聞いたので・
用途に合った要素を利用すれば、divの入れ子はそうそうなりません。
例えば、divの中身が文章なら<p>を、リストなら<ul>を使い、それらにmarginを指定すればよいのです。
いつもお世話になっております。
そして、ありがとうございます。
この現象のこれ!という解決方法はないのでしょうか?
>用途に合った要素を利用すれば、divの入れ子はそうそうなりません。
確かに・・・特にリストが使えていないので、勉強してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- その他(Microsoft Office) エクセルのマクロでスライサー教えてください。 1 2022/09/28 16:40
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PowerPoint(パワーポイント) ExcelのVBAコードについて教えてください。 3 2022/05/25 14:32
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
FireFoxで見るとブラウザの幅に...
-
<h1>タグの後の行間を詰めたい。
-
macとwindowsのレイアウト崩れ...
-
テキストボックスの文字を右揃...
-
paddingを指定するとwidthやhei...
-
文字を中央に寄せる
-
可変でサイト全体を中央に配置...
-
Dreamweaverで画面サイズを一定...
-
INPUT TEXT内の文字位置を指定...
-
CSSでテキストを垂直、中央に設...
-
コードを書いて下さい( ; ; )...
-
CSS(スタイルシート)で画像の縦...
-
htmlのタグ間の謎の空白
-
css。横並びBOXに長文textを流...
-
CSSにてコンテンツを中央へ寄せ...
-
端から端まで横線を引きたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報