[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート

画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。

Who Says the Web is Just for Squares?

• デモ
• 実装

デモ

スタイルにはCSS3を使用しているため、モダンブラウザもしくはIE9+でご覧ください。

デモページ：1,200pxで表示

グリッドはレスポンシブにも対応しています。

デモページ：800pxで表示

小さいサイズだと、スクエアになります。

デモページ：480pxで表示

実装

実装の準備

• CSS3をサポートしているか判別するためにModernizeを使用します。
• 実装にはSassを使用します。

ダイヤモンド一つ

まずはダイヤモンドを一つ実装してみましょう。
HTMLはdiv要素をa要素で囲みます。

<a href="#" class="diamond">
	<div class="content">
		Diamonds Are Forever
	</div>
</a>

CSSは下記のようになります。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

$diamondSize: 190px;
 
.diamond {
	background: #f4f4f4;
	@include box-shadow(0 0 0 1px #ccc);
	color: #000;
	display: block;
	height: $diamondSize;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: $diamondSize;
 
	.csstransforms }
 
.content {
	display: table-cell;
	height: $diamondSize;
	padding: 0 10px;
	@include rotate(45deg);
	text-align: center;
	vertical-align: middle;
	width: $diamondSize;
}

ダイヤモンドを一行分

上記のダイヤモンド一つをベースに、3個を一行に配置してみましょう。
HTMLはダイヤモンド一つをリスト要素で配置します。

<ul class="diamonds">
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
</ul>

CSSは一行にするため、下記を加えます。

.diamonds {
	font-size: 0;
	margin: 40px auto;
 
	.csstransforms > li {
		display: inline-block;
		font-size: 18px;
		margin-right: 80px;
 
		.no-csstransforms }
}

ダイヤモンドを複数行に

一行を増やして、複数行にしてみましょう。

.csstransforms .diamonds > li {
	//Add left margin to the 4th diamond,
	//and then every fifth diamond
	&:nth-child(5n+4) {
		margin-left: 135px;
	}
	
	//Remove the right margin to the 3rd diamond,
	//and then every fifth diamond
	&:nth-child(5n+3) {
		margin-right: 0;
	}
 
	//Add negative top margin to every child after the 3rd diamond
	&:nth-child(n+3) {
		margin-top: -55px;
	}
}

レスポンシブ対応

最後にレスポンシブ対応として、サイズごとに定義します。

@mixin respond-to($query) {
	@media only screen and #{$query}  {
		@content
	}
}
 
@mixin diamond-grid-breakpoint($query, $maxWidth, $n, $maxRow) {
	@include respond-to(#{$query}) {
		.csstransforms n+#{$maxRow + 1}) {
					margin-left: 135px;
				}
 
				&:nth-child(#{$n}n+#{$maxRow}) {
					margin-right: 0;
				}
 
				&:nth-child(n+#{$maxRow}) {
					margin-top: -55px;
				}
			}
		}	
	}
}
 
$diamondQuery1: '(min-width: 1348px)';
$diamondQuery2: '(max-width: 1347px) and (min-width: 1078px)';
 
.diamonds {
	@include diamond-grid-breakpoint($query: $diamondQuery1, $maxWidth: 1270px, $n: 9, $maxRow: 5);
	@include diamond-grid-breakpoint($query: $diamondQuery2, $maxWidth: 1000px, $n: 7, $maxRow: 4);
}

Webkit系ブラウザのバグ

Chrome, SafariなどのWebkit系ブラウザでbox-shadowの下の枠線が欠けてしまうバグがあります。
その解決には、次の2行を加えます。

.diamond {
	@include backface-visibility(hidden);
	@include perspective(1000);
}