FlexBoxレイアウトでヘッダー部分作成課題
課題
課題用ファイル の「header_flex_beforeフォルダ」の中のCSSフォルダ内の「style.css」を編集して、「完成例.png」のようなレイアウトを作成してください。
ただし、flexレイアウトを使ってください。
サンプルのダウンロード
ここでダウンロードする「flex_lesson1.zip」と「header_flex_after.zip」ファイルは、この動画で使用したものです。
課題用ファイル：flex_lesson1.zip
解答用ファイルheader_flex_after.zip
Web入門一覧
- Slickの導入方法 （動画あり）
- Web作成講座〜FlexBoxレイアウトでヘッダーを作成（動画あり）
- Web作成講座 FlexBoxレイアウトの動画
- Web作成講座 floatレイアウト1（動画あり）
- Web作成講座 floatレイアウト2 （コード解説 動画）
- Web制作講座 Webフォント、inlin-block、marginの相殺について(動画あり）
- Web制作講座 backgroundプロパティの説明(動画あり）
- CSS flex〜チートシート(動画あり)
- FlexBoxの使い方（7）〜 flex-wrapについて（動画あり）
- FlexBoxの使い方（５）〜flexプロパティについて（動画あり）
- FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）
- FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え（動画あり）
- FlexBoxの使い方（１）〜display:flexについて（動画あり）
