【HTML/CSS】LINEのグループラインサムネイルの作り方【初心者向け】
LINEのグループの、複数アカウントの画像がランダム(?)に複合されたアイコンの作り方。かなりシンプルだが、発想が無いと意外と困るかもしれない。
完成イメージ
サンプルコード
<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つずつに配置することになる。 以下の手順だ。
- 親タグのwidth, heightを同じ大きさで設定(後に円にするため)
- 親タグ内のimgを、親タグのwidth, hegithの1/2に設定し、floatさせる。
そして、少し発想がいるのが円にするところだが、
border-radius: 50%;
までは何の発想もいらないが、ここで
overflow: hidden;
とすることではみ出した分を見えなくし、円に見えるようにする。
overflowは子要素がfloatしてる場合に、親要素に高さを持たせる際などにも、非常に重宝するし、かなり多くの場面で使用するため、しっかり理解する必要があるだろう。 ここを参考にするといい。