ページのキャッチコピーの背景をどうしようかなと考えていた時に、ランダムで生成される四角形にしてみたらかわいいんじゃないかなと思ったので、作ってみました。モダンブラウザ用です。

サンプル

※表示を見たい場合は Result をクリック

四角形は可変なのでウインドウ幅を伸ばしたり、縮めたりすると動きがあります。

HTML

  

  
  

    

      
Walk on.
      
You have to learn to walk before you run.
    
  

四角形はli要素をJavaScriptで生成して、list_containerのul要素内に並べます。

CSS（抜粋）

// 外枠
#mosaic {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

// ul要素
#mosaic #list_container {
  position: absolute;
  width: 120%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -moz-align-content: stretch;
  -ms-align-content: stretch;
  -o-align-content: stretch;
  align-content: stretch;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  padding: 0;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

// li要素（四角形）
#mosaic #list_container li {
  -webkit-flex: 0 0 100px;
  -moz-flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  -o-flex: 0 0 100px;
  flex: 0 0 100px;
  list-style: none;
  height: 100px;
}

外枠の高さをli要素の3つ分を設定し、li要素の生成数が多くてはみ出るものはoverflow:hiddenで隠して見えないようにしています。

ul要素は、親要素のサイズピッタリにしてるとウインドウ幅を伸縮していると右端で段落ちが発生して四角形がなくなってしまいますので、幅を120%程度に広げておいて空白を防ぐようにしています。

JavaScript

    //ランダムな数を生成する関数式
    var randFnc = function(min, max) {
      return Math.floor(Math.random() * max + 1 - min) + min;
    };
    //出力先の指定
    var target = document.getElementById("list_container");

    //ブロック生成
    for (var i = 0; i < 200; i += 1) {

      var li = document.createElement("li");
      //ランダム色を生成 hslは色相, 明度, 彩度で指定する
      li.style.backgroundColor = 'hsl(' + randFnc(20, 186) + ', 100%, 86%)';
      //生成したリストを追加
      target.appendChild(li);
    }

    //背景を動かす
    setInterval(function(){
    	//はじめのli要素を変数に入れる
    	var changeItem = target.childNodes[1];
    	//要素の削除
    	target.removeChild(changeItem);
    	//要素の追加
    	target.appendChild(changeItem);

    },400);

色は生成時に全自動で作成しています。RGB指定だと色の彩度や明度もバラバラになってしまうので、HSL指定で明度と彩度は固定して極力黒が強い色を出さないように調整して、あとは色相の好きな範囲をランダムな値で出るようにして表示することにしました。

ブロックの生成数は 画面幅 / 100px * 3列でフルHDでだいたい60個くらいあれば大丈夫ですが、高解像度が進んでいるので、200個くらいにしておきました。多めにしていても溢れないので大丈夫です。

背景を動かすは遊びで入れてみました。無くても可愛いですよ。

ソフトウェア開発でプロジェクトに対して、縦軸プロジェクト名、横軸開発担当の開発合計時間で、
各担当者の開発時間はHighchartのStacked barで表現できるのですが、
トータルの時間や見積価格や単価を出そうとプロジェクト名の表示に追記すると省略表示されてしまいます。
そこで、HighchartのStacked barのプロジェクト名表示情報からx座標とy座標を取り、プロジェクト名の左横に
表示することに成功しました。（ただし、2016/07/14時点のHighchartのStacked barに限られましたらお許しください。）
その参考になるソースを掲載しますので、お役にたてれば幸いです。

	
	
	

	
	

	
aaa
aaa
aaa
aaa
aaa