settings
OKOK
ディスレクシア・シミュレーター
table: test
A1 B1 C1
A2 B2 C2
A3 B3 C3
https://gyazo.com/8fb7a562a044a200fe23aa9efbf0b8d5
code:何jbもの.css
okkaradon.icon
code:がいやく.css
okkaradon.icon
12345
12345
code:style.css
:root {
--svg-bigeye: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" /></svg>') no-repeat center center; --svg-jakethedog: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 50"><path fill="%23000000" d="M 25.5 7 C 14.742188 7 6 15.742188 6 26.5 C 6 28.796875 7.769531 30.636719 10 30.898438 L 10 31.414063 L 5.171875 36.242188 C 3.617188 37.796875 3.617188 40.347656 5.171875 41.902344 L 10 46.730469 L 10 47 C 9.996094 47.359375 10.183594 47.695313 10.496094 47.878906 C 10.808594 48.058594 11.191406 48.058594 11.503906 47.878906 C 11.816406 47.695313 12.003906 47.359375 12 47 L 12 28 C 12 27.449219 11.550781 27 11 27 C 10.449219 27 10 27.449219 10 28 L 10 28.949219 C 8.851563 28.722656 8 27.722656 8 26.5 C 8 16.824219 15.824219 9 25.5 9 C 35.175781 9 43 16.824219 43 26.5 C 43 27.722656 42.148438 28.722656 41 28.949219 L 41 28 C 41 27.449219 40.550781 27 40 27 C 39.449219 27 39 27.449219 39 28 L 39 47 C 38.996094 47.359375 39.183594 47.695313 39.496094 47.878906 C 39.808594 48.058594 40.191406 48.058594 40.503906 47.878906 C 40.816406 47.695313 41.003906 47.359375 41 47 L 41 46.730469 L 45.828125 41.902344 C 47.382813 40.347656 47.382813 37.796875 45.828125 36.242188 L 41 31.414063 L 41 30.898438 C 43.230469 30.636719 45 28.796875 45 26.5 C 45 15.742188 36.257813 7 25.5 7 Z M 17 16 C 14.242188 16 12 18.242188 12 21 C 12 23.757813 14.242188 26 17 26 C 17.128906 26 17.246094 25.976563 17.371094 25.96875 C 17.15625 26.726563 17 27.570313 17 28.5 C 17 30.167969 17.355469 31.683594 18 32.867188 C 18.644531 34.050781 19.675781 35 21 35 C 22.265625 35 23.273438 34.121094 23.914063 33.015625 C 24.546875 31.925781 24.917969 30.523438 24.984375 28.976563 C 25.15625 28.992188 25.328125 29 25.5 29 C 25.671875 29 25.84375 28.992188 26.015625 28.976563 C 26.082031 30.523438 26.453125 31.925781 27.085938 33.015625 C 27.726563 34.121094 28.734375 35 30 35 C 31.324219 35 32.355469 34.050781 33 32.867188 C 33.644531 31.683594 34 30.167969 34 28.5 C 34 27.570313 33.84375 26.726563 33.628906 25.96875 C 33.753906 25.976563 33.871094 26 34 26 C 36.757813 26 39 23.757813 39 21 C 39 18.242188 36.757813 16 34 16 C 31.375 16 29.21875 18.035156 29.019531 20.609375 C 27.980469 20.222656 26.789063 20 25.5 20 C 24.210938 20 23.019531 20.222656 21.980469 20.609375 C 21.78125 18.035156 19.625 16 17 16 Z M 17.5 18 C 18.882813 18 20 19.117188 20 20.5 C 20 21.882813 18.882813 23 17.5 23 C 16.117188 23 15 21.882813 15 20.5 C 15 19.117188 16.117188 18 17.5 18 Z M 34.5 18 C 35.882813 18 37 19.117188 37 20.5 C 37 21.882813 35.882813 23 34.5 23 C 33.117188 23 32 21.882813 32 20.5 C 32 19.117188 33.117188 18 34.5 18 Z M 25.5 22 C 28.332031 22 30.347656 23.378906 30.972656 24.644531 C 31.484375 25.683594 32 26.984375 32 28.5 C 32 29.871094 31.683594 31.101563 31.246094 31.910156 C 30.804688 32.71875 30.332031 33 30 33 C 29.679688 33 29.246094 32.75 28.816406 32.011719 C 28.386719 31.273438 28.058594 30.136719 28.011719 28.847656 C 28.007813 28.695313 27.988281 28.554688 27.957031 28.421875 C 28.625 28.046875 29 27.535156 29 27 C 29 25.894531 27.433594 25 25.5 25 C 23.566406 25 22 25.894531 22 27 C 22 27.527344 22.367188 28.035156 23.019531 28.410156 C 23 28.5625 22.988281 28.71875 22.988281 28.875 C 22.9375 30.152344 22.609375 31.277344 22.183594 32.011719 C 21.753906 32.75 21.320313 33 21 33 C 20.667969 33 20.195313 32.71875 19.753906 31.910156 C 19.316406 31.101563 19 29.871094 19 28.5 C 19 26.984375 19.515625 25.683594 20.027344 24.644531 C 20.652344 23.378906 22.667969 22 25.5 22 Z M 10 34.242188 L 10 36.730469 L 8.363281 38.363281 C 7.972656 38.753906 7.972656 39.386719 8.363281 39.777344 L 10 41.414063 L 10 43.902344 L 6.585938 40.484375 C 5.796875 39.695313 5.796875 38.445313 6.585938 37.65625 Z M 41 34.242188 L 44.414063 37.65625 C 45.203125 38.445313 45.203125 39.695313 44.414063 40.484375 L 41 43.902344 L 41 41.414063 L 42.636719 39.777344 C 43.027344 39.386719 43.027344 38.753906 42.636719 38.363281 L 41 36.730469 Z" /></svg>') no-repeat center center; }
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "Shippori Mincho", serif;
}
body {
background: var(--svg-jakethedog);
background-color: yellow;
background-attachment: fixed;
}
/*背景透けて見えるようにする*/
.page-list-item > a {
background-color: rgba(255, 255, 255, .9) !important ;
}
.page {
border-radius: 40px;
background-color: rgba(255, 255, 255, .9);
}
.app {
background-color: transparent;
}
/* 回転に必要な余白確保 */
.left-box, .project-home {
height: 100px;
}
/* */
/*文字ユラユラ*/
/* */
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.7s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
display:inline-block;
animation-name: こんにちは;
animation-duration: 1s;
animation-delay:0.9s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes こんにちは {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
0% {
transform: translateY(0px);
}
}
/* 記事タイトル縦長 */
.title {
animation: NGNG 10s normal infinite;
}
@keyframes NGNG {
0% {
transform: scale(1, 0)
}
5% {
transform: scale(1, 1.3)
}
95% {
transform: scale(1, 1.3)
}
100% {
transform: scale(1, 0)
}
}
/*記事の横のページメニュー ダンス*/
div.page-menu {
animation: OKOK 3s normal infinite;
}
@keyframes OKOK {
0% {
transform: translateX(110px) scale(2, 1)
}
50% {
transform: translateX(-110px) scale(1, 1)
}
100% {
transform: translateX(110px) scale(2, 1)
}
}
/* 様々なアイコンを回転 */
img.icon, .kamon, .fas, .brand-icon {
animation: 何jbもの 0.9s alternate infinite;
}
@keyframes 何jbもの {
0% {
transform:rotate(-0deg) scale(0.5)
}
100% {
transform:rotate(360deg) scale(1.0)
}
}
/* 記事一覧のページタイルのダンス */
.grid > li:not(:hover), .page-list-status {
animation: がいやく 0.3s alternate infinite;
}
@keyframes がいやく {
0% {
transform:rotate(-6deg) scale(0.95)
}
100% {
transform:rotate(6deg) scale(1.05)
}
}
/* 画像ファイル ダンス ひかえめ */
img.image:not(:hover) {
animation: ワッツ 0.3s alternate infinite;
}
@keyframes ワッツ {
0% {
transform:rotate(-2deg) scale(0.98)
}
100% {
transform:rotate(2deg) scale(1.02)
}
}