ノンデザイナーズ・デザインブック 4つの基本原則
デザインの4つの原則
上手なデザインに共通して見つけることができる4つの基本原則の概要を示す。
1.近接
関連する項目は近づけてグループ化する。いくつかの項目が互いに近接しているとき、それらは1つの視覚的ユニットとして認識される。
これにより情報が組織化され、読者に混乱の少ない明快な構造を提供できる。
2.整列
あらゆる要素にほかの要素との視覚的な関連を持たせる必要がある。
これにより明快、洗練、新鮮、という印象が生まれる。
3.反復
色、形、質感、位置関係、線の太さ、書体、サイズ、画像などの視覚的要素を作品全体を通して繰り返す。
これにより組織化を促進し、一体感を出す。
4.コントラスト
ページ上の要素が類似するのを避ける。
もし要素(書体、色、サイズ、線の太さ、形、空きなど)が同一でない場合、はっきり違わせる。
これにより視覚を引きつけ、読者を読む気にさせる。
Mac OS X のDock風の表現をcssで実現する
やりたいこと
できあがったもの
コード
<!-- sectionタグ内に画像を並べて表示 --> <section id="dock"> <img src="http://f.st-hatena.com/images/fotolife/j/javabayashi/20140503/20140503131045.jpg?1399090451" /> <img src="http://f.st-hatena.com/images/fotolife/j/javabayashi/20140503/20140503131045.jpg?1399090451" /> <img src="http://f.st-hatena.com/images/fotolife/j/javabayashi/20140503/20140503131045.jpg?1399090451" /> <img src="http://f.st-hatena.com/images/fotolife/j/javabayashi/20140503/20140503131045.jpg?1399090451" /> <img src="http://f.st-hatena.com/images/fotolife/j/javabayashi/20140503/20140503131045.jpg?1399090451" /> </section>
/* 画像の初期表示 */ section#dock img { float: left; width: 64px; height: 64px; } /* hoverした画像を拡大 */ section#dock img:hover { width: 96px; height: 96px; } /* 隣接した画像を拡大 */ section#dock img:hover + img { width: 80px; height: 80px; }
うん。なんか違う。
floatでいろいろ寄せる
左に寄せる
こんな感じで見出しを左に寄せたいときは、cssでfloat:leftの設定を行う。
同様にfloat:rightを設定すれば見出しは右に寄ります。
h1 { float:left; }
floatプロパティによる流し込みを解除する
float: both;
画像を並べて表示する
先行するフロートした要素が存在する場合、同様にフロートを指定した次の要素は前の要素とかぶらないように並んで表示されます。
また、内容幅を超えた場合は下に移動します。
この仕様を活用すれば、imgタグにfloat:leftを設定することで以下のように画像を一覧表示させることができます。
拡張forをIterable#forEachで置き換える
java5で導入された拡張forのおかげでListから要素を取り出す際の記述を簡潔に行えるようになりましたが、java8でIterableインタフェースに追加されたfoEachメソッドを使用することで更に簡潔に記述できます。
リストから文字列を一つづつ取り出して表示するプログラムを用いて比較してみます。
拡張forを使用した場合
List<String> list = Arrays.asList("1", "2", "3"); for (String s : list) { System.out.println(s); }
forEachメソッドを使用した場合
List<String> list = Arrays.asList("1", "2", "3"); list.stream().forEach(s -> System.out.println(s));
こんな感じで記述が簡潔になります。