どうも！LSSです！！
以前に、
【CSS】本をめくる、という動作をCSSで表現してみました。
というものを作っていました。
そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^;
コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。
理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。
その後、色々試行錯誤していましたが、だいぶ楽にページ追加可能なものができました^^
ついでに、本のサイズも「縦横比を保ったまま、スマホ画面でもPC画面でも幅めいっぱい表示」するようにしています。
本のページをめくるCSS
コード
<style><!--
.cssbk{position:relative;width:100%;padding-bottom:72%;}
.cssbk input{display:none;}
.cssbk input~span{
transition:1.5s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
width:50%;height:100%;
background-color:#fffff8;
border:1px solid black;
}
.cssbk input+span{
left:50%;transform-origin:left;
transform:perspective(1500px) rotateY(0deg);
}
.cssbk input+span+span{
right:50%;transform-origin:right;
transform:perspective(1500px) rotateY(180deg);
}
.cssbk input:checked+span{
transform:perspective(1500px) rotateY(-180deg);
}
.cssbk input:checked+span+span{
transform:perspective(1500px) rotateY(0deg);
}
--></style>
<div class="cssbk">
<label>
<input type="checkbox" />
<span style="z-index: 99;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
<label>
<input type="checkbox" />
<span style="z-index: 98;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
<label>
<input type="checkbox" />
<span style="z-index: 97;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
</div>
このコードをコピペし、終わりのほうにある「中の文章」部分を好きな内容に書き換える事で、「Webページ上でめくる本」を作る事ができます。
※はてなブログの場合、「HTML編集」画面にコピペしてください。（<div class="cssbk">から</div>までの部分の改行が自動で詰められてしまいますが動作には支障ありません。）
ページ追加について
今回はページ追加にあたって、<style>タグの内容を変更せずに追加できるようになっています。
コード中で、
<div class="cssbk">
<label>
<input type="checkbox" />
<span style="z-index: 99;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
<label>
<input type="checkbox" />
<span style="z-index: 98;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
<label>
<input type="checkbox" />
<span style="z-index: 97;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
</div>
の部分（<div class="cssbk">から</div>まで）が、一冊の本に当たる部分です。
そして青字にしている、
<label>
<input type="checkbox" />
<span style="z-index: 99;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
の部分が、表ページと裏ページのセット＝１枚の紙に当たり、
<span style="z-index: 99;">中の文章</span>
が表ページ、
<span class="dummy">中の文章</span>
が裏ページとなります。
ページを追加する場合は、「<div class="cssbk">から</div>まで」の中に、
<label>
<input type="checkbox" />
<span style="z-index: 99;">中の文章</span>
<span class="dummy">中の文章</span>
</label>
をコピー＆ペーストで追加し、「z-index: 99;」の「99」という数値部分を「より小さい数字」に変更する事でページ追加できます！
（サンプルのコードでは 99、98、97 としていますので、続けて 96、95…といった具合に。なお、途中で数字が飛んでも問題ありません。）
本自体の設定
本自体の設定（サイズや色など）を変更する場合は、<style>タグの内容を書き換える事になります。
本のサイズ
本のサイズについては、最初の行、
.cssbk{position:relative;width:100%;padding-bottom:72%;}
の100%が「画面上の表示可能な幅に対する、本（開いた時）の幅」の割合です。
この例ではいっぱいいっぱいに表示しようとしますが、「半分ぐらいでいい」場合は50%に変更してください。
（%以外にも、 300px などのピクセル数による指定も可能です。）
そして72%の部分が「画面上の表示可能な幅に対する、本の高さ」の割合です。
こちらも数値の変更が可能ですし、pxでの指定に変更する事も可能です。
ページをめくる速度
ページをめくる速度については、コード5行目の、
transition:1.5s;
で指定しています。
1.5s＝1.5秒で、ページが動きますので、数値を小さくすると素早くめくれ、大きくするとゆっくりとめくれる様子を見る事ができるようになります。
本の見ため
コードの9，10行目、
background-color:#fffff8;
border:1px solid black;
で指定しています。
#fffff8がページの紙の色、1pxがページのフチの太さ、blackがフチの色を指定しています。
こちらもお好みで別の色・太さに変更可能です^^
あとがき
今回は、classやidを「極力使わない」で作成する事を目指しました。
id指定はひとつも使用しておらず、class指定は2種類だけ使っています。
class指定のひとつは、「一冊の本」をあらわす「<div class="cssbk">」の部分で、これはさすがに指定しておかないと「同じWebページ内の全然関係ないところまでめくられかねない」ので必須でしょうねｗ
もうひとつは、裏ページに指定した、 「<span class="dummy">」の部分です。
これ、名前の通り「ダミー」で、実は何の仕事もしていません^^;
が、はてなブログが「自動的にHTMLタグを書き換えてしまう」仕様に悩まされた結果、こういう手段をとる事にしました。
ちなみに、悩まされた内容は↓こんな感じです。
- 本当は<span>タグじゃなくて<div>タグを使いたかったけど、<label>タグの中に<div>タグを入れると<label>タグが増殖して構造が壊れる。
- <span>タグなら<label>タグの中に入れても構造が壊れずに済む…が、「<span>中の文章</span>」のように何も指定のない<span>タグを使うと<span>タグ自体が消される。
まぁ…HTMLを知らなくても問題なくブログが書けるサービスゆえに、何か意図があってそういう仕様になっているんでしょうね^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
