どうも！LSSです！！
「カードをめくる その３」、前回の「その２」は
一年前の記事でしたｗ
その後、そのアレンジ版として、
というのも作りました。
補足説明記事→【CSS】本をめくる、のページ追加方法について
この「その２」と「本をめくる」には、
「id指定を利用しているため、カードを２枚以上おく、ページ数を増やすのにCSS部分をも含めて多数の場所を書き換えないといけない」
という共通した問題点があります。
それでもコード利用に挑戦していただいた方がおられ、
ではなんと、縦めくりにされた上に、大幅なページ増でカレンダーを作られています！
のんべえ(id:whisky-coke)様、ありがとうございます^^（かなりお手数をおかけしたのでは…）
前置きが長くなりましたが、ここから本題。
なんとかもっと使いやすくしたい、なんとかならないか？と以前から考えていました。
カードにしろ、本のページにしろ、増やす場合はHTMLのみの追加で完結し、CSS部分はそのままでいい、というのが理想ですね。
変更箇所が多く必要になる元凶は「id」のせいで、idはひとつのWebページ上で重複してはいけない、というルールがあります。
よく似たもので「クラス」がありますが、こちらはいくつ重複してもOK！
そして「id」を使う必要がある場面をなんとか「クラス」に置き換えられないかと考えていたんです。
「本」のほうは色々複雑でまだできるかどうか見えてきませんが…「カード」のほうはなんとかいけそう！？
ってところまで漕ぎつけました^^
カードをめくる その３ サンプル
コード
<style><!--
.card{
position:relative;
display:inline-block;
perspective:500px;
width:130px;
height:180px;
}
.fuda{
position:absolute;
display:inline-block;
transition:2s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
border-radius:15px;
width:100%;
height:100%;
}
.chk{display:none;}
.omote{
transform:rotateY(180deg);
background:white;
border:1px solid black;
box-shadow:0px 0px 5px 0px inset #00000080;
padding:0.6em;
}
.ura{
transform:rotateY(0deg);
background:lightgreen;
border:5px outset lightgreen;
background-image:linear-gradient(60deg,#ffffff00 30%,#ffffff80 70%);
background-size:20px 30px;
}
.chk:checked~.omote{transform:rotateY(0deg);}
.chk:checked~.ura{transform:rotateY(-180deg);}
--></style>
<p>
<label class="card">
<input class="chk" type="checkbox" />
<span class="fuda omote">めくると出てくる文章</span>
<span class="fuda ura"> </span>
</label>
</p>
赤太字部分が、１枚のカードとなります。
まずコード全文をコピペしてから、この<labelから</label>までをコピペで複数並べる事で、カード枚数を増やす事ができます^^
めくると出てくる文章の部分を好きな言葉に変更してお使いください。
※上記コードは見やすいように改行を入れていますが、はてなブログのHTML編集画面上ではプレビューから戻ると改行が詰められてしまいます。動作には影響しないのできにしなくてOK！
また、カードのサイズを変更したい場合は、
width:130px;
height:180px;
の部分の数値を変更する事でカードサイズが変わります。
その他
.omote{
transform:rotateY(180deg);
background:white;
border:1px solid black;
box-shadow:0px 0px 5px 0px inset #00000080;
padding:0.6em;
}
.ura{
transform:rotateY(0deg);
background:lightgreen;
border:5px outset lightgreen;
background-image:linear-gradient(60deg,#ffffff00 30%,#ffffff80 70%);
background-size:20px 30px;
}
↑のオレンジ色の部分は、カードの見た目をデザインしている部分ですので、動作に影響しません。
lightgreenの色を変更するなど、デザイン変更にも挑戦してみていただけると嬉しいです^^
あとがき
<input>タグと<label>の関係性、これまでは
「<input/>にidをつけて、<label for="id">でラベルクリック時に反応する<input/>を指定する」
という方法をとっていました。
それだと「id」を使わずに実現する事は不可能でしたが、
<label><input/></label>
という形式なら、idを使わずに<label>を<input/>に紐づけられます^^
#id:checked~#兄弟id
も、
.クラス:checked~.兄弟クラス
に置き換えが可能ですが、その場合対象となる「兄弟クラス」が複数セットになった場合「どこのどれを？」になるところを、
<label>
<input/>
<span class="omote"></span>
<span class="ura"></span>
</label>
<label>
<input/>
<span class="omote"></span>
<span class="ura"></span>
</label>
という構造にする事で、それぞれの<input/>に対する兄弟クラス「omote」「ura」が判別できるようになっています。（…と、説明が分かり辛いですよね^^;また改めて記事にしようかな）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
