前提・実現したいこと
html,cssの初心者です。
ドットインストールの「cssレイアウト入門#09」で3からむを作りたかったのですが、エラーとなってしまいます。
よろしければ、ご教示ください。
発生している問題・エラーメッセージ
添付画像のエラーメッセージが表示されます。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf8"> 5<title>CSS Layout Practice</title> 6<link rel="stylesheet" href="normalize.css"> 7<!--<link rel="stylesheet" href="reset.css">--> 8<link rel="stylesheet" href="styles.css"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 header 14 </div> 15 </header> 16 <main> 17 <div class="container clearfix"> 18 <!--<div class="container clear"> --> 19 <div id="left">Left</div> 20 <div id="center">Center</div> 21 <div id="right">Right</div> 22 </div> 23 <div style="clear:both;"></div> 24 </main> 25 <footer> 26 <div class="container"> 27 footer 28 </div> 29 </footer> 30 </body> 31</html> 32
css
1/*body {*/ 2 /* background: slategray;*/ 3 /*}*/ 4 5 .container { 6 width: 500px; 7 margin: 0 auto; 8 /*background-color: pink;*/ 9 } 10 11 12header { 13 background: tomato; 14} 15 16main { 17 background: skyblue; 18} 19 20/* #left {*/ 21/* background: limegreen;*/ 22/* float: left;*/ 23/* width: 180px;*/ 24/* margin-right: 20px*/ 25/* }*/ 26/*#right {*/ 27/* background: lightgreen;*/ 28/* float: left;*/ 29/* width: 300px;*/ 30 31/*#left,#right {*/ 32/* padding: 10px;*/ 33/* box-sizing: border-box;*/ 34/*}*/ 35 36#left { 37 background: limegreen; 38 float: left; 39 width: 100px; 40 41#center { 42 background: seagreen; 43 float: left; 44 width: 300px; 45 } 46 47#right { 48 background: lightgreen; 49 float: left; 50 width: 100px; 51} 52.clearfix::after{ 53 content: ''; 54 display: block; 55 clear: both; 56} 57/*.clear {*/ 58/* overflow: hidden;*/ 59/*}*/ 60 61footer { 62 clear: both; 63 background: slategray; 64}
試したこと
動画とコードを見直しました。
補足情報(FW/ツールのバージョンなど)
添付画像はcloud9です。
回答1件
あなたの回答
tips
プレビュー