-
問1/10
クラスセレクタの正しい使用方法はどれか
-
問2/10
次のように記述したときに,色が赤に変わるテキストはどれか
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<section class="colorBox">
<div class="header">
<p >テキスト1</p>
</div>
<div class="body">
<p>テキスト2</p>
<p>テキスト3</p>
</div>
</section>
<p>テキスト4</p>
</body>
</html>
-
問3/10
次のようなHTMLがあったときに,テスト2, 4, 6, ...と奇数個目要素だけ赤色に変更したい。
正しい,CSSはどれか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
<li>テスト4</li>
<li>テスト5</li>
<li>テスト6</li>
<li>テスト7</li>
<li>テスト8</li>
<li>テスト9</li>
<li>テスト10</li>
</ul>
</body>
</html>
-
問4/10
次のHTMLで,hello word文字列を上下中央揃えしたい。正しい,設定の組み合わせはどれか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
position: relative;
height: 160px;
}
#box .icon {
position: absolute;
top: 50%;
left: 50%;
①
②
}
</style>
</head>
<body>
<div id="box">
<div class="icon">
<p>hellw world</p>
</div>
</div>
</body>
</html>
-
問5/10
次のHTMLを実行したときに,結果はどうなるか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
color: #fff;
padding: 15px;
}
a#btn {
background-color: blue;
}
a.active {
background-color: red;
}
a#btn.active {
background-color: gray;
}
</style>
</head>
<body>
<a href="#" id="btn" class="active">ボタンをクリック</a>
</body>
</html>
-
問6/10
次のHTMLを使って,要素を左右に配置したい。①②に当てはまる適切な組み合わせはどれか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
background-color: gray;
width: 700px;
}
.box {
width: 330px;
height: 250px;
border: 1px solid black;
}
#left-contents {
①
}
#right-contents {
②
}
</style>
</head>
<body>
<div id="container">
<div id="left-contents" class="box">
左側のコンテンツ
</div>
<div id="right-contents" class="box">
右側のコンテンツ
</div>
</div>
</body>
</html>
-
問7/10
idセレクタの正しい指定方法はどれか
-
問8/10
次のようなHTMLを使って,hello worldという文字列を枠の中に上下左右の余白が均等になるように配置したい。
①・②に組み合わさるもので正しいものはどれか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
display: table;
width: 330px;
border: 1px solid black;
}
#box .text {
display: table-cell;
height: 160px;
①
②
}
</style>
</head>
<body>
<div id="box">
<p class="text">hello wordl</p>
</div>
</body>
</html>
-
問9/10
CSSのレスポンシブ対応について,間違っているものをどれか
-
問10/10
ボックスモデルの用語について,正しい説明しているものはどれか