[CSS]黄金螺旋を作成するスタイルシートのチュートリアル

サイト構築 -CSS

Post on:2010年12月9日

sponsorsr

スタイルシートで、黄金比を使った黄金螺旋を作成するチュートリアルを紹介します。

Golden Spirals

[ad#ad-2]

そのままでは実用性はないと思いますが、いつか何かに使えるかなあ。

スタイルシートで黄金螺旋を作成：HTML
スタイルシートで黄金螺旋を作成：準備編
スタイルシートで黄金螺旋を作成：完成編

スタイルシートで黄金螺旋を作成：HTML

元となるHTMLは、14個のdivを使った入れ子です。

HTML

<body>
<div id="container">
	<div class="cycle">
	<div>
	<div>
	<div>
	<div class="cycle">
		<div>
		<div>
		<div>
		<div class="cycle">
		<div>
			<div>
			<div>
			<div class="cycle"></div>
			</div>
			</div>
		</div>
		</div>
		</div>
		</div>
		</div>
	</div>
	</div>
	</div>
	</div>
	</div>
</div>
</body>

スタイルシートで黄金螺旋を作成：準備編

まずは、基本となる黄金比の設計です。

デモページ

[ad#ad-2]

CSS

html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

#container > div {
  width: 466px;
  height: 288px;
}

.cycle,
.cycle > div > div {
  height: 38.2%;
  width: 100%;
}
.cycle > div,
.cycle > div > div > div {
  width: 38.2%;
  height: 100%;
}

#container div {
  background-color: rgba(0,0,0,0.07)
}

次にポジションを変更します。

CSS

html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

#container > div {
  width: 466px;
  height: 288px;
}

.cycle,
.cycle > div > div {
  height: 38.2%;
  width: 100%;
}
.cycle > div,
.cycle > div > div > div {
  width: 38.2%;
  height: 100%;
}

#container div {
  background-color: rgba(0,0,0,0.07)
}

.cycle {
  position: absolute;
  top: 0;
}
.cycle > div {
  position: absolute;
  right: 0;
}
.cycle > div > div {
  position: absolute;
  bottom: 0;
}
.cycle > div > div > div {
  position: absolute;
  left: 0;
}

ポジションを変更した矩形のものに角丸（border-radius）を使用して、黄金螺旋を作成します。

デモページ

CSS

html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

#container > div {
  width: 466px;
  height: 288px;
}

.cycle,
.cycle > div > div {
  height: 38.2%;
  width: 100%;
}
.cycle > div,
.cycle > div > div > div {
  width: 38.2%;
  height: 100%;
}

#container div {
  background-color: rgba(0,0,0,0.07)
}

.cycle {
  position: absolute;
  top: 0;
}
.cycle > div {
  position: absolute;
  right: 0;
}
.cycle > div > div {
  position: absolute;
  bottom: 0;
}
.cycle > div > div > div {
  position: absolute;
  left: 0;
}

.cycle {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-left-radius: 10000px;
  -moz-border-radius-topleft: 10000px;
  border-top-left-radius: 10000px;
}
.cycle > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-right-radius: 10000px;
  -moz-border-radius-topright: 10000px;
  border-top-right-radius: 10000px;
}
.cycle > div > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-bottom-right-radius: 10000px;
  -moz-border-radius-bottomright: 10000px;
  border-bottom-right-radius: 10000px;
}
.cycle > div > div > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-bottom-left-radius: 10000px;
  -moz-border-radius-bottomleft: 10000px;
  border-bottom-left-radius: 10000px;
}

スタイルシートで黄金螺旋を作成：完成編

黄金螺旋をブラウザの表示領域いっぱいに表示するため、JavaScriptを使用します。

デモページ

JavaScript

スクリプトには、jquery.jsを使用し、下記のスクリプトを記述します。

$(document).ready(function() {
  var phi = (1 + Math.sqrt(5))/2;

  $(window).resize(function() {
    var goldenWidth  = windowWidth  = $(this).width(),
        goldenHeight = windowHeight = $(this).height();

    if (windowWidth/windowHeight > phi) {
      // panoramic viewport - use full height
      goldenWidth  = windowHeight * phi;
    } else {
      // portrait viewport  - use full width
      goldenHeight = windowWidth / phi;
    };

    $("#container > div.cycle")
      .width(goldenWidth)
      .height(goldenHeight);

  }).resize();

});

CSS

html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

#container > div {
  width: 466px;
  height: 288px;
}

.cycle,
.cycle > div > div {
  height: 38.2%;
  width: 100%;
}
.cycle > div,
.cycle > div > div > div {
  width: 38.2%;
  height: 100%;
}

#container div {
  background-color: rgba(0,0,0,0.07)
}

.cycle {
  position: absolute;
  top: 0;
}
.cycle > div {
  position: absolute;
  right: 0;
}
.cycle > div > div {
  position: absolute;
  bottom: 0;
}
.cycle > div > div > div {
  position: absolute;
  left: 0;
}

.cycle {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-left-radius: 10000px;
  -moz-border-radius-topleft: 10000px;
  border-top-left-radius: 10000px;
}
.cycle > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-right-radius: 10000px;
  -moz-border-radius-topright: 10000px;
  border-top-right-radius: 10000px;
}
.cycle > div > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-bottom-right-radius: 10000px;
  -moz-border-radius-bottomright: 10000px;
  border-bottom-right-radius: 10000px;
}
.cycle > div > div > div {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-bottom-left-radius: 10000px;
  -moz-border-radius-bottomleft: 10000px;
  border-bottom-left-radius: 10000px;
}