WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

背景に動画を使用

f:id:mmmmofu:20150821230851p:plain

http://efu.sakura.ne.jp/web/0804/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景に動画を使用</title>
<!--[if lt IE 9]>
<script>
  document.createElement('video');
</script>
<![endif]-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<video id="bgvid" autoplay loop muted>
<source src="kumo.mp4" type="video/mp4">
</video>
<div id="container">
<div class="overlay">
<h1>平家物語(冒頭)</h1>
<p><ruby>祇園精舎<rt>ぎおんしょうじゃ</rt></ruby><ruby><rt>かね</rt></ruby><ruby><rt>こえ</rt></ruby><br>
<ruby>諸行無常<rt>しょぎょうむじょう</rt></ruby><ruby><rt>ひび</rt></ruby>きあり<br>
<ruby>沙羅双樹<rt>さらそうじゅ</rt></ruby><ruby><rt>はな</rt></ruby><ruby><rt>いろ</rt></ruby><br>
<ruby>盛者必衰<rt>じょうしゃひっすい</rt></ruby><ruby><rt>ことわり</rt></ruby>をあらわす</p>
</div><!-- /.overlsy -->
</div><!-- /#container -->
</body>
</html>
@charset "utf-8";
/* CSS Document */

/* reset */
html,body,div,h1,p,video {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}
video#bgvid {
  position: fixed;
  left: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url() no-repeat;/*動画が表示されない時の代替え画像*/
  background-size: contain;
  display: block;/*IE8以下のため*/
}
#container {
  width: 100%;
  overflow:hidden;
}
.overlay {
  background: rgba(0,0,0,0.3);
  color: #FFF;
  margin: 40px;
  padding: 20px;
  width: 40%;
  border-radius: 10px;
  float: left;
}
h1 {
  font-size: 34px;
  text-align: center;
  margin: 10px;
}
p {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝"
    serif;
  line-height: 1.4;
  margin: 0 auto;
  color: #FCFAF2;
  font-size: 22px;
  line-height: 3;
  padding: 1em;
  letter-spacing: 0.15em;
  -webkit-writing-mode: vertical-rl;
  ms-writing-mode: tb-rl;
}

rubyタグ…文字にルビをふることができる。
rubyタグの中にルビを振りたい漢字などを記入し、rtタグの中にルビを記入する。

<ruby>祇園精舎<rt>ぎおんしょうじゃ</rt></ruby>

writing-mode…Internet Explorerの独自拡張。文字表記の縦横を設定する。

動画をお借りしました
videos.pexels.com