スキルテスト: 書字方向と論理的プロパティ
このスキルテストの目的は、 CSS の書字方向と論理的プロパティを使用した様々なテキストの方向を扱う方法を理解しているかどうかを評価することです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitchなどのオンラインエディターで解決策を試すことができます。
もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
課題 1
この課題では、ボックスが横書きで表示されています。 CSS の行を追加して、右から左へ流れる縦書きを使用するように変更することができますか？
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 2
この課題では、ボックスを縦にしたときの縦横比を維持するために、 width と height を置き換える論理プロパティを使用してください。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 3
この課題では、マージン、境界線、パディングプロパティの論理的なバージョンを使用して、ボックスの辺が上、左、下、右に続くのではなく、テキストに関連するようにしてください。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。