読者です 読者をやめる 読者になる 読者になる

3月30日 授業内容(Retinaディスプレイ対応、videoタグで動画を表示する、動画を背景に使う 、 webフォントの使い方,レスポンシブウェブデザイン(navの中の追加とスマホ用レイアウトの設定))

backgroundのwidthに対するレスポンシブ対応(P315~)


background-size: の値


yachin29.hatenablog.com

設定はbackground-sizeでする。

background-sizeのサンプル


「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

ベンダープレフィックス(P261)

※高解像度ディスプレイへの対応(P316~)

yachin29.hatenablog.com


f:id:paris1204:20160330175319p:plain


f:id:paris1204:20160330175343p:plain



※ピクセルレシオが2倍ならピクセルが2倍の画像を用意しないといけない

①幅600px、高さ400pxの画像、300px x 200pxの画像を用意する。
以下のようにHTML,CSSを書く

②メディアクエリを講師のブログを参考に入力する。
f:id:paris1204:20160330174758p:plain
今回はピクセルレシオが2倍の場合を設定する。

③#boxの画像をwidth600pxの画像に書き換える。

④クロームで開いて、検証画面を開く。
左上のスマホマークを押してデバイスごとの表示を確かめる。
※今の状態だとiPhone6では画像が切れる。(大きい画像がはみ出しているから)
f:id:paris1204:20160330174851p:plain


⑤メディアクエリの#boxにbackground-size:cover;を入れるとこうなる。
f:id:paris1204:20160330174915p:plain


スマートフォンサイトのテスター「RWD Tester」 - WEBサイト制作の勉強

きちんと見えないときはクロームプラグインResponsive Web Design Testerを入れて確認する。


f:id:paris1204:20160330175139p:plain



ランドスケープ・・・スマホを横で見ている時の表示
ポートレイト・・・スマホを縦で見ている時の表示



画像のピクセルをあげずにデバイスに合わせて表示するにはSVGを使う。(P95)(イラストレーターで作るが重い)


f:id:paris1204:20160330175105p:plain

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

<body>

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

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

html,body,h1,h2,h3,p,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;}

a{text-decoration:none;}

ul,li{list-style:none;}

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

@media screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)  {
  /*ベンダープレフィックス(P261)*//*ピクセルレシオが2の時という意味*/
       #box{
background:url(../img/w600.png) no-repeat;
background-size:cover;}/*P318,319*/


}

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
無料の動画ライブラリーサイト
yachin29.hatenablog.com

参考サイト
清水へ参る道


素材サイト
Mazwai

www1.nhk.or.jp



Webで使える動画の拡張子=mp4


videoタグで動画を表示する
yachin29.hatenablog.com
f:id:paris1204:20160330185713p:plain


f:id:paris1204:20160330185940p:plain

NHKのサイトから動画の素材をダウンロードする。(http://www1.nhk.or.jp/creative/material/95/D0002021463_00000.html
②解凍する。Video用のフォルダを作ってそこに入れる。
③新規HTML,CSSを下記のように書く。
④videoタグとその中身を入力する。
※mp4は今のところvideoタグでしか表示ができない

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>動画を表示する</title>
<style>
video{width:640px;}
</style>
</head>

<body>
<video controls><!--controlsは再生機能--><!--もし再生ボタンをなしで動画を再生させたい時はvideo autoplay-->
<source src="video_img/paris.mp4" type="video/mp4">
</video>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

動画を背景に使う + webフォントの使い方

yachin29.hatenablog.com

f:id:paris1204:20160330204926p:plain



f:id:paris1204:20160330190914p:plain

下記を参考に入力する。

※動画の横に黒い表示が出るときはmin-widthとmin-heightのパーセンテージを100パーセント以上にして幅を調整する。
残る部分はpositionをマイナス値で設定する。

Webフォントの使い方(P260)

yachin29.hatenablog.com


※googlefont(英語用)
Google Fonts


※googlefont(日本語用)
Google Noto Fonts


adobe typekit(CCの契約をしている間は使える)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>動画を背景にする</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic' rel='stylesheet' type='text/css'><!--googlefont英語-->
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css"><!--webフォント日本語-->
<style>
html,body,h1,p{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;
}
html,body{height:100%;}/*記述がbodyに収まっている場合はcontainerの色とvideoの色に違いがでるのでそれを防止するために入力する*//*逆に文字が画面の高さを越えているときは要らない*/

video{position: fixed;
  left:0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(XXXX.jpg) no-repeat;  /*動画が表示されない場合の代替画像*/
  background-size: cover;/*画面から余白を出さないようにできる*/
  display: block; /*IE8以下の為*/
  }
  
  #container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:rgba(231, 76, 60, 0.2);
 }
