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));

こんな感じで記述が簡潔になります。