CSSでめくるカレンダーを作ってみた

いつも読んで頂きありがとうございます。

たまに夜な夜ないつもお世話になっているＬＳＳ (id:little_strange)さんのCSSで遊ぶ時が

ありますが、今回は本をめくるCSSで遊んでみました。

◆本をめくるCSSはこちらのブログから◆

little-strange.hatenablog.com

 ページの追加方法のブログはこちらから

縦だとスマホでも見やすい

横じゃなくて縦にめくる

今回、横にめくる本をいち早くアレンジしている人をＬＳＳさんが紹介しています。

最近、いち早くアレンジしてるブログ仲間の421miyako (id:m421miyako)さん

twitterで突っ込んであげると多分喜びます。

www.421miyako.com

そして、また一人ＬＳＳさんのツールのファンになったnoriko (id:non704)さん

と、初めてなのに勝手に決めつけていますがお許しください。

non704.hatenablog.com

お二人とも上手くアレンジしてますね。

紹介の記事のコメントでmiyakoさんがコメントで質問されててＬＳＳさんが答えていま

す。

421miyako(id:m421miyako)

左右ではなく上下にめくることも可能ですか？

ＬＳＳ(id:little_strange)

試してはいませんが、rotateYをrotateXにする、transform-originをtopとbottomにする、などでいけるかと思います。
あ、配置がちょっと悩むかも？

というわけで上下にめくれるようにアレンジしてみました。

本を上にめくるか下にめくるか

横にめくる場合は右側か左側を中心にしてめくる感じです。上下にめくる場合も上側か

下側を中心にしてめくる感じですが下側を中心にしたほうが良いかもしれません。

本の下側を中心にしてめくる場合

画像を添付する場合はmiyakoさんやＬＳＳさんも書いていますが、class="hatena-

fotolife"を削除してください。それとmiyakoさんが画像を貼り付けた時に枠内に自動的

に収まるか疑問符していましたが、画像は貼り付けた時に横を基本に自動的にリサイズ

してくれますが縦はリサイズ後に画像が枠より大きいとはみ出ますので調整が必要だと

思います。そして、サイドバーにも設置できるカレンダーを作ってみました。

普通は上にめくりますが下側に余白を作った方が見栄えが良いので下にめくるようにし

ています。

クリックすると開きます ↓

 ちぎり絵風枠ジェネレーターツールはＬＳＳさんのこちらのブログから

変更点

• width及びheightは画像に合わせて変更する
• 配置位置のleftをbottomにrightをtopに変更する 
• transform-originのleftをbottomにrightをtopに変更する
• rotateYをrotateXに変更する
• スマホで中心になるように左からの位置left:10px;を追加する

 ↓ クリックしてください（カレンダーの画像コードは入っていません）

CSSコード

 <style><!--

.cssbook{position:relative;}

#ch01,#ch02,#ch03,#ch04,#ch05{display:none;}

#pg01a,#pg01b,#pg02a,#pg02b,#pg03a,#pg03b,#pg04a,#pg04b,#pg05a,#pg05b{
position:absolute;
width:300px;
height:280px;
border:1px solid black;
background-color:#ffffee;
transition:1s;
backface-visibility:hidden;
}

#pg01a,#pg02a,#pg03a,#pg04a,#pg05a{
bottom:50%;
left:10px;
transform-origin:bottom;
transform:perspective(1500px) rotateX(0deg);
}

#pg01b,#pg02b,#pg03b,#pg04b,#pg05b{
top:50%;
left:10px;
transform-origin:top;
transform:perspective(1500px) rotateX(180deg);
}

#ch01:checked~#pg01a,#ch02:checked~#pg02a,#ch03:checked~#pg03a,#ch04:checked~#pg04a,#ch05:checked~#pg05a{
transform:perspective(1500px) rotateX(-180deg);
}

#ch01:checked~#pg01b,#ch02:checked~#pg02b,#ch03:checked~#pg03b,#ch04:checked~#pg04b,#ch05:checked~#pg05b{
transform:perspective(1500px) rotateX(0deg);
}

#pg01a{z-index:10;}
#pg02a{z-index:9;}
#pg03a{z-index:8;}
#pg04a{z-index:7;}
#pg05a{z-index:6;}
--></style>
<div class="cssbook">
<input id="ch01" type="checkbox" />
<input id="ch02" type="checkbox" />
<input id="ch03" type="checkbox" />
<input id="ch04" type="checkbox" />
<input id="ch05" type="checkbox" />
<label id="pg01a" for="ch01">表紙の内容</label>
<label id="pg01b" for="ch01">中の文章</label>
<label id="pg02a" for="ch02">中の文章</label>
<label id="pg02b" for="ch02">中の文章</label>
<label id="pg03a" for="ch03">中の文章</label>
<label id="pg03b" for="ch03">中の文章</label>
<label id="pg04a" for="ch04">中の文章</label>
<label id="pg04b" for="ch04">中の文章</label>
<label id="pg05a" for="ch05">中の文章</label>
<label id="pg05b" for="ch05">裏表紙の内容</label></div>

