WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

<!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>