iPadを操作する男性

【RWD、CSS3編】WEBのコーディングでググって調べた基礎の基礎のまとめ

【RWD、CSS3編】WEBのコーディングでググって調べた基礎の基礎のまとめ

iPadを操作する男性

昨日の「【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制作のお役にも立てれば幸いです。