.overlay {
  background: rgba(0,0,0,0.3);
  color: #FFF;
  margin: 40px;
  padding: 20px;
  width:40%;
  border-radius: 10px;
  float: left;
}
h1{font-family: 'Open Sans', sans-serif;/*googleフォント(英語)*/
 font-size:30px;
color:olive;
padding:20px;
text-align:center;}

p{line-height:24px;
font-family: 'Noto Sans Japanese', serif;}/*webフォント(日本語)*/

</style>
</head>

<body>
<video autoplay loop muted><!--背景動画なのでcontrolsはとる-->
<!--autoplay(自動再生)、loopは繰り返し再生、mutedはミュート設定-->
<source src="video_img/paris.mp4" type="video/mp4">
</video><!--タグは必ず閉じること-->


<div id="container">
<div class="overlay">
<h1>Paris</h1>
<p>パリ(仏: Paris[1]、巴里)は、フランスの首都であり、イル=ド=フランス地域圏の首府である。フランス最大の都市であり、同国の政治、経済、文化などの中心である。ニューヨーク、ロンドン、東京などと並ぶ世界トップクラスの世界都市でもある。行政上では、1コミューン単独で県を構成する特別市であり、ルーヴル美術館を含む1区を中心に、時計回りに20の行政区が並ぶ(エスカルゴと形容される[2])。
市域はティエールの城壁跡に造られた環状高速道路の内側の市街地(面積は86.99km2。参考:東京都・山手線の内側は63km2、ニューヨーク市・マンハッタンは59km2)、および、その外側西部のブローニュの森と外側東部のヴァンセンヌの森を併せた形となっており、面積は105.40km2。ケスタ地形を呈するパリ盆地のほぼ中央に位置し、市内をセーヌ川が貫く。この川の中州であるシテ島を中心に発達した。市内の地形は比較的平坦であるが、標高は最低でセーヌ川沿いの35メートル、最高でモンマルトルの丘の130メートルである[3]。北緯49度とやや高緯度に位置するが、温かい北大西洋海流と偏西風によって一年を通して比較的温暖となっており、西岸海洋性気候の代表的な都市である。 </p>
</div><!--#overlay-->
</div><!--#container-->
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


レスポンシブウェブデザイン(navの中の追加とスマホ用レイアウトの設定)

PC用
f:id:paris1204:20160330210118p:plain

スマホ
f:id:paris1204:20160330210141p:plain

注意点
・liにボーダーを入れたままwidthを固定したい場合はbox-sizingを入れる(P103)
スマホのときのレイアウトが変わるので親要素との比率を考えながら幅、高さを設定

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD</title>
<style>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;}

a{text-decoration:none;}

ul,li{list-style:none;}


<!--PCレイアウト-->

bady{background:olive;}
#container{width:980px;
margin:0 auto;
background:white;
padding:10px;
}
header{height:300px;/*横幅は#containerから引き継ぐので1000pxは記述しない*/
background:blue;
margin-bottom:10px;}
nav{height:50px;
background:red;
margin-bottom:10px;}

ul{overflow:hidden;
}

li{width:25%;/*ulの25%*/
line-height:50px;
float:left;
border-right:1px solid white;
box-sizing:border-box;}/*box-sizing(幅がボーダーが入っても比率は変わらない用にできる)P103*/
li:last-child{border:none;}

li a{display:block;/*ここでのaのwidthはliを引き継ぐのでulの25%の幅*/
color:white;
text-align:center;
border:1px white solid;}


li a:hover{background:pink;
opacity:0.5;}


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

#sidebar{width:290px;
height:400px;
/*margin-right:10px;*//*ここは入れない入れるとしたの入力で狂う*/
float:left;
background:black;}
#content{width:680px;
height:400px;
float:right;
background:#0F6;}
footer{height:50px;
background:#FF0;
margin-bottom:10px;}

@media screen and (max-width:999px){
  
  header{height:200px;}/*幅のみ細く見えるのを避けるため
  */
 #container{width:98%;
 padding:1%;}
 header{margin-bottom:1%;}/*marginは縦でも横でも親要素の横幅を基準にする*/
 
 nav{margin-bottom:1%;}
 
  #content{width:70%;}
  
  #sidebar{width:29%;}/*floatを入れているので自動的に1%の隙間ができる*/
  
  #wrapper{margin-bottom:1%;}
  footer{margin-bottom:1%;}
    }
    
    @media screen and (max-width:767px){/*スマホ*/
       #content{float:none;
       width:100%;}
       #sidebar{float:none;
       width:100%;}
      
      nav{height:200%;/*2カラムにしたいので高さは倍にする*/
      }

li{width:50%;/*ulの25%*/
}/*box-sizing(幅がボーダーが入っても比率は変わらない用にできる)P103*/

li:last-child{border-right:1px solid white;}
      }

</style>
</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><!--#wrapper-->
<footer></footer>
</div><!--#container-->
</body>
</html>