1<!DOCTYPEhtml>23<htmllang="ja">45<head>6<metacharset="utf-8">7<metaname="author"content="liveAsNotes">8<metaname="description"content="this is a demo">9<metaname="format-detection"content="telephone=no, address=no, email=no">10<metaname="viewport"content="width=device-width, initial-scale=1.0">11<metahttp-equiv="X-UA-Compatible"content="IE=edge">12<linkrel="stylesheet"href="style.css">13<title>demo</title>14</head>1516<body>17<divclass="select-img-list">18<label>19<inputname="myphoto"value="myphoto"type="radio">20<imgsrc="https://dummyimage.com/500x500/000/fff">21</label>2223<label>24<inputname="myphoto"value="myphoto"type="radio">25<imgsrc="https://dummyimage.com/500x500/000/fff">26</label>2728<label>29<inputname="myphoto"value="myphoto"type="radio">30<imgsrc="https://dummyimage.com/500x500/000/fff">31</label>3233<label>34<inputname="myphoto"value="myphoto"type="radio">35<imgsrc="https://dummyimage.com/500x500/000/fff">36</label>3738<label>39<inputname="myphoto"value="myphoto"type="radio">40<imgsrc="https://dummyimage.com/500x500/000/fff">41</label>4243<label>44<inputname="myphoto"value="myphoto"type="radio">45<imgsrc="https://dummyimage.com/500x500/000/fff">46</label>4748<label>49<inputname="myphoto"value="myphoto"type="radio">50<imgsrc="https://dummyimage.com/500x500/000/fff">51</label>5253<label>54<inputname="myphoto"value="myphoto"type="radio">55<imgsrc="https://dummyimage.com/500x500/000/fff">56</label>5758<label>59<inputname="myphoto"value="myphoto"type="radio">60<imgsrc="https://dummyimage.com/500x500/000/fff">61</label>62</div>63</body>64</html>
css
1*,2*::before,3*::after{4font-weight: normal;5line-height:1em;6padding:0;7margin:0;8-webkit-box-sizing: border-box;9box-sizing: border-box;10-webkit-tap-highlight-color:rgba(0,0,0,.1);11}12html,body{13width:100vw;14height:100vh;15overflow-x: hidden;16}17html{18font: normal 17px/17px sans-serif;19-webkit-text-size-adjust:100%;20}21body{22position: relative;23padding:3rem;24}2526/* MAIN PART */2728.select-img-list{29display: grid;30grid-template-rows:repeat(auto-fill,150px);/*150px毎の「行」を生成*/31grid-template-columns:repeat(auto-fill,150px);/*150px毎の「列」を生成*/32-webkit-box-pack: center;33-ms-flex-pack: center;34justify-content: center;/*コンテンツの中央寄せ*/35min-width:200px;/*最小幅(:paddingとコンテンツ単体の幅)*/36max-width:800px;37padding:25px;38margin:0 auto;/*中央寄せ*/39-webkit-box-shadow: inset 00024pxtomato;40box-shadow: inset 00024pxtomato;/*paddingを可視化_※見やすいように,1px隙間を空けている*/41}42.select-img-list label{43margin:25px;44-webkit-box-shadow:00024pxpalegreen;45box-shadow:00024pxpalegreen;/*paddingを可視化_※見やすいように,1px隙間を空けている*/46}47.select-img-list input{48display: none;49}50.select-img-list img{51opacity:0.5;52-webkit-transition:0.3s;53transition:0.3s;54display: block;55width:100%;56}57.select-img-list input:checked+ img{58opacity:1;59-webkit-transform:scale(1.5);60transform:scale(1.5);/*要素の拡大*/61}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。