背景作成１１■ブロック並べの背景Ｄボーダー３変化

●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
JavaScriptとCSSを利用して、背景を作成します。
見本はボーダーの指定方法の中では、一番簡単な横ボーダーです。色や幅を自由に変更できます。
ソースの中の指定が違うだけで、■背景作成８ブロック並べの背景Ａ格子と同じ JavaScript です。

今回の指定では、ブロックを囲むための縦線も横線も数値は「0」です。
実は縦線や横線の正体は、ブロックの隙間から見えるbodyの背景色です。
その隙間を「0」にして、今回の横ボーダーは JavaScript のソースの中の「色の並べ方」指定だけで表示しています。

「通常(ランダム)は 0」「横一列に同色を並べる(横ボーダー)は 1」「縦一列に同色を並べる(縦ボーダー)は 2」です。
１．この見本は色の並べ方」指定を「1」に指定して横ボーダーにしました
２.「色の並べ方」指定を「2」に変更すると縦ボーダーに変化します
３.「色の並べ方」指定を「0」に変更するとボーダーではなくなり、不思議な幾何学模様になります。
この「0」指定に、ブロックを囲むため縦線と横線に数値をいれた背景が、■背景作成１０ブロック並べの背景Ｃ色四角です。

さて、今回の見本では body の背景色は白色指定ですが、「縦線と横線」として使用していません。
でも JavaScript のソースの中で、ブロックの透過度指定を「0.9」としたので、背景の白色が少し透けて見えます。
だから実際の色よりも、すこし白っぽいパステルカラーになります。
ここを「1」にすると、完全不透過で実際の色が表示されます。

このJavaScriptは、■面白６マウスでブロック落としを改造して作成しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景作成１１■ブロック並べの背景Ｄボーダー３変化</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★今回はbodyの背景色自体は表示されません*/
body{
background:#fff;/*★必須。見本は白色。JavaScriptに透過度指定を付けると背景色が透けます*/
color:#000;/*★文字色黒色。お好みで*/
}

/*★タイトル文字指定。影付き。不要なら削除*/
.test1{
margin-top:100px;/*★位置指定*/
font: bold 30px Arial,sans-serif;/*★太字、サイズ、フォント書体を一括指定*/
color: #f00;/*★文字色　赤色*/
text-shadow: 5px 5px 5px #888;/*★文字の影指定。灰色のボカシ*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★下記１行がタイトル文字指定。不要なら削除-->
<p class="test1">●動くJavaScript</p>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*================================================================================
背景作成・ブロック並べの背景Ｄボーダー３変化   ★2016/04/07
参考：マウスでブロック落とし By OpenSpace：http://www.openspc2.org/HTML_JS_CSS/image/020/
==================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★ブロックの色指定。var bc=new Array("●");とすると１色表示になります。見本はオレンジ、ピンク、黄色、灰色
var bc=new Array("#fda","#fdf","#ffc","#eee");
//★色の並べ方「通常(ランダム)は 0」「横一列に同色を並べる(横ボーダー)は 1」「 縦一列に同色を並べる(縦ボーダー)は 2」
var lineC=1;
var wbk=10;//★ブロックの横幅。単位はpx
var hbk=10;//★ブロックの縦幅。単位はpx
var wln=0;//★縦線の幅(ブロックとブロックの横間隔)。0にすると横ボーダー。縦線も横線も両方0にして、色の並べ方だけでボーダーも可
var hln=0;//★横線の幅(ブロックとブロックの縦間隔)。0にすると縦ボーダー。縦線も横線も両方0にして、色の並べ方だけでボーダーも可
var opa=0.8;//★ブロックの透過度指定。1～0.1で指定。指定しない時は 1 。0は不可。ブロックからbodyの背景色(線の色)が透けて見えます。

var ft="";//★模様として使用する文字の指定。指定しない時は　var ft="";で
var bCSS=""; //★円形や影指定や文字装飾指定。指定しない時は　var bCSS=""; で。

//指定ここまで------------------------------------------------------------------------
var wb=wln+wbk;//ブロックの横幅
var hb=hln+hbk;//ブロックの縦幅
var w=Math.floor(window.innerWidth/wb);
var h=Math.floor(window.innerHeight/hb);
for (var j=0; j<=h; j++){
for (var i=0; i<=w; i++){
if(lineC==1){randombc=bc[j%bc.length];}//■横ボーダー専用。ドットは横に同じ色が並ぶ
else if(lineC==2){randombc=bc[i%bc.length];}//■縦ボーダー専用。ドットは縦に同じ色が並ぶ
else{randombc=bc[Math.floor(Math.random()*bc.length)];}//■色指定。通常使用（ランダム）
var wTag="<div style='position:fixed; top:"+j*hb+"px; left:"+i*wb+"px; width:"+wbk+"px; height:"+hbk+"px;background:"+randombc+"; z-index:-10; opacity:"+opa+"; "+bCSS+"'>"+ft+"</div>";
document.write(wTag);
}}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景作成１１■ブロック並べの背景Ｄボーダー３変化 最終修正日 : 2016/04/07

　背景作成１１■ブロック並べの背景Ｄボーダー３変化　　　　　最終修正日 : 2016/04/07