tobijibu/create_fibonacci.js Secret

## create_fibonacci.js
//#golden-ratio以下に <div></div><div><div></div><div>～</div></div> の階層を10階層作る
var setDiv = function() {
  let layer = 10,
    gr    = document.querySelector('#golden-ratio'),
    df    = document.createDocumentFragment(),
    div_odd  = document.createElement('div'),
    div_even = document.createElement('div');
  for (var cnt = 0; cnt < layer; cnt++) {
    div_even = setEven(div_even);
  }
  df.appendChild(div_odd);
  df.appendChild(div_even);
  gr.appendChild(df.cloneNode(true));
};
var setEven = function(div_even) {
  let div = document.createElement('div'),
    _div_even = div_even.cloneNode(true);
  div.appendChild(document.createElement('div'));
  div.appendChild(_div_even);
  return div;
};
setDiv();

## fibonacci.css
/* 一番外側のブロック 高さは横幅基準で設定する */
#golden-ratio {
    position: relative;
    width: 100%;
    height: auto;
    display: table;
    border-collapse: collapse;
    border: solid 1px #333;
}

/* 外側のブロックの高さを設定 */
#golden-ratio::after {
    content: "";
    display: block;
    padding-bottom: calc(61.804% + 0.5px);
}

/* 正方形ブロック */
#golden-ratio div:nth-child(odd) {
    position: absolute;
    /* 長方形の幅から黄金比の横幅を設定する */
    width: calc(61.804% - 2px);
    /* 高さは100%指定 親の長方形の高さに合わせると正方形になる */
    height: calc(100% - 2px);
    /* 扇形の線を生成する */
    border: solid 1px #333;
    border-radius: 100% 0 0 0;
    display: table-cell;
}

/* 長方形ブロック */
#golden-ratio div:nth-child(even) {
    position: absolute;
     /* 大きい正方形の横幅の分だけ左にずらす */
    left: 100%;
    /* 正方形用の高さ、幅を設定する */
    width: calc(61.804% - 1px);
    height: 61.804%;
    /* 大きい長方形の左上を基準にして90度回転させる */
    transform-origin: 0 0;
    transform: rotate(90deg);
    display: table-cell;
}

## full.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
/* 一番外側のブロック 高さは横幅基準で設定する */
#golden-ratio {
    position: relative;
    width: 100%;
    height: auto;
    display: table;
    border-collapse: collapse;
    border: solid 1px #333;
}

/* 外側のブロックの高さを設定 */
#golden-ratio::after {
    content: "";
    display: block;
    padding-bottom: calc(61.804% + 0.5px);
}

/* 正方形ブロック */
#golden-ratio div:nth-child(odd) {
    position: absolute;
    /* 長方形の幅から黄金比の横幅を設定する */
    width: calc(61.804% - 2px);
    /* 高さは100%指定 親の長方形の高さに合わせると正方形になる */
    height: calc(100% - 2px);
    /* 扇形の線を生成する */
    border: solid 1px #333;
    border-radius: 100% 0 0 0;
    display: table-cell;
}

