ID非公開

2020/8/8 11:50

11回答

現在、htmlとcssを使ってクイズを作成しています。以下の画像のように作りたいです。問題番号と問題をそれぞれ別の色で表現するためには、どのようなソースコードを書けば良いですか?

現在、htmlとcssを使ってクイズを作成しています。以下の画像のように作りたいです。問題番号と問題をそれぞれ別の色で表現するためには、どのようなソースコードを書けば良いですか?

画像

HTML、CSS22閲覧

ベストアンサー

0

下記CSSを応用するにはCSSの知識が必要です。 下記CSSの意味が分からない場合はググって勉強して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> <!-- ↑metaタグでcharsetをUTF-8に設定しています。 モチロン他のキャラクターセットに変更しても良いですが、 必ずcharsetに設定されているキャラクターセットでセーブして下さい。 キャラクターセットが違うと全角文字が文字化けします。 --> <title>test</title> <style type='text/css'> <!-- .FloatL{ float: left; background: gainsboro; color: dimgray; font-weight: bold; } .FloatR{ float: right; width: 80vw; background: lightcyan; color: cadetblue; font-weight: bold; } .CB000N:not(:checked) ~ .CM000NDN { display: none; } .CB001N:not(:checked) ~ .CM001NDN { display: none; } .CB002N:not(:checked) ~ .CM002NDN { display: none; } .CB003N:not(:checked) ~ .CM003NDN { display: none; } .CB004N:not(:checked) ~ .CM004NDN { display: none; } .CM{ color: green; font-weight: bold; } --> </style> </head> <body> <div class="FloatL"> 問題 3<br> 正解<br> 1/1<br> ᚹ問題にフラグ<br> を付ける<br> </div> <div class="FloatR"> 問題.TCPの機能で正しくないものを全て選択せよ。<br> <br> 1つまたはそれ以上選択してください:<br> <input type="checkbox" class="CB000N"> シーケンス番号と確認応答番号及びASKフラグによる送信確認 <span class="CM CM000NDN">✔</span><br> <input type="checkbox" class="CB001N"> IPフラグメンテーション <span class="CM CM001NDN">✔</span><br> <input type="checkbox" class="CB002N"> タイマーによる再送 <span class="CM CM002NDN">✔</span><br> <input type="checkbox" class="CB003N"> 並べ替えと重複除去 <span class="CM CM003NDN">✔</span><br> <input type="checkbox" class="CB004N"> 波形変換 <span class="CM CM004NDN">✔</span><br> </div> </body> </html>

ThanksImg質問者からのお礼コメント

ご丁寧にありがとうございます

お礼日時:8/10 10:11