[リンク内容]
(http://dotinstall.com/lessons/basic_responsivewebdesign/39309)
一枚目の写真見にくいですが、ブラウザを小さくしても16:9が守れません。
二枚目の写真はすべてひだりに画像も文も揃えたいですが、できません。
これらのエラーと関係ありますのでしょうか?
alt属性はデフォルトでの表示ですので、別になくてもいい思いますが、動画も表示されていますし
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/font-awesome.min.css"> 6 <link rel="stylesheet" href="css/styles.css"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>RWD</title> 9</head> 10<body> 11 12 <header> 13 <div class="container"> 14 <i class="fa fa-bars header-mobile-menu" aria-hidden="true"></i> 15 <h1>MySite</h1> 16 </div> 17 </header> 18 19 <section class="features"> 20 <h2>Features</h2> 21 <div class="container"> 22 <div class="item"> 23 <img src="ly.jpg"> 24 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. v</p> 25 </div> 26 <div class="container"> 27 <div class="item"> 28 <img src="ly.jpg"> 29 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. v</p> 30 </div> 31 <div class="container"> 32 <div class="item"> 33 <img src="ly.jpg"> 34 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. </p> 35 </div> 36 37 38 </div> 39 </div> 40 </div> 41 </section> 42 43 <section class="news"> 44 <h2>News</h2> 45 <div class="container"> 46 <div class="item"> 47 <img src="mv.jpg"> 48 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. v</p> 49 </div> 50 <div class="container"> 51 <div class="item"> 52 <img src="mv.jpg"> 53 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. v</p> 54 </div> 55 <div class="container"> 56 <div class="item"> 57 <img src="mv.jpg"> 58 <p>beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. beautiful. </p> 59 </div> 60 </div> 61 </div> 62 </div> 63 </section> 64 65 <section class="how-to-use"> 66 <h2>How to use</h2> 67 <div class="container"> 68 <div class="iframe-wrapper"> 69 <iframe width="560" height="315" src="https://www.youtube.com/embed/gTqItCCuO7c" frameborder="0" allowfullscreen></iframe> 70 </div> 71 </div> 72 </section> 73 74 <footer> 75 <p>dotintall.com</p> 76 </footer> 77 78</body> 79</html> 80
css
1@charset "utf-8"; 2 3 4 5body { 6 font-size: 14px; 7 font-family: Vernada, sans-serif; 8 margin: 0; 9 padding: 0; 10 color: #333; 11 background: #f8f8f8; 12} 13 14p { 15line-height: 2; 16} 17 18.container { 19 width: 90%; 20 margin: 0 auto; 21} 22 23.features img { 24 width: 100%; 25} 26 27.features .item { 28 margin-bottom: 60px; 29} 30 31.features .item:last-child{ 32 margin-bottom: 0; 33} 34 35.news .item { 36 text-align: center; 37} 38 39.news p { 40 text-align: left; 41} 42 43 44.news .item { 45 margin-bottom: 60px; 46} 47 48.news .item:last-child{ 49 margin-bottom: 0; 50} 51 52footer { 53 text-align: center; 54 color: #ccc; 55 padding: 60px 0; 56} 57 58 59@media (min-width: 570px) { 60 body { 61 background: skyblue; 62 } 63} 64 65@media (min-width: 820px) { 66 67 body { 68 background: lime; 69 } 70 71 .how-to-use iframe { 72 /*display: none;*/ 73 position: absolute; 74 width: 100%; 75 height: 100%; 76 top: 0; 77 left: 0; 78 } 79 80 81 .iframe-wrapper { 82 padding-bottom: 56.25%; 83 height: 0; 84 /*background: pink;*/ 85 position: relative; 86 } 87
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。