本の上側を中心にしてめくる場合

上側を中心にしてめくるのは下側を中心にしてめくるの逆バージョンと考えます。

topとbottomを入れ替えて、rotateX(180deg)のところをrotateX(-180deg)、

rotateX(-180deg)をrotateX(180deg)でいけます。leftは入れてません

 クリックすると開きます ↓

もう夏も終わりですね そして秋になり 冬を迎え 新年が始まります そして春 桜が咲きほこり 卒業と入学・就職 そしてまた夏が来る こんな事を書いてる私
のんべえは 今日も飲んでいます！

 　　乾杯！🍻

  ↓ クリックしてください

CSSコード

 <style><!--

.cssbook{position:relative;}

#ch01,#ch02,#ch03,#ch04,#ch05{display:none;}

#pg01a,#pg01b,#pg02a,#pg02b,#pg03a,#pg03b,#pg04a,#pg04b,#pg05a,#pg05b{
position:absolute;
width:200px;
height:100px;
border:1px solid black;
background-color:#ffffee;
transition:1s;
backface-visibility:hidden;
}

#pg01a,#pg02a,#pg03a,#pg04a,#pg05a{
top:50%;
transform-origin:top;
transform:perspective(1500px) rotateX(0deg);
}

#pg01b,#pg02b,#pg03b,#pg04b,#pg05b{
bottom:50%;
transform-origin:bottom;
transform:perspective(1500px) rotateX(-180deg);
}

#ch01:checked~#pg01a,#ch02:checked~#pg02a,#ch03:checked~#pg03a,#ch04:checked~#pg04a,#ch05:checked~#pg05a{
transform:perspective(1500px) rotateX(180deg);
}

#ch01:checked~#pg01b,#ch02:checked~#pg02b,#ch03:checked~#pg03b,#ch04:checked~#pg04b,#ch05:checked~#pg05b{
transform:perspective(1500px) rotateX(0deg);
}

#pg01a{z-index:10;}
#pg02a{z-index:9;}
#pg03a{z-index:8;}
#pg04a{z-index:7;}
#pg05a{z-index:6;}
--></style>
<div class="cssbook">
<input id="ch01" type="checkbox" />
<input id="ch02" type="checkbox" />
<input id="ch03" type="checkbox" />
<input id="ch04" type="checkbox" />
<input id="ch05" type="checkbox" />
<label id="pg01a" for="ch01">表紙の内容</label>
<label id="pg01b" for="ch01">中の文章</label>
<label id="pg02a" for="ch02">中の文章</label>
<label id="pg02b" for="ch02">中の文章</label>
<label id="pg03a" for="ch03">中の文章</label>
<label id="pg03b" for="ch03">中の文章</label>
<label id="pg04a" for="ch04">中の文章</label>
<label id="pg04b" for="ch04">中の文章</label>
<label id="pg05a" for="ch05">中の文章</label>
<label id="pg05b" for="ch05">裏表紙の内容</label></div>

 ページ内で2冊以上表示する場合

本を2冊以上表示させる場合は注意が必要です。

ページ内に同じidがあると動かないので重複させないようにしなければなりません。

1冊目の本のidがch01～ch05、#pg01a~#pg05a、#pg01b～#pg05bの場合、2冊目は

このidは使えません。ページを追加してると余計にです。

なので、2冊目はch50～、#pg01aと#pg01bは#pg51aと#pg01bまたは＃pgを

#○○01aとかにする必要があります。

今回、試しにサイドバーにも設置しましたがid変更が面倒でした。

最後に

カレンダーはスマホでもちゃんと見られると思います。画面のサイズが違ってもセンタ

ーになっているかは分かりませんがスマホで見る場合は縦にめくるほうが良いかもしれ

ませんね。左側からの位置は枠に合わせて調整してください。

今回のカレンダーはサイドバーに設置できるサイズにしていますが、設置した時に最初

から当月を表示出来ればいいのですが、そのようなことが出来るかはわかりません。

どうなんでしょう？

今回、idコール、言及がいつもより多く勝手なことも書いていますがお許しください。