🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1500閲覧

cssに書き込んでも反応しません

Hiroto0

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/07 01:15

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ブラウザの幅を変えてみて下さい。
幅を広くすると、文字が黒く、
幅を狭くすると、文字が赤くなると思います。
つまり、レスポンシブ出来ているかと思います。

如何でしょうか?

投稿2020/12/07 02:04

tomtomtomtom

総合スコア563

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hiroto0

2020/12/07 02:25

先ほどまでは出来なかったのですが、今時間を空けてやってみたら出来るようになりました。 お手数をおかけしてすいませんでした。 回答ありがとうございました!
tomtomtomtom

2020/12/07 04:33

無事解決できたようね何よりです。 また機会がありましたら宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問