先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。
もくじ
定番まとめ
１．勉強になるテクニック／サンプルまとめ
基本知識
２．セレクタ
３．メディア クエリ
４．コーディング規約
５．フォント
６．CSSスプライト
７．アニメーション
８．正確なHTML使用方法
９．CSSハック
１０．書き方／読み方
定番まとめ
１．勉強になるテクニック／サンプルまとめ
レイアウトを見栄え良くしたり、使いやすくするうえで使用頻度が高かったものを中心にまとめました。今までphpで処理していたことをCSSで代用出来るものもあったので非常に助かりました。
基本知識
２．セレクタ
命令文を適用させる選択部分(対象)をセレクタと呼びます。知らないのが結構ありました。色々細かく設定できるので必見。以下はセレクタの色々なパターン。
３．メディア クエリ
メディアクエリーとはiPadやスマートフォンなどでも閲覧しやすいようにユーザーの閲覧しているメディアに合わせて、スタイルシート（css）内に適用する条件を細かく指定すること。以下、フレームワークやコードの書き方、スマートフォンに対応させるときに気をつけることなど。
４．コーディング規約
コーディング規約とはコードの書き方に関するルールです。以下、Googleの最新CSSガイドライン。変なクセがついていたので見返し、インデントに半角スペース使うということでエディターのタブ設定なども半角を使うよう変更したり。CAの記事ではなぜこのようなルールがあるのかを丁寧に解説してあります。
５．フォント
font-familyはあえて設定しない方法もありますが、以下フォントに関する指定方法など。もう一つはOS別にブラウザがサポートしている標準フォントを画像で表示してくれています。
６．CSSスプライト
筆者の会社も高速化のために、CSSスプライトを使ったりしてますが、どれだけ早くなったのか検証できてません。こちらはCSSスプライトに関して、かなり細かく説明してあるものを抜粋。CSSスプライトについてのデメリット・メリット、検証結果、具体的な作成方法など。もう一つはCSSスプライトを一発で作成してくれるWebサービスの解説。
７．アニメーション
スタイルシートだけでアニメーションを付けられます。アニメーションの敷居が低くなってますので試してみましょう。以下は上下移動や回転をする吹き出しサンプル、ボタンホバーのサンプルも。
８．正確なHTML使用方法
推奨されないhtml使い方ってエラーが出ないので、普通に使っていたら分からないですよね。Web標準を守って検索エンジンにも良いサイトを目指せるようにメモです。
９．CSSハック
互換性の維持って大変ですね。IE7、8、9もバグがあるのでバージョンチェックやIE対策をひと通りまとめました。レスポンシブ対策にも良いです。
１０．書き方／読み方
最後はCSSの書き方やコメントアウト記法、プロパティの読み方です。以下のサイトを見て基礎から勉強し直しです。
スポンサード リンク