さまざまなレイアウトをFlexboxで作ってみよう|CodeLesson(コードレッスン)|プログラミング学習サービス

入門レッスン

さまざまなレイアウトをFlexboxで作ってみよう

Flexboxを使用したさまざまなレイアウトパターンを実践的に学びます。レスポンシブデザインにも対応した現代的なWebページ制作を目指します。

目安:45分

スキル一覧

display: flex

gap

flex-wrap

flex-direction（反対）

flex: 1; (ショートハンド)

flex-direction(垂直)

<header>

<footer>

達成率：

0%

カード型レイアウトをスタイリングしよう

はじめる

カード型レイアウトで縦方向の余白を設定しよう

はじめる

コンテンツを左右交互に配置してみよう

はじめる

伸縮するカードコンテンツを作成しよう

はじめる

2カラムレイアウトを作成しよう

はじめる

2カラムレイアウトをレスポンシブ対応しよう

はじめる

3カラムレイアウトを作成しよう

はじめる

3カラムレイアウトをレスポンシブ対応しよう

はじめる

聖杯レイアウトを作成しよう

はじめる

チュートリアル

クイズで振り返ろう

総復習クイズ

さまざまなレイアウトをFlexboxで作ってみよう

5問

0分