• ベストアンサー

CSSについて

お忙しいところすみません。 CSSを勉強し始めたのですが、どうしても分からないことがありまして、おわかりの方がいらっしゃれば、よろしくお願いいたします。 色々なサイトのコードを見て勉強しているのですが、CSSをコーディングするに当たって、padding:0;と指定しているときと、padding自体を指定していないときとありますが、これはどういうことでしょうか? たまたまpaddingを例にあげましたが、borderやmargin等についてもいえることで、指定しなくても基準値が0であれば、無駄なタグは書きたくないなと思ったのです。 無知なご質問で申し訳御座いません。 何故指定したり、指定しなかったりするのでしょうか? よろしくお願いいたします。

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

  • ベストアンサー
回答No.1

無指定の場合はブラウザーの標準のスタイルシートに依存します。 人によっては独自のスタイルシートを指定しているかもしれませんね。 これについてはIEの場合 ツール(T)→インターネットオプション(O)→ユーザー名(タブ名) で一番下の ユーザー補助(E) で書き換えることができます。ただ、たぶんこれを利用している人が少ないと思うのでブラウザーの標準のスタイルシートで表示されることになります。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

再び#1mousengokeです。 ちょっと付け足します。 プロパティーによっては初期値は**にしてください。 と定められているものあります。(すべてのブラウザーがこれを遵守しているかどうか定かではありませんが) たとえば border-width の場合 medium border-style の場合 none 逆にそういう規定が無くブラウザーやタグによって違うこともあります。 たとえば border や margin 等がそれに当たります。

kanahatena
質問者

お礼

ご回答ありがとう御座います。 参考になりました。 ブラウザの標準のスタイルシートが存在するのですね。 勉強になりました。まだまだ分からないことだらけですが、やってみます。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

こんにちは まるっきりの想像ですが。 1 Htmlエディタが指定しない値に 0 をふっている。 2 サイトの管理者が、padding等を指定したくなるケースのためにあらかじめ書いている。 1は使ったことがないので本当に想像です。2はぼくが実際にそうしています。 特に同じようなデザインを使い回す時の微調整に^^

kanahatena
質問者

お礼

ありがとう御座います。 指定したくなることも頭において。。。ということですね。 がんばります。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSについてお聞きします。

    私は、ブラウザごとにデフォルトで余白など入ってくるため、スタイルシートに*(アスタリスク)で *{ margin:0; padding:0; border0; } と指定しています。 こうすることでページ全体に入る無駄な余白などを一旦0にしてからpaddingなどをかけていくようにしているのですが、ひとつ問題が出てしまいます。 それは、全体にCSSの効果が入るため、input type="button" などでボタンを配置した時に、デザインがグラフィックのかかってない格好悪いボタンになってしまいます。 全体にCSSをかけてもボタンのデザインが崩れない方法がないのか知っている方がいれば教えて頂けないでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでのレイアウトについて

    HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか? |   | |あああ| |   | こういうレイアウトの物が ブラウザを小さくすると || ||あああ || とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします

  • CSSの記述でのクラスの定義で

    CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか? 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • [CSS]marginとpaddingについて

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

    • ベストアンサー
    • HTML
  • CSSのpaddingは<body>タグに指定可能?

    CSSのmarignは<body>タグに以下のような形式で指定されているのを見かけますが、 例: margin-top:0px; margin-bottom:0px; margin-left:0px; margin-rigiht:0px; W3Cの規定によると、paddingは<body>タグに指定可能なのでしょうか? 例: padding-top:20px; padding-bottom:20px; padding-left:20px; padding-rigiht:20px; W3Cの規定によると、marginとpaddingは、ブロックレベル要素及びインラインレベル要素に指定可能だと思います。 ブロックレベル要素とインラインレベル要素を区分けした表はよく見かけますが、<body>タグはブロックレベル要素に含まれていません。 <マージンとブロックレベル要素及びインラインレベル要素の関係> http://www.mozilla.gr.jp/standards/webtips0015.html <ブロックレベル要素とインラインレベル要素を区分けした表> http://riko.s235.xrea.com/shirley/reference008.htm <body>タグはブロックレベル要素と考え、ブロックレベル要素に適用できるスタイルは<body>タグにも指定できると解釈してよいのでしょうか? ブロックレベル要素に指定できて、<body>タグにも指定できないスタイルってありますか?また、ブロックレベル要素に指定できずに(インラインレベル要素に指定できて)、<body>タグにも指定できるスタイルってありますか?

    • ベストアンサー
    • HTML
  • cssでtableを指定したい

    教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th {     border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC;      padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left;      padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか?

    • ベストアンサー
    • XML
  • CSSでのレイアウトについて

    現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。

    • ベストアンサー
    • CSS
  • CSSでバックグラウントカラーの途切れを直したい

    CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }

    • ベストアンサー
    • HTML
  • テキストをボーダーで囲むCSS

    CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>

    • ベストアンサー
    • HTML
  • Cssで

    次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し2</h2> <h2 class="sample1">見出し2</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }