みなさんこんにちは。
インスパイアの喜多です。

今回はサイトのデザインに関するお話です。

やりたかったこと

〇5カラムでコンテンツを配置し、各コンテンツの背景色を異なる色に指定
〇各コンテンツの背景に使用する色はロゴに使用されている赤、オレンジ、黄色、緑、青で固定
〇ページを開くたびに5色の並びを変更したい

やったこと

各ボックスにそれぞれ[box01]～[box05]までクラスを付与。
また、各背景色の指定用CSS[box_bg01]～[box_bg05]を用意。
jQueryでぺージの読み込み時に、
[box01]～[box05]に対して[box_bg01]～[box_bg05]がランダムで一つずつ付与されるように設定

jQuery(function($){
	var arr = [1,2,3,4,5];
	var a = arr.length;
	while (a) {
		var j = Math.floor( Math.random() * a );
		var t = arr[--a];
		arr[a] = arr[j];
		arr[j] = t;
	}
	$('.box01').addClass('box_bg0' + arr[0]);
	$('.box02').addClass('box_bg0' + arr[1]);
	$('.box03').addClass('box_bg0' + arr[2]);
	$('.box04').addClass('box_bg0' + arr[3]);
	$('.box05').addClass('box_bg0' + arr[4]);
});

一般的な、範囲内の要素をランダムに並べ替えるやり方で対応。

もうちょっと要件が複雑になってくれば考えることも増えて面白くなりそうではあるのですが、
果たしてそんな課題が来たとして解決に充てられる時間があるのかは怪しいところですので、
来てほしいような来てほしくないような気分です。

それでは、また。

P.S

先週お話していた鶏チャーシューですが、
食べたい欲が高すぎて最近自分で作ることに挑戦し始めました。

火加減が難しくて、気を抜くとすぐにパッサパサになってしまいます。

ただ、これは私の個人的な考えなのですが、
自分で調理した食べ物の安全性にかなり疑いを持っていまして、
火入れ時間を短くしすぎると「この状態の鶏肉って食べて問題ないのか、、、？」
という不安が出てきてしまい結局毎回パッサパサになってしまっています。

お店で出される分には不安とか感じないんですけどね。
僕が好きなあのしっとり鶏チャーシューへの道は長く険しいようです。