３月３０日 授業内容（Retinaディスプレイ対応、videoタグで動画を表示する、動画を背景に使う 、 webフォントの使い方,レスポンシブウェブデザイン（navの中の追加とスマホ用レイアウトの設定））
backgroundのwidthに対するレスポンシブ対応（P315～）
background-size: の値
設定はbackground-sizeでする。
「contain」
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
「cover」
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
ベンダープレフィックス（P261）
※高解像度ディスプレイへの対応（P316～）
※ピクセルレシオが２倍ならピクセルが２倍の画像を用意しないといけない
①幅６００ｐｘ、高さ４００ｐｘの画像、300px x 200pxの画像を用意する。
以下のようにHTML,CSSを書く
②メディアクエリを講師のブログを参考に入力する。
今回はピクセルレシオが２倍の場合を設定する。
③＃boxの画像をwidth６００ｐｘの画像に書き換える。
④クロームで開いて、検証画面を開く。
左上のスマホマークを押してデバイスごとの表示を確かめる。
※今の状態だとiPhone６では画像が切れる。（大きい画像がはみ出しているから）
⑤メディアクエリの#boxにbackground-size:cover;を入れるとこうなる。
スマートフォンサイトのテスター「RWD Tester」 - WEBサイト制作の勉強
きちんと見えないときはクロームのプラグインのResponsive Web Design Testerを入れて確認する。
ランドスケープ・・・スマホを横で見ている時の表示
ポートレイト・・・スマホを縦で見ている時の表示
画像のピクセルをあげずにデバイスに合わせて表示するにはSVGを使う。（P95）（イラストレーターで作るが重い）
<!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)*//*ピクセルレシオが２の時という意味*/ #box{ background:url(../img/w600.png) no-repeat; background-size:cover;}/*P318,319*/ }
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
無料の動画ライブラリーサイト
yachin29.hatenablog.com
参考サイト
清水へ参る道
素材サイト
Mazwai
Webで使える動画の拡張子=mp4
videoタグで動画を表示する
yachin29.hatenablog.com
①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フォントの使い方
下記を参考に入力する。
※動画の横に黒い表示が出るときはmin-widthとmin-heightのパーセンテージを１００パーセント以上にして幅を調整する。
残る部分はpositionをマイナス値で設定する。
Webフォントの使い方（P260）
※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; /*IE８以下の為*/ } #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用
スマホ用
注意点
・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の２５％*/ 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の２５％の幅*/ 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を入れているので自動的に１％の隙間ができる*/ #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%;/*２カラムにしたいので高さは倍にする*/ } li{width:50%;/*ulの２５％*/ }/*box-sizing(幅がボーダーが入っても比率は変わらない用にできる)P103*/ li:last-child{border-right:1px solid white;} } </style> </head> <body> <div id="container"> <header></header> <nav> <ul> <li><a href="#">ボタン１</a></li> <li><a href="#">ボタン２</a></li> <li><a href="#">ボタン３</a></li> <li><a href="#">ボタン４</a></li> </ul> </nav> <div id="wrapper"> <div id="content"></div> <div id="sidebar"></div> </div><!--#wrapper--> <footer></footer> </div><!--#container--> </body> </html>
