スキルテスト: 位置指定
このスキルテストの目的は、CSS の position プロパティと値を使用した CSS の位置指定を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。
メモ: 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。
行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。
課題 1
この課題では、5px のグレーの境界線があるコンテナーの上と右に、target というクラスを持つアイテムを配置します。
最終的には下記画像のようになっているはずです。
下記のライブコードを更新して、完成例を再現してみてください。
追加の課題です。
- 追加課題として、 target をテキストの下に表示するように変更できますか？
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
課題 2
このタスクでは、下記の例でボックスをスクロールすると、サイドバーがコンテンツと一緒にスクロールします。サイドバーが配置されたまま、コンテンツだけがスクロールするように変更してください。
下記のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
評価またはさらなるヘルプ
この例は、上記のインタラクティブエディターで練習することができます。
この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。
-
作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
-
MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
- 「位置指定のスキルテスト 1 のための評価希望」のような説明的なタイトル。
- すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
- 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
- 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。