on:2013年1月15日sponsors画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。Squares?デモ実装デモスタイルにはCSS3を使用しているため、モダンブラウザもしくはIE9+でご覧ください。デモページ:1,200pxで表示グリッドはレスポンシブにも対応しています。小さいサイズだと、スクエアになります。実装の準備CSS3をサポートしているか判別するためにModernizeを使用します。実装にはSassを使用します。ダイヤモンド一つまずはダイヤモンドを一つ実装してみましょう。HTMLはdiv要素をa要素で囲みます。Forever</div></a>CSSは下記のようになります。上記のダイヤモンド一つをベースに、3個を一行に配置してみましょう。HTMLはダイヤモンド一つをリスト要素で配置します。Forever</div></a></li></ul>CSSは一行にするため、下記を加えます。}}ダイヤモンドを複数行に一行を増やして、複数行にしてみましょう。最後にレスポンシブ対応として、サイズごとに定義します。SafariなどのWebkit系ブラウザでbox-shadowの下の枠線が欠けてしまうバグがあります。その解決には、次の2行を加えます。