コーディング規則

Webデザイン

コーディング規則が決まっていると、
コードが整い、修正しやすくスピードも早くなります。
かといって独自のルール過ぎても、チームメンバーに共有できずよい成果は得られません。
有名どころのコーディング規則です。
▽Google
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
▽MOZILLA
https://developer.mozilla.org/ja/docs/Web
まず他のコーディング規則を参考にすることで、まとめやすく
また決めるべき箇所も見えてくるはず。
メンバーでしっかりと共有することも大切です。

Responsive Web Designとは

Webデザイン

Responsive Web DesignとはMediaQueryで
ウィンドウ幅によってcssを出し分けるデザイン方法です。
基本的に、PC、タブレット、スマートフォンで分けています。
あくまで幅なので、PCで見ても、幅を狭くすればスマホ向けのデザインが見れます。
以下、まとめサイトです。
▽Responsive Web Design: 50 Examples and Best Practices
http://designmodo.com/responsive-design-examples/
▽Media Queries
http://mediaqueri.es/
おもしろいけど、UI的にちょっとびっくりしますね。
私的に考えられるメリット/デメリットを出してみました。
メリット
・cssを作るだけで、デバイスごとに対応できる
・HTMLは1つになり、管理しやすくなる
・更新個所が減り、運用の時間が減る
・更新時にデバイス別のHTMLと差異が出ることはなくなる
デメリット
・HTMLを組むときにしっかり先を見通す必要がある
・PCで見ても幅によってスマホ向けになってしまう
・スマホで見たときにPC向けページは見れない
・レイアウトが大幅に変わるときは困難
・デバイスごとでモジュールを出し分ける場合は、display:none;を使う必要がある
こちらのような、ボックスが何個も並んでるデザインのサイトには適しているように思います。
▽Mr. Simon Collison
http://colly.com/
構造的に無理がなく、幅によって見やすくしてくれているというかんじですね。
Responsive Web Designは、
サイトの構造や、運用の頻度/内容によって熟慮した方がよさそうですね。

SassとLESS cssメタ言語

Webデザイン

Sass、LESSとは、
cssを記述するためのメタ言語です。
ご存知の方も多いのではないでしょうか。
気になったそれぞれのメリットは、以下のようなものです。
Sass
・プロパティのネストができる
・条件分岐、繰り返しが使える
LESS
・書き方がcssに近しい
・クライアントサイドでも変換可能
どちらもまだまだアップデートされていくようなので
今まで片方にしかなかった機能が、もう片方にも搭載される、
ということも充分考えられます。
一概にどちらがよいとも言えないですよね。。
どちらも試してみるのもいいですし、
現在の案件の方向性や、コーディング経験の有無などで判断していくのもいいですね。
丁寧に比較を載せてくださっている方がいらっしゃいましたので
こちらをご参考にどうぞ。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

cssプロパティの記述順序

Webデザイン

cssのプロパティ順序を決めておくと、ソースが綺麗になり、
修正箇所がすぐに見つけられるようになります。
運用の際に楽になりますし、重複した指定をしてしまうなどのミスも減りますよね。
基準としてよく使われるのは、Mozillaの順序ですね

display
list-style
position
float
clear
width
height
margin
padding
border
background
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

▽Mozillaのcss
http://www.mozilla.org/css/base/content.css
大切なのはルールを守ることだと思いますので、必ずしもこれというわけではありません。
考えられた順序だとは思いますので、参考にしていただけたらと思います。

opacityとrgbaの指定について

Webデザイン

透明度を指定するにはopacityとrgbaを使う方法があります。

opacityは全体の透明度の指定ができます。
透明度は子要素にも引き継がれます。

rgbaはcolorやbackgroundなどの要素に指定します。

値は、同じく
0  〜  1
透明  不透明
で指定します。
小数点での指定が可能です。

例:

body { background:#ccc; }
.modA,
.modB,
.modC {
height: 50px;
margin: 0 10px 20px;
background: #f60;
padding: 10px;
text-align: center;
font-size: 40px;
color: #fff;
}
.modB {
opacity: 0.5;
}
.modC {
background: rgba(255,153,0,0.5);
color: rgba(255,255,255,0.5);
}

img01_201202.png

便利ツール発見です
rgb ←→ 16進数 にできます
http://www.kitaq.net/lib/rgb/

 

css3 グラデでアルファ指定をする

Webデザイン

css3でアルファを設定できるようになりましたが、
アルファとグラデの併用です。

background: -webkit-gradient(linear, left top, right bottom, from(#f3c), to(rgba(255,255,255,0)));
background: -moz-linear-gradient(top, #f3c, rgba(255,255,255,0));

rgbaで指定します。

rgbをちゃんと設定しないと色味が変になるので注意です。。