人に聞けない痔の悩み、これでスッキリ >>

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

このQ&Aに関連する最新のQ&A

A 回答 (11件中1~10件)

整理すると


<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef- … )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・
    • good
    • 3

普段、ul li{}という書き方しか書かないのでちょっと試してみました。




>No.7
ol{list-style-type:none}
とした場合、

<ol>
<li>
<div>
<ol> この部分にもol{}が適用し直される
<li>

というわけで<div>を越えて継承しているように見えますが、実はol{}が適用されているだけです。

------------
>No.9
user agent declarations/user normal declarationsよりauthor nomarl declarationsの方が優先されるんじゃないかと思いますが。。。

.none{
color: blue;
list-style-type: none;
}

<div class="none">
<ul>
<li>aaa
</ul>
<ul>
<li>bbb
</ul>
</div>

colorは継承するのにlist-style-typeは継承されない。

調べてみると、
http://www.w3.org/TR/CSS2/generate.html#propdef- …
>Applies to: elements with 'display: list-item'
この条件で、継承していく内容が<li>以外の所でデフォルトスタイルに戻ってしまうということなのかもしれません。

でもul{ list-style-type:inherit}すれば継承されるという。。。


このHTMLで適用させるためには、やっぱり<li>への指定。
.none ul li{list-style-type: none;}
というのが確実らしいです。

--------
.none{color:blue;list-style-type: none;}

<ul class="none">
<li>aaa
<li>
 <ul>
 <li>bbb
 </ul>
</li>
</ul>

これでも上位しか適用されない。
もちろんli{}と書けば、下位でもli{}が直接適用される。(ので、継承されるわけではない)

----------------
なので、ul-li間は継承するが、それ以外(li-ul含め)では継承しない(ただしinherit指定で継承できる)、
というのがブラウザの実装ではないかと思います。(文法通りの実装ではない?)

私自身が勘違いしている可能性もありますので、悪しからずご了承ください。

検証はMac Safari5.1.7です。
    • good
    • 1

http://www.w3.org/TR/CSS2/cascade.html#cascading …

2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

だから、ブラウザの ul 要素に対する既定スタイルが list-style-type:desc なんだとおもう。div から継承しないようにみえるけど、ul に list-style-type:inherit を指定すれば、継承するようなきがする。

継承が途中で途切れるのは、ブラウザの要素に対する既定スタイルのせいだったのか。。。
    • good
    • 0

文法に合わせるのであれば、「どちらも正しい」。


ブラウザの実装に合わせるのであれば、li{list-style-type:none}が「より的確(適切)」または「期待通りに表示されやすい」
という表現の方がいいと思います。

どれだけ正しくても、
ブラウザが文法通りに解釈してくれないと意味は無いですから。
(文法至上主義ならそれでもいいのかもしれませんが。)
    • good
    • 0

【追加情報】


仕様書の下の方にかかれてました。
『Authors who use only the descendant selector may not achieve the results they expect. Consider the following rules: 』
 継承は、olやul要素から、子孫のli要素に転写されるので、ol要素ないしul要素に指定することを推奨する。

 では、途中に<div>があると適用されないのかと言うと
<ol>
 <li>あいうえお
  <div>これはテスト
   <ol>
    <li>カキクケコ</li>
    <li>カキクケコ</li>
    <li>カキクケコ</li>
   </ol>
  </div>
 </li>
</ol>
 で、ol{list-style-type:none;}は適用される。
<div>これはテスト
 <ol>
  <li>カキクケコ</li>
  <li>カキクケコ</li>
  <li>カキクケコ</li>
 </ol>
</div>
 でdiv{list-style:none;}は適用されない。

 ブラウザの実装がおかしいという結論で、変ですが、しょうがない。
    • good
    • 0

No.3,No.4です。


実際には、ulかolに書かないと継承されないようです。
 仕様書の書き方が悪いのか、読み方を間違えたか???
【引用】____________ここから
Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes the same specified value as the property for the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html#value-def … )]より

各プロパティは、与えられた要素に対して、プロパティは、要素の親のプロパティと同じ、指定された値をとる、ということを意味し、 "継承"のカスケード接続された値を持つことができます。 "inherit"という値は、値の継承を強制するために使用することができ、それが正常に継承されていないプロパティでも使用できます。
 --google翻訳

 それで読み返すと
