ステップアップ

CSS · 中級 - 実践的なものを作る

• カスケード、詳細度、継承詳細度を使ってどのCSSルールが勝つかを予測できるようになり、継承を活用してコード量を減らしましょう。
• Flexbox: 軸、justify/align、gap、flex-growFlexboxの2つの軸をマスターして、日常的なレイアウトで要素を揃え、中央に配置し、分配しましょう。
• Grid: 列、行、エリアCSS Gridの列、行、名前付きエリアを使って、ギャラリーやページ全体のレイアウトを組み立てましょう。
• 配置: relative、absolute、fixed、sticky、z-indexCSSの配置と適切に管理されたz-indexのスケールを使って、バッジ、ヘッダー、モーダルを思いどおりの位置にぴったり固定しましょう。
• レスポンシブデザイン: メディアクエリ、相対単位モバイルファーストのアプローチ、メディアクエリ、rem・%・vw 単位を使って、インターフェースをあらゆる画面サイズに適応させましょう。