こんにちは。ウェブ担当が自分だけしかいない小さい会社で働いているものです。急に社長から先月にウェブ担当にさせられて急ぎでHTMLやCSSなどのウェブ制作に必要なことを勉強しないといけなくなりました。
一応、簡単な自社のホームページやLPは作れるようにはなったもののCSSの記述に無駄が多いように感じてしまいます。もっとスマートに共通化出来るところは共通化すると無駄な記述も減ってメンテナンスもしやすくなるのだと思うのですが、いかんせん独学でコツがよくわかりません。
大変お手数なのですがよろしければどなたかHTML/CSSコーディングの際に意識すべきことやヒントなどなんでも良いので教えて頂けないでしょうか？
■追記
とりあえず他の要素で使ったCSSをほぼ丸ごとコピペして他の要素に使いまわしている箇所があったりした場合、それはあまりよろしくないですよね、きっと？
こういう場合はなにか共通部分を適切な意味付けを持ったネーミングをして、別クラスとしておくと良いのでしょうか？
みんなの回答 5 件
まあ初心者にここで説明するのは、いろいろありすぎてちとムズいわな。誰かよさそうな初心者向け参考書でもあげてあげて。
CSSの書き方に限って助言させていただきます。CSSをキレイにまとめていきたいならSassの初心者本などを参考にされるとよろしいかと思います。変数などが扱えますので、CSSが後々大きくなってもどこに何があるか把握できなくなるといったことが軽減されるはずです。それでは
CSSの設計にはデザインとか規模や、更新性のあるコンテンツがどれぐらいあるのかとかいろんな要因にも左右されるので、なんとも言えないなぁ。
>とりあえず他の要素で使ったCSSをほぼ丸ごとコピペして他の要素に使いまわしている箇所があったりした場合、それはあまりよろしくないですよね、きっと？
共通のスタイルが記述されたクラスを使っていると、のちのちどちらかのみを目立たせたいからデザイン変えたいってなるとHTML/CSSの両方をいじる必要が出てくる。
元々独立したスタイルとして扱っていたらCSSだけの修正で済む可能性もあるので、一概によくないとはいえない。
本屋へGO!
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法: 谷 拓樹: 本
http://www.amazon.co.jp/dp/4844336355/LPサイトなど規模の小さいサイトでしたら、そこまでまとめなくてもいいので、自分の出来る範囲でまとめながら、その他の部分の記述ルールを自分の中で作ってください。クライアントの要望に沿ったものを作ること前提で、次に大切なのは修正しやすいソースを作ることだと思います。
修正しやすいソースはルール付けがされていて、他の方が見てもわかるようになってます。例えばセレクタの書く順番が揃ってるや、ソース内の半角スペース・タブを揃ってる、クラスの命名にルール付けがされてるなど。
ttp://highfivecreate.com/blog/course/css-beginner/1052.html
たまに他のサイトを見るとfont-sizeやmarginなど一つのセレクタにたくさんクラスまとめてるCSSとかありますが、あれはソフトの機能であったりSassなどを使って書き出してると思うので、手打ちの参考にならないかもしれません。
手打ちでクラスをまとめ過ぎるとかえって修正が大変になることもあるので気をつけてください。
関連するトピックス