スキルテスト: 画像とフォーム要素
このスキルテストの目的は、画像、メディア、フォーム要素のような特殊な要素が CSS でどのように扱われるかを理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、ボックスからはみ出している画像があります。画像は余分な余白なくボックス内に収まるように変倍したいのですが、 画像の一部が切り取られても構いません。これを実現するには、CSS を更新してください。
最終的には下記画像のようになるはずです。
html
<div class="box">
<img
alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
css
.box {
border: 5px solid #000;
width: 400px;
height: 200px;
}
img {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
画像の一部が切り取られても問題ありません。
object-fit: cover を用いるのが最善の選択ですが、幅と高さを 100% に設定する必要があります。
css
img {
height: 100%;
width: 100%;
object-fit: cover;
}
課題 2
この課題では、基本的なフォームがあります。
この課題を完了するには、次のようにします。
- 属性セレクターを使用して
.my-form内の検索フィールドとボタンを対象とします。 - フォームフィールドとボタンにフォームの他の部分と同じテキストサイズを使用するようにします。
- フォームフィールドとボタンに
10pxのパディングを与えます。 - ボタンの背景を
rebeccapurple、前景を白、境界線をなくし、角を 5px に丸めます。
最終的には下記画像のようになるはずです。
html
<form action="" class="my-form" method="post">
<div>
<label for="fldSearch">キーワード</label>
<input id="fldSearch" name="keywords" type="search" />
<input name="btnSubmit" type="submit" value="検索" />
</div>
</form>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.my-form {
border: 2px solid #000;
padding: 5px;
}
ここをクリックすると、模範解答を表示します。
この課題に対する解決策の例を以下に示します。
css
.my-form {
border: 2px solid #000;
padding: 5px;
}
.my-form input[type="search"] {
padding: 10px;
font-size: inherit;
}
.my-form input[type="submit"] {
padding: 10px;
font-size: inherit;
background-color: rebeccapurple;
color: white;
border: 0;
border-radius: 5px;
}
課題 3
2 つ目のフォームのスタイル設定の評価は、かなり自由形式であり、ここで何を行うかについて、非常に柔軟に対応できます。 CSS は、下記に記述されている要件を満たす必要があります。
この課題を完了するには、次のようにします。
- フォームの動作の正規化 で説明されているように、フォント、パディング、マージン、サイズをより一貫性のあるものにするために、何らかの軽量な「リセット」を追加して始めましょう。
- さらに、入力欄とボタンに、見栄えの良い一貫性のあるスタイル設定を追加します。
- 入力とラベルがきれいに整列するように、何らかのレイアウト手法を使用してください。
css
* {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
width: 500px;
}
/* ここより上のコードは変更しないでください。 */
/* ここにコードを追加してください。 */
ここをクリックすると、模範解答を表示します。
完了した CSS は、次のようになるでしょう。
css
/* ... */
/* ここより上のコードは変更しないでください。 */
button,
input,
select {
font-family: inherit;
font-size: 100%;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
li:last-of-type {
margin-top: 30px;
}
label {
flex: 0 40%;
text-align: right;
padding-right: 10px;
}
input,
select {
flex: auto;
height: 2em;
}
input,
select,
button {
display: block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
select {
padding: 5px;
}
button {
margin: 0 auto;
padding: 5px 20px;
line-height: 1.5;
background: #eee;
}
button:hover,
button:focus {
background: #ddd;
}