【HTML/CSS】LINEのグループラインサムネイルの作り方【初心者向け】

LINEのグループの、複数アカウントの画像がランダム(?)に複合されたアイコンの作り方。かなりシンプルだが、発想が無いと意外と困るかもしれない。

完成イメージ

f:id:kentarohorie:20170624152725p:plain

サンプルコード

<div class="hoge_images">
  <img src="http://www.newsweekjapan.jp/stories/assets_c/2016/11/webw161109-trumpelect-thumb-720xauto.jpg">
  <img src="http://img.huffingtonpost.com/asset/crop_0_183_3156_1692,scalefit_630_noupscale/586fed3f1b00002c006e5f8c.jpeg?cache=pkmfo3u6l3">
  <img src="http://livedoor.blogimg.jp/ryokun_2525-ag/imgs/6/f/6fb8d7f4-s.jpg">
  <img src="https://nekogazou.com/wp-content/uploads/2013/01/55270573c8c1630b9b2901f4da9989c7.jpg">
</div>

<style type="text/css">
.hoge_images {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

img {
  width: 50px;
  height: 50px;
  float: left;
  border: 1px white solid;
  box-sizing: border-box;
}
</style>

</style

※画像引用

ドナルド・トランプが米既成政治に逆転勝利 | ワールド | 最新記事 | ニューズウィーク日本版 オフィシャルサイト

「プーチン大統領がサイバー攻撃指示」情報機関が報告書を公表、トランプ氏も認識

安倍晋三って歴代総理の中で一番良くないか? : おぷねら速報

猫の種類まるわかり猫図鑑! - 猫画像どっと 猫ブログ

解説

まず最初のゴールは画像を横並び、かつ上下2つずつに配置することになる。 以下の手順だ。

  1. 親タグのwidth, heightを同じ大きさで設定(後に円にするため)
  2. 親タグ内のimgを、親タグのwidth, hegithの1/2に設定し、floatさせる。

そして、少し発想がいるのが円にするところだが、

border-radius: 50%;

までは何の発想もいらないが、ここで

overflow: hidden;

とすることではみ出した分を見えなくし、円に見えるようにする。

overflowは子要素がfloatしてる場合に、親要素に高さを持たせる際などにも、非常に重宝するし、かなり多くの場面で使用するため、しっかり理解する必要があるだろう。 ここを参考にするといい。