【CSS】background-positionを使った画像の16分割（4x4）やっとできた
どうも！LSSです！！
もう何か月も前の記事ですが、
で頭を悩ませていた問題が解決しました！
画像の16分割
画像を16分割した上で、borderで各枠に盛り上がったような効果を書けています。
これ、16個のdivタグで一つ一つ、16分割した各画像を割り当てています。
（画像の縦横サイズを得るために、その下に一枚絵も隠されていたりしますが。）
なお、元の画像は↓こちら。
悩ましかった表示位置のズレ、画像の端まで表示できていないなどの問題が解決しています^^
コード
<style><!--
#gbox{
display:inline-block;
position:relative;
width:100%;
}
#m0,#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9,#m10,#m11,#m12,#m13,#m14,#m15{
display:inline-block;
position:absolute;
box-sizing:border-box;
width:25%;
height:25%;
background-image:url(画像ファイルのURL);
background-size:400% 400%;
background-origin:border-box;
border:10px solid;
border-color: #d0d0d080 #60606080 #20202080 #b0b0b080;
}
#m0{background-position:0% 0%;left:0%;top:0%;}
#m1{background-position:33.3% 0%;left:25%;top:0%;}
#m2{background-position:66.6% 0%;left:50%;top:0%;}
#m3{background-position:100% 0%;left:75%;top:0%;}
#m4{background-position:0% 33.3%;left:0%;top:25%;}
#m5{background-position:33.3% 33.3%;left:25%;top:25%;}
#m6{background-position:66.6% 33.3%;left:50%;top:25%;}
#m7{background-position:100% 33.3%;left:75%;top:25%;}
#m8{background-position:0% 66.6%;left:0%;top:50%;}
#m9{background-position:33.3% 66.6%;left:25%;top:50%;}
#m10{background-position:66.6% 66.6%;left:50%;top:50%;}
#m11{background-position:100% 66.6%;left:75%;top:50%;}
#m12{background-position:0% 100%;left:0%;top:75%;}
#m13{background-position:33.3% 100%;left:25%;top:75%;}
#m14{background-position:66.6% 100%;left:50%;top:75%;}
#m15{background-position:100% 100%;left:75%;top:75%;}
--></style>
<div id="gbox"><img src="画像ファイルのURL" width="100%"/>
<div id="m0"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="m4"></div>
<div id="m5"></div>
<div id="m6"></div>
<div id="m7"></div>
<div id="m8"></div>
<div id="m9"></div>
<div id="m10"></div>
<div id="m11"></div>
<div id="m12"></div>
<div id="m13"></div>
<div id="m14"></div>
<div id="m15"></div>
</div>
２つある画像ファイルのURLは、同じURLを指定します。
background-positionの%指定の特異性
のページ内にある「パーセント値について」の項目に書かれていますが、background-positionの値を%で指定する場合、ちょっと特殊な計算がなされます。
例えば、
- 0%を指定すると左端
- 50%を指定するとまんなか
- 100%を指定すると右端
という感じになるのですが…一見「当たり前では？」と納得のいくこの仕様。
実は結構…だいぶ悩ましくもあります^^;
例えば…サイズが幅・高さともに25%で、「50% 50%」を指定した場合、
この赤い四角の部分を示す事になるんですね。
じゃあ、
この部分を指定したい場合、どういう値を指定したらいいんだ？？
というのが、数か月前につまづいたっきりだったところです。
leftやtopは「50%」という指定でこの位置になります。
ちなみに、この縦横４分割したうち、一番上や一番左は「0%」、一番下や一番右は「100%」となります。
「〇%で指定した時、枠の〇%の位置に画像の〇%がくるような位置となるよう調整される」事から、そうなっており、前述したような「左寄せ・中央寄せ・右寄せ」する場合には都合のいい指定方法なのですが、こういう場合に困っちゃいました^^;
色々ややこしい計算方法を考えてみたりしたのですが…ふと閃いてみるとごく単純な話で、「0% 33.3% 66.6% 100%」が答えです！
25%の位置にあわせるには33.3%、50%の位置にあわせるには66.6%を指定すればOKです。
つまり、1/3単位ですね。
「４分割なのに３で割った単位なの？？」と思ったりもしましたが…例えば手の指５本あったら、その間の「また」は１少ない「４」になるのと同じ話。
「n分割するのにbackground-positionの%指定の場合は『(n-1)で割った値になる』」
というのが結論です。
分かってみると…あまりに単純な話でしたｗ
16分割する意味
さて、こうして記事にしてみたところで、需要があるのか？は謎ですが…。
あくまで%指定にこだわり、縦横比も維持しつつ、画像が縦長でも横長でも均等に16分割できる方法を追い求めたのは…
の画像版（画像差し替え可能）を作りたかったからなのでした。
borderでの表現も、コマっぽくするためのものでしたが…いやぁ、ここをクリアするのに時間がかかりすぎましたねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
