Q&A
イメージ画像があるのは分かり易くて良いと思いますが、ソースコードは、画像や文中のテキストでは無く、コードブロックとして表示させてください。
前提・実現したいこと
html,cssの初心者で、ドットインストールでcssレイアウト入門#6を学習中です。
２カラムのレイアウトを動画通り行ったのですが、１カラムになってしまいます。
発生している問題・エラーメッセージ
LeftとRightを２カラムにしたのですが、下記の通り１カラムとなってしまいます。
該当のソースコード
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"> 18 <div id="left">Left</div> 19 <div id="right">Right</div> 20 </div> 21 </main> 22 <footer> 23 <div class="container"> 24 footer 25 </div> 26 </footer> 27 </body> 28</html>
CSS
1body { 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 #left { 20 background: limegreen; 21 float: left; 22 width: 200px; 23 } 24#right { 25 background: lightgreen; 26 float: left; 27 width: 300px; 28} 29 30footer { 31 background: slategray; 32} 33コード
試したこと
何度もチェックしたのですが、原因が分かりませんでした。
そこで、Another HTML-lint gatewayで文法チェックを実施しましたが、２カラムに関するコメント等はありませんでした。
補足情報（FW/ツールのバージョンなど）
cloud9を使用しています。
CSSも質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
タイトルはもう少し要件に寄せた方が良いかと思います。質問は編集できるので適宜ご対応ください
ソースコードを「コードブロックとして表示」する方法を、ネット検索で調べたのですが、分かりませんでした。初歩的なことで大変恐縮ですが、よろしければご教示下さい。
ヘルプを見てもらうか質問編集画面の左下に「マークダウンについて」みたいなのが出てるのでそれで確認してもらっても良いのですが、ひとまず、質問編集画面でコード部分を選択し<code>ボタンを押してください。
teratailでは「Markdown」という記法が使用可能です。「kei344」さんのコメントや、teratailのヘルプ「https://teratail.com/help#about-markdown」を参考にしてみてください。
回答1件
0
ベストアンサー
CSSのルールは最後に;（セミコロン）をつけましょう。
CSSの基本: CSSを記述するルールで、重要な構文と重要ではない構文 | コリス
投稿2018/12/08 05:23
編集2018/12/08 07:55
総合スコア36115
あなたの回答
tips
プレビュー
