質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

1回答

1033閲覧

CSSレイアウトで3カラムを作りたい。

hisarin

総合スコア20

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/12/13 13:59

編集2018/12/13 14:22

前提・実現したいこと

html,cssの初心者です。
ドットインストールの「cssレイアウト入門#09」で3からむを作りたかったのですが、エラーとなってしまいます。
よろしければ、ご教示ください。

発生している問題・エラーメッセージ

添付画像のエラーメッセージが表示されます。

cssエラー

該当のソースコード

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です。

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

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

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

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

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

kei344

2018/12/13 14:14

画像はコードブロックの中で表示されません。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
hisarin

2018/12/13 14:23

kei344様 ありがとうございました。 無事に画像を添付出来ました。
guest

回答1

0

ベストアンサー

CSS

1#left { 2 background: limegreen; 3 float: left; 4 width: 100px; 5 } /* ← これが抜けています */ 6#center { 7 background: seagreen; 8 float: left; 9 width: 300px; 10 }

投稿2018/12/13 14:28

kei344

総合スコア69366

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

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

hisarin

2018/12/13 15:42

kei344様 凡ミスにも関わらず回答いただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問