<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>rubyタグと縦書き</title> <style> /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ color: #222; } img { border: 0; } img, input { vertical-align: bottom; } body { background-image: url(img/key.png); /* 画像を常に天地左右の中央に配置 */ background-position: /* 画像を繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } p { font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; margin: 0 auto; color: #FCFAF2; font-size: 22px; padding-top: 40px; line-height:3; letter-spacing: 0.15em; -webkit-writing-mode: vertical-rl; /*縦書きにする(右から左)*/ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; /*firefox用の記述*/ } .inner { position: relative; width: 500px; margin: 0 auto; } .inner div { opacity: 0; animation-name: Drop; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; display: block; width: 20px; height: 20px; background: url(snow/reef.png) no-repeat; } .inner div.flake2, .inner div.flake4, .inner div.flake6, .inner div.flake8, .inner div.flake11, .inner div.flake14, .inner div.flake17 { background-size: 10px 12px !important; } .flake1 { left: 20px; animation-duration: 5s; } .flake2 { left: 50px; animation-duration: 3.2s; animation-delay: 0.6s; } .flake3 { left: 70px; animation-duration: 4.4s; animation-delay: 0.9s; } .flake4 { left: 100px; animation-duration: 6.3s; animation-delay: 0; } .flake5 { left: 153px; animation-duration: 5.2s; animation-delay: 1s; } .flake6 { left: 129px; animation-duration: 3.4s; animation-delay: 1s; } .flake7 { left: 193px; animation-duration: 5.3s; animation-delay: .2s; } .flake8 { left: 243px; animation-duration: 4s; animation-delay: 1.4s; } .flake9 { left: 180px; animation-duration: 7.5s; animation-delay: .4s; } .flake10 { left: 310px; animation-duration: 5s; animation-delay: 0.4s; } .flake11 { left: 56px; animation-duration: 5.2s; animation-delay: 0.6s; } .flake12 { left: 354px; animation-duration: 5.1s; animation-delay: 0.8s; } .flake13 { left: 470px; animation-duration: 5.5s; animation-delay: 1s; } .flake14 { left: 390px; animation-duration: 6.1s; animation-delay: 0.4s; } .flake15 { left: 271px; animation-duration: 5.1s; animation-delay: 1.4s; } .flake16 { left: 430px; animation-duration: 4.7s; animation-delay: 1s; } .flake17 { left: 350px; animation-duration: 5.1s; animation-delay: 1.1s; } .flake18 { left: 338px; animation-duration: 5.9s; animation-delay: 0.6s; } .flake19 { left: 390px; animation-duration: 5.7s; animation-delay: 0.6s; } /*アニメーションの設定*/ @-webkit-keyframes Drop { 0% { transform: translate(0, 0); opacity: 0; } 50% { transform: translate(10px, 140px); opacity: 1; } 100% { transform: translate(0, 280px); opacity: 0.3; } } @keyframes Drop { 0% { transform: translate(0, 0); opacity: 0; } 50% { transform: translate(10px, 140px); opacity: 1; } 100% { transform: translate(0, 280px); opacity: 0.3; } } </style> </head> <body> <div class="inner"> <div class="flake1"></div> <div class="flake2"></div> <div class="flake3"></div> <div class="flake4"></div> <div class="flake5"></div> <div class="flake6"></div> <div class="flake7"></div> <div class="flake8"></div> <div class="flake9"></div> <div class="flake10"></div> <div class="flake11"></div> <div class="flake12"></div> <div class="flake13"></div> <div class="flake14"></div> <div class="flake15"></div> <div class="flake16"></div> <div class="flake17"></div> <div class="flake18"></div> <div class="flake19"></div> <div class="flake20"></div> <p><ruby>心<rt>こころ</rt></ruby>にも<br> あらでうき<ruby>世<rt>よ</rt></ruby>に<br> ながらえば<br> <ruby>恋<rt>こい</rt></ruby>しかるべき<br> <ruby>夜半<rt>よか</rt></ruby>の<ruby>月<rt>つき</rt></ruby>かな</p> </div> </body> </html>