WEB、始めました

半年間WEB制作の学校に通います。その記録。

47日目　ナビゲーションボタンのレスポンシブ　レティーナディスプレイ対応　ビデオタグ

ナビゲーションボタンのレスポンシブ
スマホサイズの時に横に並んでいたナビゲーションが2行2列に変化

f:id:chawannmusi:20160408204931p:plain

f:id:chawannmusi:20160408205019p:plain

http://tototo.webcrow.jp/BlogUp/0330/RWD/


[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>メディアクエリnav</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header></header>
<nav>
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<footer></footer>
</div>
</body>
</html>


[css]

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

/* 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;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

body {
  background: #999;
}

#container {
  width: 980px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}

header {
  height: 300px;
  background: #CCF;
  margin-bottom: 10px;
}

nav {
  height: 50px;
  background: #99F;
  margin-bottom: 10px;
  overflow: hidden;
}

nav li {
  width: 25%;
  float: left;
  box-sizing: border-box;
  border-left: 1px solid #FFF;
}

li:first-child {
  border-left: none;
}

li a {
  display: block;
  color: #000;
  line-height: 50px;
  text-align: center;
}
li a:hover {
  color: #CF3;
}

#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}

#content {
  width: 700px;
  height: 400px;
  float: right;
  background: #F9F;
}

#sidebar {
  width: 270px;
  height: 400px;
  float: left;
  background: #FF9;
}

footer {
  height: 50px;
  background: #9C9;
}

@media screen and (max-width: 999px) {

#container {
  width: 98%;
  padding: 1%;
}

header {
  margin-bottom: 1%;  /*親要素の横幅に対して何％か*/
}

nav {
  margin-bottom: 1%;
}

#wrapper {
  margin-bottom: 1%;
}

#content {
  width: 70%;
}

#sidebar {
  width: 29%;
}

}

@media screen and (max-width: 767px) {
#content {
  float: none;
  width: 100%;
  margin-bottom: 1%;
}

#sidebar {
  float: none;
  width: 100%;
}
nav {
  height: 100px;
}

nav li {
  width: 50%;
  border-bottom: 1px solid #FFF;
}

li:first-child {
  border-left: 1px solid #FFF;
}
}

レティーナディスプレイ対応
レティーナ＝高解像度
レティーナに対応したパソコンの場合は標準のパソコンで300x300pxに映していたものを倍のサイズを用意し圧縮して見せることで高解像度に見せることができる
cssはひとつでレティーナディスプレイで見たときだけ画像が変更される

通常
f:id:chawannmusi:20160409155727p:plain

レティーナディスプレイ対応のデバイスで見ると
f:id:chawannmusi:20160409160341p:plain

Chromeであれば検証ボタン→Toggle device modeを押すとレティーナ対応デバイスの選択ができる
f:id:chawannmusi:20160414182509p:plain

http://tototo.webcrow.jp/BlogUp/0330/retina/




[html]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>retinaディスプレイ対応</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="box"></div>
</body>
</html>


[css]

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

/* 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;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

#box {
  width: 300px;
  height: 200px;
  background: url(../img/300.png) no-repeat;
}

/*解像度が2:1（2倍）の場合*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx)  {  /*min-～はfirefox用のベンダープレフィックス*/

#box {
  background: url(../img/600.png) no-repeat;
  background-size: 100%;  /*coverでも同じ*/
}

}


ビデオタグを使って映像を挿入する
スタートボタンを押してからスタート
http://tototo.webcrow.jp/BlogUp/0330/video/



[html]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>動画を表示する</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<video controls>
<source src="img/bg.mp4" type="video/mp4">
</video>
</body>
</html>


[css]

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

/* 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;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


video {
  width: 1280px;
}@charset "utf-8";
/* CSS Document */

/* 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;
}



video {
  width: 1280px;
}

背景に動画を挿入　と　Googleフォント

f:id:chawannmusi:20160414181901p:plain

ロードすると同時にスタート

http://tototo.webcrow.jp/BlogUp/0330/bg-video/


[html]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>背景に動画を表示する</title>
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:700|Poiret+One' rel='stylesheet' type='text/css'>
</head>
<body>
<video autoplay loop muted>  <!--ロードしたら再生　繰り返し　音なし-->
<source src="img/bg.mp4" type="video/mp4">
</video>


<div id="container">
<div class="overlay">
<h1>Summer Vacation</h1>
<p>Summertime is the besttime of the year.There is no school for months and I get to do what I want.With no tests and no homework,I'm as free as a bird.<br>
I do many things during the summer vacation.I relax by reading books and watching TV.I also hang out with my friends and travel with my family.However,I don't only play in summer.I take advantage of the free time to learn more.For example,last summer I learned to swim.This summer I might study computers or English.Summer vacation flies by fast,so it's important to do as much as you can.</p>
</div>
</div>
</body>
</html>


[css]

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

/* 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:
  "Lucida Grande",
  "Hiragino Kaku Gothic ProN",
  Verdana,
  Meiryo, 
  sans-serif;
}

img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

html,body {  /*中身の高さが少ない場合に*/
  height: 100%;
}

video {
  position: fixed;
  left: 0;
  top: 0;  /*videoの上に黒い帯が入っている場合は-150pxとか指定*/
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100; /*背景にする為*/
  background: url(XXXX.jpg) no-repeat;  /*動画が表示されない場合の代替画像*/
  background-size: cover;
  display: block; /*IE８以下の為　無くても平気*/
}

#container {  /*背景動画を見えずらくする為*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.overlay {
  margin: 50px 0 0 50px;
  width: 40%;
  background: rgba(0,0,0,0.4);
}


h1 {
  font-size: 46px;
  color: #FFF;
  text-align: center;
  padding: 20px 20px 0 20px;
  text-shadow: 0 0 5px #FFF,0 0 10px #CC0,0 0 10px #CC0,0 0 10px #CC0,0 0 1px #CC0;
  line-height: 1.5;
  font-family: 'Arvo', serif;
  font-weight:700;
}

p {
  padding: 20px;
  line-height: 1.8;
  color: #FFF;
  font-size: 20px;
  font-family: 'Poiret One', cursive;
}