webデザイン 疑問点

質問

初歩的な質問失礼します。

webデザイン初心者です。

勉強していて初歩的すぎて調べてもわからないことを何点か質問させて下さい。
（ブラウザでの見た目には問題はないけど、実際の現場で普通こんなことするのか？と思うことが多々あります。）

(1)a:hoverにプロパティを指定する際、a要素に指定していたプロパティから変更があるものだけ記述すれば良いのでしょうか？
　（例）hover時にテキストの色だけ変更する際、その他のfont-size等は重複して記述しない。
(2)子孫セレクタでcssを指定する際、ひとつ要素を抜かして記述すること。（全て記述すると　正直面倒な気がしてしまいます。）
　（例）要素A >要素B>要素C　の順に入れ子になっている場合、要素Bをぬかして
　　　　A C {プロパティ: 値；}　と記述する。

(3)<div id="example">にcssを指定する際の記述の仕方。
　　（例）div#example { プロパティ: 値 : } がいいのでしょうか？

(4) フッターにてdisplay:inlineで横並びにしたli要素を、センタリングする際の一般的な方法。
　　（ul要素にmargin:0 auto; とwidth指定で出来たのですが、firebugで他のサイトさんを見てるとposition:absoluteとleftプロパティでレイアウトされているのを見たので、、）

(5)サイト全体（コンテンツ部分）をセンタリングする場合、コーディングのどのタイミング
　でするのが一般的なのでしょうか？？

(6)idとclassの使い分けが未だによくわかりません....それと、あまり使いすぎるのはよくないっていうのをよく見るのですが、実際のところどうなのでしょうか？

正直、まだまだ疑問ばかりなのですが、キリがないので......

馬鹿バカしいと思いますが、どなたか親切な方ご教授いただけないでしょうか？？
よろしくお願い致します！

回答No.1

H240S18B73 · ベストアンサー

(1)変わるとこだけでいいです
(2)別にいいです、それがあまり面倒にならないscssで書くときさえ抜かして書いてます
(3)一行表記ということならウチはお勧めしときます、読みやすいです
(4)position:absoluteはテキスト量が不確定のとき
高さがわからなくなるのであんまり使いたくない、
全ての要素の幅と高さが確定してる時だけ使える方法
inlineにする方法は要素同士に隙間ができるのが弱点
コードの可読性を気にしないなら</li>と<li>を
スペースも改行も入れずに続けて書くことで隙間なく横並びにできる
見た目を堅守するならposition:absolute
リキッド、レスポンシブにするならinlineで
(5)コンテンツ全体をdivでかこってmargin:0 auto;
(6)IDは本来はページ内のひとつの要素を識別するためのもの
だけどどのブラウザでも同じIDを同じページ内で
何度も使えるようになってしまった忘れられた仕様
一応セレクタとしてはIDの方が強い
またIDは基本１要素１IDだけど
classは複数指定することが想定されてる
IDは一つの要素を特定するために用いるのが本来
javascriptのライブラリなんかではそういう目的で使われてるのが多い

お礼

大変わかりやすいご回答ありがとうございます！
自分のわかりにくい質問内容をくみとってくださって感激です。

ありがとうございました。

回答No.2

ORUKA1951

他のサイトやマニュアルなんか読むより、先に仕様書は読まれていると思いますが・・
(1)a:hoverにプロパティを指定する際、a要素に指定していたプロパティから変更があるものだけ記述すれば良いのでしょうか？
　同じ優先順位(出所)、詳細度の場合後出のスタイルで上書きされます。

(2)子孫セレクタでcssを指定する際、ひとつ要素を抜かして記述すること。（全て記述すると　正直面倒な気がしてしまいます。）
　必要なら書きますし、そうでなければ書きません。
　本文の階層毎に字下げしたいが、3階層以下はしたくなければ
　div.section {margin-left;}
　div section div.section div.section div.section{margin-left:0;}
　でしょ。

(3)<div id="example">にcssを指定する際の記述の仕方。
　CSS2以降は基点となるセレクタを書くことになりました。
　当然、div.exampleで詳細度は[0 0 1 1]で、意味はclass属性の値リストにexampleを含むdiv要素と言う意味。
　.example と書けば、基点セレクタがないために、:(全称セレクタ)が省略されているとみなして詳細度[0 0 1 0]として計算されますよ。この場合<p class="example">にも適用されます。
　CSS2がウェブ標準ですから、すべてのexampleクラスに属する要素に指定したければ*.example{}ですし、exampleクラスのdiv要素だけに指定したければdiv.example{}です。
　目的に応じて使い分けます。

(4) フッターにてdisplay:inlineで横並びにしたli要素を、センタリングする際の一般的な方法。
　CSS2.1の本来の方法はdisplay:inline-blockです。
　div.footer div.nav ul{text-align:center;list-style:none;margin:0;padding:0;}
　div.footer div.nav ul li{margin:0;padding:0;display:inline-block;}
　floatじゃ、ウィンドウ幅変化しり、要素数が変わったらセンタリングできないですよ。

(5)サイト全体（コンテンツ部分）をセンタリングする場合、コーディングのどのタイミングでするのが一般的なのでしょうか？？
　意味不明です。HTMLには文書構造しか書きませんので、プレゼンテーションを指定するときに指定します。
　通常は、要素セレクタでの指定などは最初に書いて、後で子孫セレクタなど詳細度が高い物に順次追加しないとわからなくなるので、どちらかと言うとスタイルシートでは前段のほうに出てきますね。

(6)idとclassの使い分けが未だによくわかりません....それと、あまり使いすぎるのはよくないっていうのをよく見るのですが、実際のところどうなのでしょうか？
　idやclass名はHTML4.01のときから明確に
　『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされていますから、文書構造を示すために必要なら記述します。idはさすがにリンクやjavascriptのターゲットになるとき以外は使用しません。煩雑になるからです。

＞正直、まだまだ疑問ばかりなのですが、キリがないので......
　質問から仕様書をご覧になったことが無い様に見受けられます。
・HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
・Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　というすばらしい邦訳があります。
　そこにあなたの疑問のすべての答えがあります。すべて完璧に覚える必要はありませんが、必要な情報がどこに書かれているか位は分かるよう通読しておきましょう。
　CSSについても
1 CSS 2.1仕様について
2 CSS 2.1の手引き
3 適合性: 必要条件と推奨事項
4 構文と基本データ型
5 セレクタ　★
6 プロパティ値とカスケーディング、継承の割り当て　★
7 メディアタイプ
　と、あなたが見よう見真似で取り掛かっているプロパティより前に、重要な「セレクタ」や「カスケーディング、継承の割り当て」が詳しく記述されています。それを身につけておかないとスタイルシートは絶対に書くことはできません。

例)　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　HTMLソースをご覧になると、文書構造以外何も書かれていません。そのために、ブラウザの表示メニューからスタイルシートを選択すると、様々なデザインになるし、印刷プレビューで印刷状態を確認すると印刷向きにデザインされていることがわかるでしょう。スクリーンリーダーやガラケー用のスタイルは書いてありませんが、それらの端末でも支障なく利用できる。もちろん検索エンジンもどこがheaderで、どこが本文(section)でどこがナビゲーションか理解できている。

お礼

丁寧なご回答ありがとうございました。