Full property table ( http://www.w3.org/TR/CSS2/propidx.html )
 に、適用範囲のデフォルトはallですが、list-style-typeは、List-itemと書かれている。ulやolはlist-itemではないのに、ulやolに適用すると、子孫のliに適用される。

 このあたりは、ブラウザの実装とスタイルシートの規定が異なる部分でしょう。
ちなみに、
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
では、下記が正しいとされます。
div.nav{list-style-type:none;}
html{list-style-type:none;}
*{list-style-type:none;}

 ブラウザ実装を考慮すると
ul,ol,li{display:block;list-style:none;}
としておくほうが無難と言うことです。
    • good
    • 0

ANo.3> まず、誤解があるようです。



無理やり正しい・正しくないを作っちゃった。。。
[ANo.1] を撤回して、他の回答に 1票ずつ。
    • good
    • 0

No.3 続きです。


 list-style-typeは、どこで指定しても良いことは説明したので実際に使う方法です。

 たとえば、ナビゲーションリストがあるとします。HTMLは、当然
<div class="nav">
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>
とか、
<div class="nav">
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a>
   <ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
   </ol>
  </li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>
とかになっているはずですよね。
 ←DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 (HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 ←文書をよりよく構造化するために、次の要素が新しく追加されました。 (HTML5 http://standards.mitsue.co.jp/resources/w3c/TR/h … )

 この様な場合、
div.nav ul,div.nav ol,div.nav li{list-style:none;display:block;margin:0;padding:0;}
 と簡略化プロパティと、セレクタのグループ化で一回で初期値を指定しておきます。
 ここで、
・詳細度が 0,0,1,2 であること。
・display,margin,paddinは、継承されないプロパティだということ。
・子セレクタではなく、子孫セレクタが使われていることに留意

 その上で、子供セレクタを使って
div.nav{width:80%;margin:0 auto;position:relative;}
div.nav li{widt:20%;}
div.nav ul>li{display:inline-block;}/* 詳細度が0,0,1,3 */
div,nav ul li ol{display:none;} /* 詳細度が0,0,1,4 */
 とすれば、詳細度が高くなりますから、横に並び、サブリストは見えなくなります。

>どちらに設定したら規格上違反とかありますか?
 いずれかどころか、適用されれば、記述しても良いです。
    • good
    • 0

まず、誤解があるようです。

CSSは、どの要素にどのプロパティを指定しても良いのです。
本来は、CSSの仕様書にあるようにブラウザのデフォルトの指定では、
ol,ul{display: block;margin: 1.33em 0;margin-left: 40px;unicode-bidi: embed;}
ol{list-style-type: decimal;}
OL UL, UL OL,UL UL, OL OL{ margin-top: 0; margin-bottom: 0 }
@media print {UL, OL, DL{ page-break-before: avoid;}
とかになっています。
 →HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

 ここで、CSSはカスケーディングという重要な仕組みがあって、どのプロパティが適用されるかは?
・出所
・重要度
・出現順番
・継承
・詳細度
 をしっかりと理解しなければなりません。仕様書には
'list-style-type'について、
 Value(とりうる値): disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

 Initial(初期値):disc
 Applies to(適用):elements with 'display: list-item'
 Inherited(継承):yes する ★
 Percentages:N/A
 Media:visual  視覚ブラウザ
 Computed value: as specified
と書かれています。(CSS2.1でvalueの値は随分と増えました。)

 ここでもキーワードは「Inherited(継承):yes」です。継承されるプロパティですから、それよりも上位のすべての要素に記述しても継承されます。
 すなわち、
html{list-style-type:none;}
 とすれば、そのHTML内のすべての Applies to(適用)list-item;にされたものに適用されるのです。

 よく使うのに、
div.aside{font-size:0.8em;list-style:none;}
 で本文と関係ない記事中のフォントは80%で、登場するすべてのlist-itemに何もつきません。もちろん、この指定の詳細度は 0,0,1,1ですから、
div.aside ul{list-style-type:lower-alpha;}とすれば、詳細度が 0,0,1,2 となりますから、任意の位置で指定して上書きされます。
    • good
    • 0

正しい、正しくないというのはありません。



<ul>に指定した場合は、そこに内包する<li>全てに適用されますが、
古いブラウザは適用されなかったと思うので<li>に指定するほうが確実です。
(たぶんIE7以下のIEだけだった気がしますが、記憶が曖昧です。
もちろん、対象ブラウザを最新版のみに限定するのであれば、その限りではありません。)


また、li {} という指定は、
<ul><li>と、<ol><li>の両方に適用されます。

<ul><li>だけに適用したい場合はul li {}とすればいいだけですが、
どちらを使うかは、管理しやすさや目的次第だと思います。
    • good
    • 0
この回答へのお礼

なるほどです。liが正しそうですね。
あとは古いブラウザの問題ですか。

どちらでもよさそうですがliにするよう心がけます。

お礼日時:2012/06/13 14:46

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QUL、LIタグの黒丸なしのリスト

お世話になります。

以下のソースを
IEで見ると黒丸なしリストと黒丸ありリストになるのですが
FireFoxですと、どちらのリストも黒丸ありのリストになります。

・これはIEのバグになるのでしょうか?
・IE・FireFoxともに黒丸なしのリストにしたい場合UL、LIタグで出来ますでしょうか?

ご存知でしたら、申し訳ありませんがご教授よろしくお願いいたします。


<html>
<title>ULタグテスト</title>
<body>

黒丸なしリスト
<ul style="width:150px;">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>

黒丸ありリスト
<ul>
<li>list4</li>
<li>list5</li>
<li>list6</li>
</ul>

</body>
</html>

Aベストアンサー

<ul style='list-style-type:none;'>

で黒丸(マーカー)がなくなると思います。

ulの幅を指定することでマーカーが消えるのは、CSSの仕様からするとIEのバグのような気がします。

Qul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

...続きを読む

Aベストアンサー

>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか?

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング