Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】background-positionを使った画像の16分割(4x4)やっとできた

f:id:little_strange:20220203235304p:plain

 

 どうも!LSSです!!

 

もう何か月も前の記事ですが、

little-strange.hatenablog.com

で頭を悩ませていた問題が解決しました!

 

 

画像の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>

 

2つある画像ファイルのURLは、同じURLを指定します。

 

 

background-positionの%指定の特異性

developer.mozilla.org

のページ内にある「パーセント値について」の項目に書かれていますが、background-positionの値を%で指定する場合、ちょっと特殊な計算がなされます。

 

例えば、

  • 0%を指定すると左端
  • 50%を指定するとまんなか
  • 100%を指定すると右端

という感じになるのですが…一見「当たり前では?」と納得のいくこの仕様。

実は結構…だいぶ悩ましくもあります^^;

 

例えば…サイズが幅・高さともに25%で、「50% 50%」を指定した場合、

f:id:little_strange:20220203232709p:plain

この赤い四角の部分を示す事になるんですね。

 

じゃあ、

f:id:little_strange:20220203233006p:plain

この部分を指定したい場合、どういう値を指定したらいいんだ??

というのが、数か月前につまづいたっきりだったところです。

leftやtopは「50%」という指定でこの位置になります。

 

ちなみに、この縦横4分割したうち、一番上や一番左は「0%」、一番下や一番右は「100%」となります。

 

「〇%で指定した時、枠の〇%の位置に画像の〇%がくるような位置となるよう調整される」事から、そうなっており、前述したような「左寄せ・中央寄せ・右寄せ」する場合には都合のいい指定方法なのですが、こういう場合に困っちゃいました^^;

 

色々ややこしい計算方法を考えてみたりしたのですが…ふと閃いてみるとごく単純な話で、「0% 33.3% 66.6% 100%」が答えです!

25%の位置にあわせるには33.3%、50%の位置にあわせるには66.6%を指定すればOKです。

つまり、1/3単位ですね。

 

「4分割なのに3で割った単位なの??」と思ったりもしましたが…例えば手の指5本あったら、その間の「また」は1少ない「4」になるのと同じ話。

 

n分割するのにbackground-positionの%指定の場合は『(n-1)で割った値になる』」

というのが結論です。

 

分かってみると…あまりに単純な話でしたw

 

 

16分割する意味

さて、こうして記事にしてみたところで、需要があるのか?は謎ですが…。

 

あくまで%指定にこだわり、縦横比も維持しつつ、画像が縦長でも横長でも均等に16分割できる方法を追い求めたのは…

 

little-strange.hatenablog.com

 

の画像版(画像差し替え可能)を作りたかったからなのでした。

borderでの表現も、コマっぽくするためのものでしたが…いやぁ、ここをクリアするのに時間がかかりすぎましたねw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^