NO.87 背景を使用したレイアウト

タグでも出来る事ですが、CSSを使うと後から編集しやすいと思います。

例
◆HEAD内の記述 <style type="text/css"> <!-- span{width:30px;height:30px;margin:0px;padding:0px;} .Z1{background-color:red;} .Z2{background-color:yellow;} .Z3{background-color:lime;} .Z4{background-color:aqua;} .Z5{background-color:blue;} .Z6{background-color:fuchsia;} .Z7{background-color:maroon;} .Z8{background-color:olive;} .Z9{background-color:green;} .Z10{background-color:teal;} .Z11{background-color:navy;} .Z12{background-color:purple;} .Z13{background-color:gray;} .Z14{background-color:silver;} .Z15{background-color:white;} --> </style>
◆BODY内の記述 <span class=Z1></span><span class=Z2></span><span class=Z3></span><span class=Z4></span> <span class=Z5></span><span class=Z6></span><span class=Z7></span><span class=Z8></span> <span class=Z9></span><span class=Z10></span><span class=Z11></span><span class=Z12></span> <span class=Z13></span><span class=Z14></span><span class=Z15></span><br> <span class=Z2></span><span class=Z3></span><span class=Z4></span> <span class=Z5></span><span class=Z6></span><span class=Z7></span><span class=Z8></span> <span class=Z9></span><span class=Z10></span><span class=Z11></span><span class=Z12></span> <span class=Z13></span><span class=Z14></span><span class=Z15></span><span class=Z1></span><br> <span class=Z3></span><span class=Z4></span><span class=Z5></span><span class=Z6> </span><span class=Z7></span><span class=Z8></span><span class=Z9></span><span class=Z10> </span><span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14> </span><span class=Z15></span><span class=Z1></span><span class=Z2></span><br> <span class=Z4></span><span class=Z5></span><span class=Z6> </span><span class=Z7></span><span class=Z8></span><span class=Z9></span><span class=Z10> </span><span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14> </span><span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span><br> <span class=Z5></span><span class=Z6> </span><span class=Z7></span><span class=Z8></span><span class=Z9></span><span class=Z10> </span><span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14> </span><span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span><span class=Z4></span><br> <span class=Z6></span><span class=Z7></span><span class=Z8></span><span class=Z9></span><span class=Z10></span> <span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><br> <span class=Z7></span><span class=Z8></span><span class=Z9></span><span class=Z10></span> <span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><br> <span class=Z8></span><span class=Z9></span><span class=Z10></span> <span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span><br> <span class=Z9></span><span class=Z10></span> <span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span><span class=Z8></span><br> <span class=Z10></span><span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><br> <span class=Z11></span><span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><span class=Z10></span><br> <span class=Z12></span><span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><span class=Z10></span><span class=Z11></span><br> <span class=Z13></span><span class=Z14></span> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><span class=Z10></span><span class=Z11></span><span class=Z12></span><br> <span class=Z14></span><span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><span class=Z10></span><span class=Z11></span> <span class=Z12></span><span class=Z13></span><br> <span class=Z15></span><span class=Z1></span><span class=Z2></span><span class=Z3></span> <span class=Z4></span><span class=Z5></span><span class=Z6></span><span class=Z7></span> <span class=Z8></span><span class=Z9></span><span class=Z10></span><span class=Z11></span> <span class=Z12></span><span class=Z13></span><span class=Z14></span><br>
◆実行例



















前に戻る　次に進む
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送