【勉強メモ】動画を背景にする〜CSS〜

続いてcss

@charset "utf-8";
/* CSS Document */

/*reset*/
html,body,div,h1,p,video{
  margin:0;
  padding:0;
}
video#bgvid{
  position:fixed;
  left:0;
  top:0;
  min-width:100%;
  min-height:100%;
  width:auto;
  height:auto;
  z-index:-100;
  background:url(douga/banbi.mp4) no-repeat; /*動画が表示される*/
  background-size:cover;
  display:block; /*IE8以下の為*/
}

#container{
  width:100%;
  height:100%;
  overflow:hidden;
  background:rgba(153,255,153,0.1);
}
.overlay{
  background:rgba(0, 0, 0, 0.4);
  color:#fff;
  margin:40px;
  padding:20px;
  width:40%;
  border-radius:10px;
  float:left;
}
h1{
  font-size:34px;
  text-align:center;
  margin:10px;
}
h2,p{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:22px;
  line-height:3;
  padding:1em;
  letter-spacing:0.15em;
  color:#fff;
  -webkit-writing-mode: vertical-rl; /*縦書にする firefoxは対応していないので注意！*/
  -ms-writing-mode:tb-rl; /*縦書にする firefoxは対応していないので注意！*/
}

CSSでのポイントは縦書きの記述です。
CSSコード下部のこの記述↓が縦書きにするものです。
ただしコメントアウトで記述している通り
firefoxには対応していませんのでご注意ください。

  -webkit-writing-mode: vertical-rl; /*縦書にする firefoxは対応していないので注意！*/
  -ms-writing-mode:tb-rl; /*縦書にする firefoxは対応していないので注意！*/