checkboxとflexを使った可変ボックス

カラーミーSEO+テンプレートを作るにあたり、極力jsを使わずにhtmlとcssだけで作ってしまおうと決めていたのでドロワーメニューやアイコンの変形など、checkboxを多用しました。

 

スライドもcssだけで作ってやろうかと思っていたのですが、php(カラーミーはsmarty)で呼び出すファイルにjsなしでどうやってidを割り振るのかという問題にぶちあたり大人しく諦めました。(よく見るとカラーミーキットにはslick.jsが元々入ってましたし楽で早い方をチョイス)

 

checkboxも、使わなかったらきっとすぐまた詳細忘れるので備忘録残しておきます。
いつか役に立つかも知れない。

checkboxとflexの可変box

hoge1〜3をクリックで変形(checkboxなので、他をクリックしても変形が戻らないのが弱点)

*Wordpressでは全く動作しなかったので代わりにCodePen貼っときます。これだけのために設定いじるのも面倒くさい。

 

type=”checkbox”を type=”radio”にするとこうなります。

<div id="flexbox">
<input type="checkbox" id="hoge1″>
<div>
<label for="hoge1″> hoge1 <p class="hidden">Happy </label>
</div>
<input type="checkbox" id="hoge2″>
<div>
<label for="hoge2″> hoge2 <p class="hidden">New </label>
</div>
<input type="checkbox" id="hoge3″>
<div>
<label for="hoge3″> hoge3 <p class="hidden">Yaer !! </label>
</div>
</div>

input{
display: none;
}
#flexbox{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
}
#flexbox div{
width:30%;
-webkit-box-ordinal-group:3;
order:2;
background-color:khaki;
text-align: center;
}
#flexbox div:nth-of-type(2) { background-color:pink}
#flexbox div:nth-of-type(3) { background-color:lime}

p.hidden{
display:none;
font-size:2em;
color:tomato;

}

#hoge1:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge2:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge3:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}

#hoge1:checked + div p.hidden{ display:block;}
#hoge2:checked + div p.hidden{ display:block;}
#hoge3:checked + div p.hidden{ display:block;}

かんたんな解説

#flexboxはflex。子要素の幅を変えたいなら flex-wrap:wrap; にしておかないといけない。

#flexboxの子要素それぞれにinputとlabelを用意し、flexの並び順は全て order:2; にしておく。

余談ですが、labelの中にhタグを入れるのは非推奨だそうです。今回はじめて知りました。

inputにチェックが入ったら直後のdivのwidthを100%に。並び順は1にする(ordre:1;)。

広告

2020年1月11日HTML/CSScheckbox,codepen,flex,input

Posted by ミフネWEB