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

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

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

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

CSS

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

Q&A

解決済

1回答

895閲覧

【HTML/CSS】ヘッダーに背景色がつきません

jiaetakoga

総合スコア96

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/16 13:56

お手本サイト
初心者です。
練習で上記のサイトを真似して作成しようと思っていますが、ヘッダーに背景色がつきません。
どうしたら色がつくようになるのか教えて頂きたいです、、、
※初心者のため、簡単な言葉で説明していただければ幸いです。

【お手本サイト】
https://codecamp.jp/top?ccadid=a8&argument=qkDLyMCX&dmai=CC_TOP_a8&a8=8ME.uML6QfWhMqs.dHwZdFm3gqi05hwQZH5M5EOWkeX6QfEFJTGp4TENIf49r9GwIe-ZWgEsIME.Ss00000016159001&utm_expid=.hSXfUCkmQBa7nUMkOFz7Bw.1&utm_referrer=https%3A%2F%2Fj-info1.com%2Fhtml-css-study

HTML

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Code Camp</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <header> 10 <div class="container"> 11 <div class="header1"> 12 <div class="header1-left"> 13 完全オンラインのプログラミング個人レッスン 14 </div> 15 <div class="header1-right"> 16 <ul> 17 <li><a href="#">就職・転職をご希望の方</a></li> 18 <li>|</li> 19 <li><a href="#">企業研修・採用担当の方</a></li> 20 </ul> 21 </div> 22 </div> 23 </div> 24 </header> 25 26 <div class="part1"> 27 28 </div> 29 30 </body> 31</html> 32

CSS

1header { 2 3} 4 5.container { 6 width: 1170px; 7 padding: 0 15px; 8 margin: 0 auto; 9} 10 11.header1 { 12 background-color: #191970; 13 14} 15 16.header1-left { 17 color: red; 18 float: left; 19} 20 21.header1-right li { 22 float: right; 23 list-style: none; 24 margin-left: 10px; 25} 26

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

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

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

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

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

guest

回答1

0

ベストアンサー

お手本があるなら調べましょう。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

また、2020現在の環境でfloatを使ってレイアウトをする必要はありません。FlexGridでレイアウトは組みましょう。(floatは文章内の画像を回り込ますためくらいにしか使いません)

【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

【これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
https://ics.media/entry/15921/


一応回答:

CSS

1.container::after { 2 display: block; 3 clear: both; 4 content: ""; 5}

【(2019年更新)【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て】
https://jdash.info/archives/clearfix_at_Bootstrap_CSS

投稿2020/01/16 14:11

kei344

総合スコア69364

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

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

jiaetakoga

2020/01/16 22:32

ご回答ありがとうございます。 可能であれば、私のコードに手直しをしたサンプルコードをいただけると嬉しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問