• ベストアンサー

初期化

cssでマージンなどを初期化して使う方法はどんな書き方がいいですか? よく見られる下記のような書き方は、処理スピードが遅いですか? * { margin: 0; padding: 0; }

  • flash0
  • お礼率97% (297/306)
  • CSS
  • 回答数1
  • ありがとう数15

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

私は初期化はしません。スタイルシートがとても煩雑になるからです。 CSS(カスケーディング スタイル シート)にはカスケーディングと言う命ともいえる仕組みがあって---それだからここまで主流になった---、ブラウザのデフォルトのスタイルシートはカスケーディングの最下位に置かれています。 　⇒6.4 カスケード処理( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascade ) 　⇒HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html ) 　これをすべてリセットしてしまうと、それらの要素が登場するたびにスタイルシートを書き加えなければなりません。例えば普通に序列リスト(OL)が現れた場合、何も書かなくても1,2,3・・と番号を振ってリストに整形してくれますし、引用ブロック(blockquote)が現れると左右の幅を縮めてくれますが・・それをすべて書かないとならなくなります。 ＞処理スピードが遅いですか? 　なりますし、そもそもスタイルシートの量が肥大する一番の要因となることもあります。 　私は、せいぜい html,body{margin:0;padding:0;font-family:******} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} 程度から書き始めます。 　

flash0
質問者

お礼

回答ありがとうございます 全称セレクタは重そうですね。初期化する要素指定して初期化することにします

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 初期化作業？

    すみません。かなり困っています。 CSSでちゃんと初期化作業を行っているのですが、 * { margin: 0px; padding: 0px; } html { margin: 0px; padding: 0px; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0px; padding: 0px; vertical-align: top; } なぜか、アップロードすると上部にすきまができてしまいます。 ドリームウィーバー上では隙間は見られないのですが、 アップロードするとがくんと変な隙間があり、テキストや画像が 一段下がっているのが見受けられます。 何か原因は考えられますでしょうか。 どうかお分かりになる方、教えてください。

  • CSSの*はどういう意味

    CSS下記の*はどういう意味なのでしょうか？ *を他に変えてCSSを組むことはできないのでしょうか？ * { margin: 0; padding: 0; }

    • ベストアンサー
    • CSS
  • tbody要素に削除出来ないマージンが入る

    table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。

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

    下記ののCSSでmainContentの780px を250pxと530pxに分割する方法を教えてください。 DW CS3を使用しています。 よろしくお願いいたします。 <style type="text/css"> <!-- body { background: #666666; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .oneColFixCtrHdr #container { width: 780px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #000000; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ border: 0px solid #000000; text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .oneColFixCtrHdr #header { padding: 0 0px 0 0px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ background-color: 000000; } .oneColFixCtrHdr #header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0 0px; background-color: #444444; } .oneColFixCtrHdr #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ } --> </style>

  • [CSS]marginとpaddingについて

    ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 【css】marginについて質問です。

    現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> 　　　<div id=container> 　　　</div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。

  • jqueryのCSSについてお聞きしたいのですが、

    本体にCSSを書くと正常に動きます .defaultlist,.defaultlist li{ padding:0px; margin:0px; } 外部リンクのjQueryだと下記だと正常に動きません $(".defaultlist,.defaultlist li").css({ "padding":"0px", "margin":"0px" }); 下記のサイト(設計力を学ぶデザインドリル)をみても書き方が問題ないと思います。 http://www.jquerystudy.info/reference/selectors/multiple2.html 外部リンクのjQueryで正常に動作させるにはどうしたらよろしいでしょうか。

    • 締切済み
    • CSS
  • jQuery、JSONの結合方法

    いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2',　－＞　'val2':'222', 'padding':'3px'　－＞　'padding':'10px'　 と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の２つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。

  • ページ全体を中央に表示したい

    ページ全体を中央に表示したいので http://www.1uphp.com/con2/layout/bodycenter.html の通りにコードを張り付けたのですが、全体が若干左に寄ります。 どこを修正すればいいのでしょうか？ body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ } この通り貼り付けました。

    • ベストアンサー
    • HTML
  • ブラウザスタイルの初期化は必ずした方がいいでしょうか？？

    ＷＥＢを勉強中です。 ブラウザスタイルを初期化をすれば 各々のブラウザの初期値をクリアしてくれるので 常に body{ margin:0 padding:0 } は記述するべきかと思ったんですが、 やはり常に記述するものなのでしょうか？？ ちょっとよくわからないので実務上どうなのかとか知りたいです、、、

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する