スキルテスト: 画像とフォーム要素
このスキルテストの目的は、画像、メディア、フォーム要素のような特殊な要素が CSS でどのように扱われるかを理解しているかどうかを評価することです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitchなどのオンラインエディターで解決策を試すことができます。
もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
課題 1
この課題では、ボックスからはみ出している画像があります。画像は余分な余白なくボックス内に収まるように変倍したいのですが、 画像の一部が切り取られても構いません。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 2
この課題では、単純なフォームがあります。課題は以下の変更を行うことです。
- 属性セレクターを使用して
.myform内の検索フィールドとボタンを対象とします。 - フォームフィールドとボタンにフォームの他の部分と同じテキストサイズを使用するようにします。
- フォームフィールドとボタンに 10px のパディングを与えます。
- ボタンの背景を
rebeccapurple、前景を白、境界線をなくし、角を 5px に丸めます。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。