前提・実現したいこと
Responsive Web Design Tutorial and ExplanationというYoutube動画のhtmlとmain.css(cssの上)とresponsive.css(cssの下)をコピペして貼り付けたのですが、自分が打ち込んだり数値を変えてみても変化がありません。どうしたら反応するでしょうか。
プログラミング初心者です。
ご回答よろしくお願いします。
該当のソースコード
html
1ソースコード<!DOCTYPE html> 2<html lang="en"><head> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 6 <title>Introduction to Responsive Web Design</title> 7 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 10 <!-- css --> 11 <link rel="stylesheet" href="main.css"> 12 <link rel="stylesheet" href="responsive.css" media="screen and (max-width: 900px)"> 13 14</head> 15<body> 16 17 <!-- header --> 18 <div class="header"><div class="section-inner"> 19 <h1>Example Header</h1> 20 </div></div><!--/header--> 21 22 <!-- nav --> 23 <div class="nav"><div class="section-inner"> 24 <ul class="clearfix"> 25 <li><a href="#">Home</a></li> 26 <li><a href="#">About</a></li> 27 <li><a href="#">Sample Link 1</a></li> 28 <li><a href="#">Sample Link 2</a></li> 29 <li><a href="#">Sample Link 3</a></li> 30 <li><a href="#">Sample Link 4</a></li> 31 <li><a href="#">Portfolio</a></li> 32 <li><a href="#">Contact</a></li> 33 </ul> 34 </div></div><!--/nav--> 35 36 <!-- body-content --> 37 <div class="body-content"><div class="section-inner"> 38 39 <!-- thirds --> 40 <div class="thirds clearfix"> 41 42 <!-- one-third --> 43 <div class="one-third mobile-collapse"> 44 <img src="images/1.jpg" alt="A bird on a fence"> 45 <h2>Section One</h2> 46 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 47 </div><!--/one-third--> 48 49 <!-- one-third --> 50 <div class="one-third one-third-second mobile-collapse"> 51 <img src="images/2.jpg" alt="A bird eating"> 52 <h2>Section Two</h2> 53 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 54 </div><!--/one-third--> 55 56 <!-- one-third --> 57 <div class="one-third one-third-last mobile-collapse"> 58 <img src="images/3.jpg" alt="A cat"> 59 <h2>Section Three</h2> 60 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 61 </div><!--/one-third--> 62 63 </div><!--/thirds--> 64 65 <!-- two-columns --> 66 <div class="two-columns clearfix"> 67 68 <!-- main --> 69 <div class="main mobile-collapse"> 70 71 <h2>Primary Content Section</h2> 72 73 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 74 75 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 76 77 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 78 79 </div><!--/main--> 80 81 <!-- side --> 82 <div class="side mobile-collapse"> 83 84 <!-- info-box --> 85 <div class="info-box-a"> 86 <h4>Important Content</h4> 87 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 88 </div><!--/info-box--> 89 90 <!-- info-box --> 91 <div class="info-box-b hide-mobile"> 92 <h4>Not Vital</h4> 93 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 94 </div><!--/info-box--> 95 96 <!-- info-box --> 97 <div class="info-box-b hide-mobile"> 98 <h4>Not Vital</h4> 99 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 100 </div><!--/info-box--> 101 102 </div><!--/side--> 103 104 </div><!--/two-columns--> 105 106 </div></div><!--/body-content--> 107 108 <!-- footer --> 109 <div class="footer"><div class="section-inner"> 110 111 <p>Footer text placed here.</p> 112 113 </div></div><!--/footer--> 114 115 116 <div id="UMS_TOOLTIP" style="position: absolute; cursor: pointer; z-index: 2147483647; background: transparent; top: -100000px; left: -100000px;"> 117 </div> 118 </body> 119 <umsdataelement id="UMSSendDataEventElement" data="https://learnwebcode.com/tutorial-files/responsive/#" docguid="null"> 120 </umsdataelement> 121 <div id="TAG_ID4TOOLBAR_UMS_GUID" style="display: none;">5F26C61C-D5B8-14E2-90E0-97707012A78B</div> 122 <div id="tmtoolbar_ums_injected" style="display: none;">init_ums</div> 123</html>
css
1h1, h2, h3, h4, h5, h6, p { 2 margin: 0; 3 padding: 0; 4} 5 6p { 7 margin: 0 0 1em 0; 8 font-size: 93%; 9 line-height: 1.5em; 10} 11 12body { 13 font-family: Helvetica, Arial, sans-serif; 14 padding: 0; 15 margin: 0; 16 background-color: #3f3f3f; 17} 18 19img { 20 max-width: 100%; 21 height: auto; 22 margin: 0 0 10px 0; 23} 24 25/* Section Inner */ 26div.section-inner { 27 max-width: 1100px; 28 padding: 0 25px; 29 margin: 0 auto; 30} 31 32/* Header */ 33div.header { 34 background-color: #E9E9E9; 35 padding: 40px 0; 36} 37 38/* Navigation */ 39div.nav { 40 background-color: #d4d4d4; 41} 42 43div.nav ul { 44 margin: 0; 45 padding: 0; 46} 47 48div.nav ul li { 49 list-style: none; 50 float: left; 51 font-size: 93%; 52} 53 54div.nav ul li a:link, 55div.nav ul li a:visited { 56 display: block; 57 padding: 10px 15px; 58 text-decoration: none; 59 color: #000; 60 border-right: 1px solid #bababa; 61} 62 63/* Body Content */ 64div.body-content { 65 padding: 50px 0; 66 background-color: #FFF; 67} 68 69/* Thirds */ 70div.thirds { 71 padding-bottom: 50px; 72} 73 74div.one-third { 75 width: 30%; 76 float: left; 77 margin-right: 5%; 78} 79 80div.one-third-last { 81 margin: 0; 82} 83 84/* Main Column */ 85div.main { 86 width: 65%; 87 float: left; 88 margin-right: 5%; 89} 90 91/* Side Column */ 92div.side { 93 width: 30%; 94 float: left; 95} 96 97/* Info Box */ 98div.info-box-a { 99 background-color: #9bdaef; 100 padding: 20px; 101 font-size: 13px; 102 margin: 0 0 15px 0; 103} 104 105div.info-box-b { 106 background-color: #efdb7f; 107 padding: 20px; 108 font-size: 13px; 109 margin: 0 0 15px 0; 110} 111 112/* Footer */ 113div.footer { 114 background-color: #3f3f3f; 115 color: #FFF; 116 padding: 15px 0; 117 text-align: center; 118} 119 120 121.clearfix:before, .clearfix:after { content: ""; display: table; } 122.clearfix:after { clear: both; } 123.clearfix { *zoom: 1; }
css
1body { 2 color: red; 3}
試したこと
htmlとmain.css,responsive.cssは同じ階層にあります。どの数値を変えても反応しませんでした。誤字脱字も自分なりに調べましたがなかったと思います。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/07 02:25
2020/12/07 04:33