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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

1回答

1358閲覧

左右で色が別れているボックスで、右のボックスに色をつけるには

AmiI

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/03/03 12:06

css

1<style> 2.bbb{ 3 padding: 2.5% 0; 4 display: flex; 5 flex-direction: row; 6 position: relative; 7} 8.bbb > div{ 9 width: 50%; 10 font-size: 20px; 11 margin: 0; 12 text-align: center; 13 padding: 10px; 14} 15.left-boxb { 16 color: #ffffff; 17 background-color: #0454a4; 18 line-height: 2 19 font-weight: bold; 20 Font-family:”sans-serif” 21} 22</style>

html

1<div class="bbb"> 2 <div class="left-boxb"> 3<b>左のボックスの文字</b> 4 </div> 5 <div c1ass="right-box"> 6 <font color="#696969"> 7右のボックスの文字 8</font> 9</p> 10 </div> 11</div>

このコードでボックスを作りました。
左のボックスはバックグラウンドカラーで変えられるとわかるのですが、右のボックスの背景色を変えたい場合、どうすればいいのでしょうか。

このサイトに載っていたコードを以下のようにアレンジしてみたりもしたのですが、
https://www.sejuku.net/blog/56401

css

1 .left-boxb:nth-child(1) { 2 background-color: #2196F3; /* 背景色指定 */ 3} 4 5.left-boxb:nth-child(2) { 6 background-color: #4CAF50; /* 背景色指定 */ 7}

それでもダメでした。

もしかして、右のボックスにも配色をできるように、コードを1から書き直したほうがいいのでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

<div c1ass="right-box">

エルが「いち」になっています

投稿2020/03/03 12:15

yambejp

総合スコア114572

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

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

AmiI

2020/03/04 03:02

とりあえず直しました。
yambejp

2020/03/04 03:08

nth-child(2) はHTML要素しか指定できません 同じクラスの中のn番目という処理はできませんので HTML自体を工夫する必要があります
AmiI

2020/03/04 03:37

ありがとうございます、コードを作り直してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問