スキルテスト: 段組み
このスキルテストの目的は、CSS 段組みレイアウトを、column-count、column-width、column-gap、column-span、column-rule プロパティや値を含めて理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、 3 つの小さな課題を行っていただきます。
メモ: 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。
行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。
課題 1
この課題では、各列の間に 50px の間隔を空けて、 3 つの段組みを作成してください。
最終結果は下記の画像のようになるはずです。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
課題 2
この課題では、最小幅 200px の段組みを作成します。次に、各段の間に 5px の灰色の罫線を追加し、罫線の端と列のコンテンツとの間に 10px の空間があることを保証してください。
最終結果は下記の画像のようになるはずです。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
課題 3
この課題では、見出しと小見出しを格納する要素をすべての段組みにまたがるようにし、下記画像のようにしてください。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。