Sample Page

Slide Menu with CSS Animation

*{ margin: 0; padding: 0; } html, body { height: 100%; background: gray; overflow: hidden; } /*****************************/ #container { width: 100%; height: 100%; padding-top: 300px; text-align: center; background: silver; box-shadow: 0 0 50px 0 rgba(0,0,0,.8); transition-property: all; transition-delay: .3s; transition-duration: .5s; } /*****************************/ #siteNavi { position: fixed; top: 0; left: 0; width: 25%; height: 100%; padding: 120px 0; background: #222; transition-property: all; transition-duration: .5s; transition-delay: 0s; transform-origin: left center; transform: translateX(-500px); opacity: 0; } #siteNavi li { list-style-type: none; } #siteNavi li a { display: block; height: 50px; line-height: 50px; padding-left: 40px; font-size: 14px; color: #fff; text-decoration: none; transition: all .5s; } #siteNavi li a:hover { color: #1a1e24; background: #fff; } /*****************************/ #menuButton { position: fixed; display: block; top: 40px; left: 40px; display: block; width: 32px; height: 32px; cursor: pointer; z-index: 3; } .line { position: absolute; left: 0; display: block; width: 32px; height: 4px; background: white; transition: all .5s; } .line.top { top: 0px; transform-origin:left top; } .line.middle { top: 10px; opacity: 1; } .line.bottom { top: 20px; transform-origin: left bottom; } #menuButton:hover .line { background: #333; } #closeButtonField { position: fixed; top: 0; left: 25%; width: 100%; height: 100%; background: rgba(0,0,0,0); transition-property: all; transition-duration: .5s; transition-delay: 0s; visibility: hidden; opacity: 0; } /*****************************/ #dummyCheckBox { display: none; } #dummyCheckBox:checked ~ #container { transition-delay: 0s; transform: translateX(25%); } #dummyCheckBox:checked ~ #siteNavi { transition-delay: .3s; transform: translateX(0); opacity: 1; z-index: 2; } #dummyCheckBox:checked ~ #menuButton .line.top { width: 40px; top: -2px; transform: rotate(45deg); } #dummyCheckBox:checked ~ #menuButton .line.middle { opacity: 0; } #dummyCheckBox:checked ~ #menuButton .line.bottom { width: 40px; top: 26px; transform: rotate(-45deg); } #dummyCheckBox:checked ~ #closeButtonField { transition-duration: 1s; transition-delay: .3s; background: rgba(0,0,0,.5); visibility: visible; opacity: 1; z-index: 3; }

あ
https://dajya-ranger.com/pukiwiki/sortable-table-plugin/
https://dajya-ranger.com/pukiwiki/sortable-table-plugin-verup/

ソートテーブル（表）テスト †

↑

通常のテーブル（表） †

日付	長さ	尺貫法	メートル法
2019/08/01	1里	36町	3.927km
2019/08/02	1町	60間	109.09m
2019/08/03	1丈	10尺	3.03m
2019/08/04	1間	6尺	1.82m
2019/08/05	1尺	10寸	30.3cm
2019/08/06	1寸	10分	30.3mm
2019/08/07	1分	10厘	3.03mm

↑

ソートテーブル（表） †

No	日付	長さ	尺貫法	メートル法
1	2019/08/01	1里	36町	3.927km
2	2019/08/02	1町	60間	109.09m
3	2019/08/03	1丈	10尺	3.03m
4	2019/08/04	1間	6尺	1.82m
5	2019/08/05	1尺	10寸	30.3cm
6	2019/08/06	1寸	10分	30.3mm
7	2019/08/07	1分	10厘	3.03mm

No	数値	日付	文字列
	数値フッタ	日付フッタ	文字列フッタ
1	数値セル1行目	日付セル1行目	文字列セル1行目
2	数値セルn行目	日付セルn行目	文字列セルn行目

＊タイトル＊

この枠はa.htmlを読み込んで表示しています

＊タイトル＊

この枠はa.htmlを読み込んで表示しています

↑

天賦スキル †

	荒野の突風
強化前	敵全体にxの物理分散ダメージを与え、感電Mを付与する、継続時間8秒。
強化後	敵全体にxの物理分散ダメージを与え、感電Lを付与する、力量を80アップ、継続時間8秒。