2014年のリセットCSSとレスポンシブ対応の初期CSS

スマホ・タブレット対応、レスポンシブ対応が一般的な現在、CSSの扱いは非常に重要になっているように感じています。今回こそはと思ってサイト制作を始めても気が付いたらグチャグチャなCSS。

2014年もCSSを上手く綺麗に扱うのに苦労しそうです。そこで、ここではリセットCSSに合わせて、効率良くスマートに扱うための初期CSS、HTMLを大公開。

年末ということで、過去のデータを整理してみました。
個人的な資産ですが、まぁ何と言うか誰かの役に立てたら幸いです。紹介するCSSは大きく分けて下記の4つです。

  • 2014年もきっと大活躍のリセットCSS
  • よく使うCSS3
  • WordPress用の初期CSS
  • レスポンシブ対応、どんなサイトでも使えるレイアウト早組CSS

リセットCSSというか、もはやフレームワークです。

2014年のリセットCSS

色々なリセットCSSが出回っていますが、個人的には下記で十分かと思っています。
2013年使っていたものに、少し加えました。
よく使うCSS3もここにコメントアウトして入れています。

floatをリセットするために用いる.clearfix については、過去記事をご覧ください。
知らない人は是非お使いください。かなり便利だと思います。
>>2013年のリセットcss

シンプルなCSSを目指して

様々なデバイス対応が必要な現在、CSSをシンプル・効率的に利用する必要があります。

自分が作るサイトでは、IDへのスタイルシートを原則禁止、importantもなるべく使わないようにしています。
CSSには、クラスしかない。それはとてもスマートです。

そして何より、ID・importantは、公開前の最終調整・公開後の追加等の作業時に使う奥の手として取っておくことができますので、優先順位問題に苦労することも無くなります。

スマートなCSSにするためのHTMLサンプル

IDを入力した場合にも、サイト内リンクにのみ利用する程度です。
スタイルシートが必要な時は、IDと同じ名前のクラス名を設定しています。

初期CSS、レイアウトCSS

初期化CSSではないですが、サイト作りの際によく始めにぶちこんでいるCSS、題して初期CSSです。
なお、「add css layout start」以降はレイアウト部分です。サイトによって、幅・余白間隔の調整が必要ですが、よく使うレイアウトなので重宝しています。せっかくですので一応共有。良かったら一度試してみてください。

WordPressでCSSを追記していく際にも、とりあえず下記のコードをいつもコピペしています。

最近のWeb制作はもっぱらWordpress。
リセットCSSよりも下記のコードを貼りつけてカスタマイズしてくことの方が多いです。

レイアウトCSSを用いた際の、実際の表示は下記の通りです。
※ レスポンシブ表示です。

画像とテキストのレイアウト

この文章はサンプルです。
CSS(スタイルシート)を上手に活用することができれば、Webサイトのデザインをより効率的に行うことができるようになります。
この文章はサンプルです。
CSS(スタイルシート)を上手に活用することができれば、Webサイトのデザインをより効率的に行うことができるようになります。

二分割レイアウト

三分割レイアウト

四分割レイアウト

上のようなレイアウトを実現させるためのHTMLはこちらです。
このままコピッて使えます。

備考・注意点

  • スマホ最適化の際に、画像を上、テキストを下にしたいため、クラス「img_left」「img_right」は必ず、「text_left」「text_right」の先に持ってきています。
  • @media screen~のところで、スマホ閲覧時の調整をしています。クラス「contents」の中のDIV全てに、float無し、横幅100%を設定しています。
  • 余白間隔はデザインによって多少調整する時があります。
  • 小数点は旧IEでレイアウト崩れを起こす元になるので、なるべく使いません。