CSS記載ルールで参考になるもの

質問

こんにちは、質問させてください。
現在ウェブデザインの勉強をしております。
（wordpressのテーマ作成を２～３こなし、HTML5,CSS3について
ちょっとずつ理解を深めてきた段階です）

ただ、自分のCSSをみると非常に可読性が悪く、
読み返すのも億劫な構造になってしまっております。

是非デザイン・コーディングに詳しい方に、
CSSの構造の参考となる記事や、参考ファイル、参考文献などがありましたら
教えていただけると幸いです。

（SMACSSの概要記事などは読んでみたのですが、
　概要を理解したものの「じゃあ実際どうかくの」というところがボンヤリしておりまして……　
　できれば実際のCSSファイルを読んでみたいです）

お手数をおかけしますが、よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

SMACSSは本流から外れた手法なので参考にはならないでしょう。
　そもそもスタイルシートを導入する最大の目的は
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　です。短い文章ですからよく読んで理解しておくこと。
　言っている事は、プレゼンテーションのためにHTMLは書かない。文書構造だけを記述する。スタイルシートはプレゼンテーションをになうので、HTMLの文書構造に基づいて指定していく。

例えば、下記のようなスタイルシートだといかがでしょう。
div.nav ol,div.nav ol li{
　　list-style:none;
　　margin:0; padding:0;
　　line-height:2em;height:2em;
　　text-align:center;
　　position:relative;
}
div.nav ol li{
　　display:block;
　　width:100%;
　　height:100%;
　　text-decoration:none;
}
div.header div.nav{
　　width:100%;position:relative;
}
div.header div.nav ol li{
　　display:inline-block;
　　width:20%;
}
div.section{
　　position:relative;
}
div.section div.nav{
　　position:absolute;
　　right:0;
　　width:160px; height:100%;
}

　たぶん、誰が見てもなにをしようとしているかがわかるはずです。

＞HTML5,CSS3についてちょっとずつ理解を深めてきた段階です。
　失礼ですが、それでしたらこのような質問は出ないと思います。
　HTML4.01で
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされました。プレゼンテーションのためにとは書いてない!!
　しかしあなただけでなく、巷ではこれが理解されずにプレゼンテーションのためにDIV,SPAN,id,classが使われてきました。その典型がSMACSSと言っても過言ではないでしょう。
　その反省から、HTML5では、『文書をよりよく構造化するために、新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
　【問題2】文書内に埋め込まれた「意味」が不明確( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )
　↑このページの上から1/4あたり

　すなわち、上記スタイルシートは
nav ol,nav ol li{
・・・・・
}
nav ol li{
・・・・・
}
header nav{
・・・・・
}
header nav ol li{
・・・・・
}
section{
・・・・・
}
section nav{
・・・・・
}
となるはずです。

　私はHTMLは開かなくてもスタイルシートを書けます。書けるようにHTMLを作成しているといったほうが良いでしょう。
　このスタイルシートを見るだけで、あなたにも適用されるHTMLの文書構造は手に取る様に分かると思います。
　結果『広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』です。
　印刷用スタイルシート、スマホなど小さなscreenメディア、点字端末や携帯電話用のメディア別スタイルシートが必要になってもHTMLに手を加える必要もありません。

＞CSSの構造の参考となる記事や、参考ファイル、参考文献などがありましたら
教えていただけると幸いです。

1)まず、HTML4.01の仕様書を完璧にマスターしましょう。
　HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
2)その際に、HTML4.01の反省を盛り込んだ
　HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )を目を通しておくと良いでしょう。
　【すこし古いです。最新版はDifferences from HTML4( http://www.w3.org/TR/html5-diff/ )】
3)その上で、CSS2.1をマスターしましょう。
　Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　特に、
　5 セレクタ
　6 プロパティ値とカスケーディング、継承の割り当て
　は、完全に理解すべきです。

　そのうえで、HTML5,CSS3を身につければよいです。

[実例]
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　ブラウザの[表示]メニュー→[スタイルシート]→で様々なスタイルシートを選択してみる。　--Chromeは代替スタイルシート機能はありません。
　印刷プレビューで印刷時の状況を確認
　画面の幅を変えてみる。

お礼

これからHTMLを学ぶのであれば、HTML4.01とCSS2は覚える必要がなくHTML5から始めればよいという話を窺ったことがあるのですが、なぜこうなったかの理解を深める為にも先にそちらを学んだ方がよさそうですね。
詳しくありがとうございます。

回答No.1

noname#206842

SMACSSて、Frameworkでは？・・・
基本は、Ｗ３Ｃの仕様書とか、ＷＨＡＴＨＴＭＬなどの仕様書を読まれた方がいいのでは？・・・

その後、SMACSSのＣＳＳを解析すれば、どのように対応しているかが理解できるのでは？・・・

参考URL：

http://chroma.hatenablog.com/entry/2013/07/22/120818

お礼

ありがとうございます！