/* 長方形ブロック */
#golden-ratio div:nth-child(even) {
    position: absolute;
     /* 大きい正方形の横幅の分だけ左にずらす */
    left: 100%;
    /* 正方形用の高さ、幅を設定する */
    width: calc(61.804% - 1px);
    height: 61.804%;
    /* 大きい長方形の左上を基準にして90度回転させる */
    transform-origin: 0 0;
    transform: rotate(90deg);
    display: table-cell;
}
</style>
</head>
<body>
<div id="golden-ratio2">
    <!-- 1階層 -->
    <div></div>
    <div>
        <!-- 2階層 -->
        <div></div>
        <div>
            <!-- 3階層 -->
            <div></div>
            <div>
                <!-- 4階層 -->
                <div></div>
                <div>
                    <!-- 5階層 -->
                    <div></div>
                    <div>
                        <!-- 6階層 -->
                        <div></div>
                        <div>
                            <!-- 7階層 -->
                            <div></div>
                            <div>
                                <!-- 8階層 -->
                                <div></div>
                                <div>
                                    <!-- 9階層 -->
                                    <div></div>
                                    <div>
                                        <!-- 10階層 -->
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="golden-ratio"></div>
<script>
//#golden-ratio以下に <div></div><div><div></div><div>～</div></div> の階層を10階層作る
var setDiv = function() {
  let layer = 10,
    gr    = document.querySelector('#golden-ratio'),
    df    = document.createDocumentFragment(),
    div_odd  = document.createElement('div'),
    div_even = document.createElement('div');
  for (var cnt = 0; cnt < layer; cnt++) {
    div_even = setEven(div_even);
  }
  df.appendChild(div_odd);
  df.appendChild(div_even);
  gr.appendChild(df.cloneNode(true));
};
var setEven = function(div_even) {
  let div = document.createElement('div'),
    _div_even = div_even.cloneNode(true);
  div.appendChild(document.createElement('div'));
  div.appendChild(_div_even);
  return div;
};
setDiv();
</script>
</body>
</html>
	//#golden-ratio以下に <div></div><div><div></div><div>～</div></div> の階層を10階層作る
	var setDiv = function() {
	let layer = 10,
	gr = document.querySelector('#golden-ratio'),
	df = document.createDocumentFragment(),
	div_odd = document.createElement('div'),
	div_even = document.createElement('div');
	for (var cnt = 0; cnt < layer; cnt++) {
	div_even = setEven(div_even);
	}
	df.appendChild(div_odd);
	df.appendChild(div_even);
	gr.appendChild(df.cloneNode(true));
	};
	var setEven = function(div_even) {
	let div = document.createElement('div'),
	_div_even = div_even.cloneNode(true);
	div.appendChild(document.createElement('div'));
	div.appendChild(_div_even);
	return div;
	};
	setDiv();
	/* 一番外側のブロック高さは横幅基準で設定する */
	#golden-ratio {
	position: relative;
	width: 100%;
	height: auto;
	display: table;
	border-collapse: collapse;
	border: solid 1px #333;
	}

	/* 外側のブロックの高さを設定 */
	#golden-ratio::after {
	content: "";
	display: block;
	padding-bottom: calc(61.804% + 0.5px);
	}

	/* 正方形ブロック */
	#golden-ratio div:nth-child(odd) {
	position: absolute;
	/* 長方形の幅から黄金比の横幅を設定する */
	width: calc(61.804% - 2px);
	/* 高さは100%指定親の長方形の高さに合わせると正方形になる */
	height: calc(100% - 2px);
	/* 扇形の線を生成する */
	border: solid 1px #333;
	border-radius: 100% 0 0 0;
	display: table-cell;
	}

	/* 長方形ブロック */
	#golden-ratio div:nth-child(even) {
	position: absolute;
	/* 大きい正方形の横幅の分だけ左にずらす */
	left: 100%;
	/* 正方形用の高さ、幅を設定する */
	width: calc(61.804% - 1px);
	height: 61.804%;
	/* 大きい長方形の左上を基準にして90度回転させる */
	transform-origin: 0 0;
	transform: rotate(90deg);
	display: table-cell;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<title></title>
	<style>
	/* 一番外側のブロック高さは横幅基準で設定する */
	#golden-ratio {
	position: relative;
	width: 100%;
	height: auto;
	display: table;
	border-collapse: collapse;
	border: solid 1px #333;
	}

	/* 外側のブロックの高さを設定 */
	#golden-ratio::after {
	content: "";
	display: block;
	padding-bottom: calc(61.804% + 0.5px);
	}

	/* 正方形ブロック */
	#golden-ratio div:nth-child(odd) {
	position: absolute;
	/* 長方形の幅から黄金比の横幅を設定する */
	width: calc(61.804% - 2px);
	/* 高さは100%指定親の長方形の高さに合わせると正方形になる */
	height: calc(100% - 2px);
	/* 扇形の線を生成する */
	border: solid 1px #333;
	border-radius: 100% 0 0 0;
	display: table-cell;
	}

	/* 長方形ブロック */
	#golden-ratio div:nth-child(even) {
	position: absolute;
	/* 大きい正方形の横幅の分だけ左にずらす */
	left: 100%;
	/* 正方形用の高さ、幅を設定する */
	width: calc(61.804% - 1px);
	height: 61.804%;
	/* 大きい長方形の左上を基準にして90度回転させる */
	transform-origin: 0 0;
	transform: rotate(90deg);
	display: table-cell;
	}
	</style>
	</head>
	<body>
	<div id="golden-ratio2">
	<!-- 1階層 -->
	<div></div>
	<div>
	<!-- 2階層 -->
	<div></div>
	<div>
	<!-- 3階層 -->
	<div></div>
	<div>
	<!-- 4階層 -->
	<div></div>
	<div>
	<!-- 5階層 -->
	<div></div>
	<div>
	<!-- 6階層 -->
	<div></div>
	<div>
	<!-- 7階層 -->
	<div></div>
	<div>
	<!-- 8階層 -->
	<div></div>
	<div>
	<!-- 9階層 -->
	<div></div>
	<div>
	<!-- 10階層 -->
	<div></div>
	<div></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div id="golden-ratio"></div>
	<script>
	//#golden-ratio以下に <div></div><div><div></div><div>～</div></div> の階層を10階層作る
	var setDiv = function() {
	let layer = 10,
	gr = document.querySelector('#golden-ratio'),
	df = document.createDocumentFragment(),
	div_odd = document.createElement('div'),
	div_even = document.createElement('div');
	for (var cnt = 0; cnt < layer; cnt++) {
	div_even = setEven(div_even);
	}
	df.appendChild(div_odd);
	df.appendChild(div_even);
	gr.appendChild(df.cloneNode(true));
	};
	var setEven = function(div_even) {
	let div = document.createElement('div'),
	_div_even = div_even.cloneNode(true);
	div.appendChild(document.createElement('div'));
	div.appendChild(_div_even);
	return div;
	};
	setDiv();
	</script>
	</body>
	</html>