スキルテスト: 値と単位
このスキルテストの目的は、 CSS プロパティで使われる様々な種類の値と単位を理解しているかどうかを評価することです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitchなどのオンラインエディターで解決策を試すことができます。
もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
課題 1
この課題では、最初のリストアイテムに16進カラーコードを使用して背景色が指定されています。課題は、異なる形式で同じ色を使用して CSS を完成させ、さらに最後のリストアイテムで背景を半透明にすることです。
- 2 つ目のリストアイテムには RGB 色を使用しましょう。
- 3 つ目には HSL 色を使用しましょう。
- 4 つ目には RGB 色を使用しますが、アルファチャンネルを
0.6に設定しましょう。
このリンクで 16 進数の色の変換を探すことができます。その値を CSS で使用する方法を見つける必要があります。最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 2
この課題では、下記記述されているように、様々な項目のテキストのサイズを設定してください。
<h1>要素は 50 ピクセルにしてください。<h2>要素は 2em にしてください。<p>要素は 16 ピクセルにしてください。<p>要素のうち、<h1>の直後のものは 120% にしてください。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 3
この課題では、背景画像が水平方向の中央に配置され、ボックスの上部から 20％ になるように移動させます。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。