Gridを使ってカード型レイアウトを学ぼう|CodeLesson(コードレッスン)|プログラミング学習サービス

入門レッスン

Gridを使ってカード型レイアウトを学ぼう

CSS Gridレイアウトによるウェブページの設計方法を学びます。グリッドシステムを用いて整理されたカード型のレイアウトを作成し、現代のWebデザイン技術を習得します。

目安:30分

スキル一覧

grid

grid-template-columns

grid-template-rows

gap

fr

達成率：

0%

子要素をグリッド要素にしよう

はじめる

子要素の配置を指定しよう

はじめる

要素と要素の間に余白を指定しよう

はじめる

【演習】カード要素をグリッドレイアウトで均等に配置をしよう

はじめる

親要素の幅に対して、分割で子要素の幅を指定しよう

はじめる

【演習】カード要素をグリッドレイアウトで柔軟に配置しよう

はじめる

チュートリアル

クイズで振り返ろう

総復習クイズ

Gridを使ってカード型レイアウトを学ぼう

5問

0分