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

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

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

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

CSS

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

Q&A

解決済

1回答

1087閲覧

(1ヶ月目の初心者)CSSが反映されなくなった

GoodDay

総合スコア64

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/24 12:41

編集2019/03/13 10:07

【したいこと】
HTMLとCSSで、実用的ではありませんが、投票ボタンを作る練習をしています

【問題】
「float: left」で2つのボタンを寄せたのですが、「#wrap clear both」を書いて、回り込みが
解除されると思うのですが、
①#wrapがCSS上で黄色くなりませんでした
なぜでしょうか????
②HTML上で、どこで「<div id="wrap">」に対応する
</div>」を閉じれば
上手くいくのでしょうか?

③また、「h1{}」はCSSのどこに
書けばいいのでしょうか?

学び始めたばかりなので、
間違いが多くて申し訳ありません。。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset ="UTF-8"> 5 <title>my first project</title> 6 <link href ="css/style.css" rel ="stylesheet"> 7 </head> 8 <body> 9 10 <div id= "wrap"> 11 <h1>修学旅行先の投票</h1> 12 <div class= "buttonA"> 13 <a href="#" class="btn_1">Japan</a> 14 <a href="#" class="btn_2">Korea</a> 15 </div> 16 </div> 17 18 <h1>投票結果</h1> 19 20 </body> 21 </html>

CSS

1@charset "utf-8"; 2 3.buttonA a.btn_1 { 4 display: block; 5 margin: 20px; 6 padding: 120px; 7 height: 60px; 8 width: 100px; 9 padding: 0.8em; 10 text-align: center; 11 text-decoration: none; 12 color: #EC407A; 13 border: 2px solid #EC407A; 14 border-radius: 8px; 15 transition: .4s; 16 float: left; 17} 18.buttonA a.btn_1:hover { 19 background: #EC407A; 20 color: #fff; 21} 22 23.buttonA a.btn_2 { 24 display: block; 25 margin: 20px; 26 height: 60px; 27 width: 100px; 28 padding: 0.8em; 29 text-align: center; 30 text-decoration: none; 31 color: blue; 32 border: 2px solid blue; 33 border-radius: 8px; 34 transition: .4s; 35 float: left; 36 } 37.buttonA a.btn_2:hover { 38 background: blue; 39 color: white; 40 border: 2px solid blue; 4142 43#wrap{ 44 clear: both; 45

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

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

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

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

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

guest

回答1

0

ベストアンサー

他にもあるかもしれませんが。

CSS

1 2.buttonA a.btn_2:hover { 3 background: blue; 4 color: white; 5 border: 2px solid blue; 6/* ← 全角 */ 7 8#wrap{/* ← 全角 */ 9 clear: both; 10/* ← 全角 */

投稿2019/02/24 13:19

kei344

総合スコア69364

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

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

GoodDay

2019/02/24 13:25

非常に助かりました とても嬉しいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問