どうも！LSSです！！
先日の記事、
の内容をちょっと扱いやすく？しました^^
サンプル（カードをクリックしてみてください）
コード
<style><!--
.card{
position:relative;
perspective:500px;
}
.fuda{
position:absolute;
display:inline-block;
transition:2s;
backface-visibility:hidden;
border-radius:15px;
}
.csize{
width:150px;
height:200px;
}
#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
#ura{
transform:rotateY(0deg);
background:pink;
border:10px double black;
background-image:linear-gradient(45deg,#ffffff00 50%,#ffffff80 50%);
background-size:20px 20px;
}
#tg01:checked~#omote{
transform:rotateY(0deg);
}
#tg01:checked~#ura{
transform:rotateY(-180deg);
}
--></style>
<div class="card csize">
<input id="tg01" style="display: none;" type="checkbox" />
<label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label>
<label id="ura" class="fuda csize" for="tg01"></label>
</div>
コード解説（デザイン変更について）
コードのほとんどが<style>～</style>で占められています。
今回はJavaScriptは使っていません。
カードサイズ指定部分
.csize{
width:150px;
height:200px;
}
この部分でカードのサイズを一括指定しています。
…以前の記事の時には３回、widthとheightの指定を書いていましたが、今回はcsizeクラスに統一し、３か所から この指定を読みにくるようにしています。
このしておいた方が変更が容易、という利点がありますね^^
カード背面デザイン部分
#ura{
transform:rotateY(0deg);
background:pink;
border:10px double black;
background-image:linear-gradient(45deg,#ffffff00 50%,#ffffff80 50%);
background-size:20px 20px;
}
めくる前に見えている側の面のデザインを記述しています。
一行目の transform:rotateY(0deg); は回転の制御のための記述で、それ以外の赤文字部分がデザインの記述となります。
background:pink;
色をピンクにする指定
border:10px double black;
黒の二重線で枠を囲み、
background-image:linear-gradient(45deg,#ffffff00 50%,#ffffff80 50%);
斜めに区切って、白半透明と透明を切り替えるのを、
background-size:20px 20px;
20pxサイズで描画（したものが並びます）
というデザインにしてみました。
もちろん他のデザインを適用する事も可能です。
例えばbackground-imageの一行を、
で作った background-image:radialgradient（以下複数のradial-gradient略）に置き換えても良さそうです^^
カード表面デザイン部分
#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
こちらも一行目の transform:rotateY(180deg); は回転の制御のための記述（180度回転しているため最初は伏せられています）で、赤文字部分がデザインの記述になります。
background:white;
色を白にする指定
border:2px solid black;
黒の2pxの太さの枠で囲み、
padding:0.6em;
内側に0.6文字分の余白をとっています。
JavaScriptを使用せずに、カードの表裏を管理するのは
だいぶ前の記事ですが、
を改変しています^^
<div class="card csize">
<input id="tg01" style="display: none;" type="checkbox" />
<label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label>
<label id="ura" class="fuda csize" for="tg01"></label>
</div>
<div>タグの中に、<input>タグ、<label>タグ２つを入れている構造です。
<input>タグはオプションtype="checkbox"によって「オンオフできるチェックボックス」になっていますが、オプションstyle="display: none;"によって非表示になっています。
２つの<label>タグが、それぞれカードの表面・裏面の役割を担っています。
そして、どちらもオプションfor="tg01"によって、
「クリックするとチェックボックスをクリックした事にする」
という役割も果たしています^^
ちょっとつまづいたところ
<input>タグ＝チェックボックスの状態から、CSSで影響を受ける部分（今回の例では２つの<label>タグ）って、<input>タグよりも「後ろに」書かないと効かないみたいですね^^;
それに気づくまで結構悩みましたｗ
はてなブログの編集画面の仕様で、<label>タグが書く場所によっては勝手に消される事にも苦戦しつつ^^;;;;;
もし使いたい方おられたら、ご自由にコピペしてください^^
（１ページに２枚以上おくと動作しないと思います。←ゲームに使うには改良しないといけない点ですね^^;）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
