- 締切済み
CSSスタイルの勉強
ウェブサイトを作るのに、CSSが便利なことがよくわかり、一通り勉強して、「使い方」は分かりました。 あとは、実際に作れるかどうかのセンスの問題になると思うのですが、いろんな作例を通じて 練習できる解説本でいいのがないか探しています。本屋に言ってもいろいろありすぎて、 目移りしてしまいます。 皆様のお薦めを教えてください。
- riverok
- お礼率61% (43/70)
- ホームページ作成ソフト
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
できるようになりたいページのデザインを真似して自分で作る。本当に「使い方」がわかっているのなら出来るはずです。 出来なければ、そのページを写経することをお勧めします。html、cssとも、コピペではなく、ソースを手で写す。写しながら、意味がわからないプロパティや値はリファレンスで調べる。やりたい事を言葉にしてみて、検索し、解説を見つける。写経が終わったら、今度は、ソースは見ないで自力で出来るところまで、やってみる。いろいろなブラウザで表示を確認する。 原理主義なら、できたソースの文法チェックをし、完璧を目指す。現実主義者なら、文法チェックをし、ひっかかった場所に他の実現方法がないか、それはハックか等を調べ、今後の参考にする。 次のサイトを見つける。以下同じ。 これで、実践的な力がつきます。仕様書なんて、きれいごとでその通りにはなりません。ブラウザが仕様書道理に動かないのですから、制作者だけが、仕様書を守っても思い通りには表現できません。その点、現行のサイトは現実的です。仕様書では間違っている記述をしてでも（ハックを使ってでも）、見せたい表現を実現しています。少々古いブラウザで見ても、大丈夫な表現が多いです。 慣れてきたら、素材も自分で作成してください。このあたりは難しいです。が、ｃｓｓだけでは思い通りのサイトは作れません。ｃｓｓをいじりたいなら、ビジュアルを気にされていると思いますが、ビジュアルは画像によるところも大きいです。 ターゲットブラウザや文章宣言は決めましたか？セレクタ・詳細度を理解していますか？ http://lab.klab.org/young/2011/05/css_trouble_rule_not_apply/ 理解しているようでしたら、作りたいサイトを見つけて、トライしてみてください。
＞いろんな作例を通じて ＞練習できる解説本 そんなもの探すより目の前の箱でいろいろなサイトを見たほうが早い。 誰の事とは言いませんが、ごちゃごちゃ屁理屈を並べられたところで面倒でしょう？どんなプロパティがあって何が指定できてセレクタの指定の仕方にはどんなものがあるかを勉強しながら、気になるサイトのCSSをのぞいてみるのが一番身につくやり方です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートの本当の意味で役に立つ本は知りません。随分と書籍をあさりましたがありませんでした。 プロパティとその使い方については、随分とすばらしいものがありますが、肝心要(かんじんかなめ)の、カスケーディングについての説明がきちんと書かれている書籍はないでしょう。カスケーディングあってのCSSなのですが？？？？ もちろん、スタイルシートをきちんと適用させるためには、なによりもHTMLがきちんとしていなければなりません。このふたつは車の両輪で、一方だけで解決する問題ではありません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より たとえばHTMLが次のように書かれているとき <body> <div class="header"> <h1>見出し</h1> <div class="abstract"> <h2>見出し</h2> <p>段落</p> </div> <div class="section"> <h2>本文見出し</h2> <p>文章</p> <p>文章</p> <div class="aside"> <h3>コラム</h3> <p>記事</p> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> スタイルシートで、ヘッダ内の要約は本文より10%小さな文字で、本文中の強調したい語句は赤字で、本文中のコラムは、本文巾の20%巾で右にfloatさせ、文字サイズは90% div.header p,div.section div.aside{font-size:90%;} div.section p strong{color:red;} div.section div.aside{width:20%;float:right;} このHTMLは、HTML5だと当然 <body> <header> <h1>見出し</h1> <div class="abstract"> <h2>見出し</h2> <p>段落</p> </header> <section> <h2>本文見出し</h2> <p>文章</p> <p>文章</p> <aside> <h3>コラム</h3> <p>記事</p> </aside> </section> <footer> <h2>文書情報</h2> </footer> </body> CSSは header p,section aside{font-size:90%;} section p strong{color:red;} section aside{width:20%;float:right;} こんなHTMLとスタイルの書き方は、どの参考書にもほとんど書いてありません。カスケーディングや詳細度の計算方法ということです。 私が、かってそれを学んだのは CSS2 ステップアップ - CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/guide/index.html ) と同じサイトの CSS2 リファレンス - CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ref/index.html ) です。今でも手っ取り早く情報が欲しいときは利用しています。 ★ただし、このサイトもCSS2について書かれていて、現在ウェブ標準とベンダーがみなしているCSS2.1ではありません。CSS2.1は、CSS2と随分と変更点がありますが、邦訳はありません(知りません)。 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ ) 特にカスケーディングあたりは変更が多いので、リファレンスを見ても、CSS2.1で確認するしかない。 最終的には、(HTMLとCSSの)仕様書を見るのが一番効率的と言うことになります。
私の場合は本ではなくサイトを利用します。 ネットでもかなりの数ありますから無料で、見やすくて、更新されるていう点でもう紙媒体は必要ありませんね。 いろいろありますが、言語そのもの特にCSSを重点的にというのであればCSSリファレンスですね。 他にも慣れてきたら便利なテクニックなどを載せているサイトもあるので、以下をチェックしてみると色々見つかるかもしれません。 http://onlinepckan.web.fc2.com/tool/web/web.html
