cssを適用する対象の選択で困っています.....

css
1#nav{
2    background-color: #444;	
3    padding: 3px;	
4} 
5
6
7#nav ul{
8    padding: 0px; 	
9    margin: 0px;
10} 
11
12
13#nav ul li {
14    display: inline; 	
15    margin-right: 1em;
16} 
17

これは抜粋なのですが、ulやli等適用するしてるものが個々に違いますが、どのような基準でわけているのですか？
わかりやすいサイト等があればそちらも教えていただきたいです。

行動規範の内容に同意します

回答4件

ベストアンサー

どのような基準でセレクタを分けるかといえば、

・どのようなHTML構造に対して
・どのようなデザイン／レイアウトで表示したいのか

に応じて分けるということになるでしょうかねー。

意識されているかどうかは分かりませんが、CSSはHTML構造を土台として適用するものになりますので、原則として土台となっているHTMLの構造がどのようになっているかを確認し、その上で自分の作りたいデザイン／レイアウトを実現するのにふさわしいセレクタを選択し、プロパティを記述して行くことになります。

例えば例に挙げた抜粋のCSSコードであれば、おそらくこんな感じのHTMLがあり、

HTML
1<div id="nav">
2<ul>
3  <li>リスト1</li>
4  <li>リスト2</li>
5</ul>
6</div>

「3pxの余白を持ったグレー（#444）の四角い枠の中に、箇条書きリストを横に並べる」というデザインを実現したいのでしょう。
従って、

CSS
1#nav{
2    background-color: #444;    
3    padding: 3px;    
4}

この部分で「3pxの余白を持ったグレーの四角い枠」を作り、

CSS
1#nav ul li {
2    display: inline;     
3    margin-right: 1em;
4}

この部分で箇条書きリストを横並び（display:inline）にしているのが分かります。
（margin-right:1em;は横並びにした項目の間に1文字分の余白をつけています）
じゃあこれは何かというと、

CSS
1#nav ul{
2    padding: 0px;     
3    margin: 0px;
4}

miwakazuoさんが指摘されているように、ul要素がもともと持っているデフォルトのmargin/paddingをゼロにすることで余計な余白が出ないようにしているのでしょう。

このように、CSSは土台となるHTML構造を前提として、いかにして自分の求めるデザイン／レイアウトにするかということを考えて記述するのが基本となります。
その上で、プロの世界になると「いかに流用しやすくするか」「いかに破綻をふせぐか」「いかに複数人でもわかやすくするか」等、日々の運用面での効率等、様々なことを考えてセレクタを設計していくことになります。
CSSセレクタ設計について深く知りたければこういう本もありますので参考までに。
Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

投稿2015/12/09 16:49

aKusano

総合スコア3763

zeben

2015/12/11 05:29

ありがとうございます。

行動規範の内容に同意します

CSSセレクタの書き方について、質問されているのでしょうか。（違ったらごめんなさい）

基本的にセレクタの書き方は、HTML構造（というよりかは表示構成）によって変わってきます。

画面全体に適用したいならタグで記載
複数個所で同じような表示構成をしたいなら、class 属性でグルーピング
ピンポイントで設定したいなら ID で設定

→ CSS単体ではなくHTMLとの組み合わせによって成り立ちます。

ちなみに、個人的に気を付けていることとしては、下記のとおりです。

CSSの適用範囲を考える（HTML文書全体に適用したいならタグで定義、部分的に適用したいなら class, id 等を用いる等）
なるべくセレクタ構成はミニマムにする
新しいクラスをむやみに用意するくらいなら、疑似セレクタの利用を考える
状況によっては HTML 構造をいじることも考える

参考サイトは下記あたりを目を通すとよいかもしれません

投稿2015/12/09 06:29

編集2015/12/09 06:37

usk

総合スコア397

zeben

2015/12/11 05:29

ありがとうございます。

行動規範の内容に同意します

例えばpaddingとmarginのそれぞれの設定ですが、ulはもともとpaddingとmarginを持っている（ブラウザがデフォルトで適用する）ので、それをなくすためにわざわざ「0」を指定している、liはulと違ってもともとmarginがない（0）ので、marginをとるために指定している、#navがdiv要素だと仮定すると、liと同様、もともとmarginもpaddingも0なので指定している。

といったことですかね？

入れ子構造の中でどの要素にmarginやpaddingを持たせるかということでしたら、それはレイアウト次第ですね。

投稿2015/12/09 06:11