【RWD、CSS3編】WEBのコーディングでググって調べた基礎の基礎のまとめ
昨日の「【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ」に引き続き、今回はWEBのコーディングでググって調べた「レスポンシブWEBデザイン（RWD）、CSS（主にCSS3とジェネレーター）編」です。それでは早速、まとめていきましょう！
レスポンシブWEBデザイン（RWD）
1度作ると要領はわかってそれほど難しくないレスポンシブWEBデザインなのですが、久々に行うと根本的なところがあやふやだったので、作業のプロセスなどを一通りググって調べました。おかげで大分マスター出来てきたと思います。色々と細々したことがありますが、さっくりした感覚では、可変したければ%と指定、可変しなくて良いのならpx指定と考えると、結構頭の中がスッキリしました。
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ | FEVDES BLOG
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
CSS（主にCSS3）
CSS3のグラデーションなどは、ベンダープレフィックスを含めると、複雑で覚えられないので良く調べていました。それと、CSS3ではbackgroundプロパティがかなり進化しているので、使いこなせるようになってくるとHTMLの記述がとてもシンプルになりそうです。
Can I use… Support tables for HTML5, CSS3, etc
テキストの両端を均等にそろえるCSS | 独学Webデザイナーの覚書
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
CSS3 text-shadow box-shadow の使い方 | CSS Lecture
CSS3 での背景指定方法のまとめ | Unformed Building
Lesson 04 背景画像の複数指定で手軽にリッチなデザインに – Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編 – MdN Design Interactive
CSS3で知っておきたい基礎知識「グラデーション」の徹底解説！｜最適化ノウハウコラム記事 ～スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ～
CSSで背景画像・グラデーションを使用し、sizeも指定するときの注意｜WEB Drawer
CSS3ジェネレーター
今回はCSS3を多様していたので（これが後々の悲劇に繋がるのですが…）、自分で記述したり、IllustratorのCSSの書き出し機能を使ったりしてみました。しかし、結論的には自分に合ったジェネレーターを使うのが1番楽で、結果、コードもキレイになりました。ここでは、定番の使いやすいものを紹介しておきます。
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
Name …
CSS Border Radius Generator
CSS3 Button Generator
Ultimate CSS Gradient Generator – ColorZilla.com
CSS …
CSS3 PIE: CSS3 decorations for IE
Grad3
まとめ
今回のまとめの中でも特にCSS3に関することや、CSS3のジェネレーターはしょっちゅう見ることになりそうです。みなさんのWEB制作のお役にも立てれば幸いです。
北川 貴清,窪木 博士,KLEE Atelier*Spoon,小浜 愛香,佐々木 恵,棧敷 友香子,錦織 幸知,前川 昌幸,山川 祐一郎 エムディエヌコーポレーション 2013-09-25
