酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

[書評] CSS3スタンダード・デザインガイドを読みました!

Bootstrapベースで画面を作り上げている途中で、要素を思った通りに配置するためには、どうすればいいだろうって、悩んだりしませんか?そんな時に、デスクにあると便利なのがこの『CSS3スタンダード・デザインガイド』です。


CSS3スタンダード・デザインガイドの概略

この本はいわゆるCSS3中心のリファレンス本で、CSSを使ったデザインをしている時に『正しい定義をしっかり理解したい、サンプルソースを見てみたい』ときに一番活躍してくれそうな本です。

エンジニア個人でBootstrapなどを使いながらサービスを作っていて、CSSで最低限のデザインがしたいという人にぜひ読んで欲しい本です。

特に参考になったサンプル

この本の中で次ぜひ使ってみたいと思えたサンプルを幾つか紹介してみます。

フレキシブルボックスレイアウト

floatのような段組のレイアウトを簡単に実現することができるのが、『フレキシブルボックスレイアウト』です。

CSS3スタンダード・デザインガイド

HTMLのサンプルソースはこちら。

1
2
3
4
<div id="container">
  <div id="column01"><img src="....jpg" ....></div>
  <div id="column02">texttexttext...</div>
</div>

CSS側のサンプルソースはこちら。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {
  border: dotted 2pb blue;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
}
#column01 {
  background-color: orange;
  width: 200px;
}
#column02 {
  background-color: greenyellow;
  width: 400px;
}

ちなみにCompassにも類似の機能があります。良かったら、こちらもどうぞ。

マルチカラムの段にまたがる表示

複数の段にまたがる形でテキストを表示する方法です。

CSS3スタンダード・デザインガイド

HTMLのサンプルソースはこちら。

1
2
3
4
5
<div>
  <h2>おすすめサンドイッチ</h2>
  <p>焼きたての手作りパンは... 略</p>
  .... 略 ....
</div>

CSSのサンプルソースはこちら。

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
  width: 800px;
  margin: auto;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
h2 {
  background-color: greenyellow;
  padding: 5px;
  column-span: all;
  -webkit-column-span: all;
}

他にもサンプルソースや定義が大量にあるので、CSS3を正しく理解したいときには是非、この本をご検討下さい!

おすすめの書籍