ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/03/16
NEW
週刊ドットインストール(2023/03/16号)を更新しました!
PREMIUM
CSS入門 フレックスボックス編
Webデザインで幅広く使われている、CSSフレックスボックスの使い方について詳しく解説していきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
HTML入門 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(22)
質問と回答
(6)
未完了
#01 macOSで作業用フォルダを設定しよう
(02:34)
無料公開中
素材ファイルのダウンロード
作業用フォルダの設定
ブラウザでの確認
未完了
#02 Windowsで作業用フォルダを設定しよう
(02:34)
無料公開中
素材ファイルのダウンロード
作業用フォルダの設定
ブラウザでの確認
未完了
#03 フレックスボックスの用語を整理しよう
(02:03)
無料公開中
概要
フレックスコンテナ
主軸
交差軸
フレックスアイテム
未完了
#04 フレックスコンテナを設定しよう
(02:41)
無料公開中
display: flex;
display: inline-flex;
未完了
#05 flex-directionで主軸の向きを変えよう
(02:47)
無料公開中
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
未完了
#06 justify-contentで要素を揃えてみよう
(02:20)
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
未完了
#07 align-itemsで要素を揃えてみよう
(02:20)
align-items: flex-start;
align-items: flex-end;
align-items: center;
justify-contentとの組み合わせ
未完了
#08 flex-wrapで要素を折り返してみよう
(02:30)
flex-wrap: wrap;
Flex Line
未完了
#09 gapで要素のすき間を定義しよう
(02:30)
gapプロパティ
calc()との組み合わせ
未完了
#10 align-self、autoキーワードを使おう
(03:01)
align-self: flex-start;
align-self: flex-end;
align-self: center;
marginのautoキーワード
未完了
#11 orderで並び順を変更してみよう
(02:05)
orderプロパティ
使いどころ
未完了
#12 flexでアイテムの挙動を制御しよう
(03:00)
flexプロパティ
autoと1以上の整数値の違い
開発者ツールによる確認
未完了
#13 実践的なレイアウトを組み上げよう
(02:08)
実践的なレイアウト
要素の配置
動作確認
未完了
#14 2カラムレイアウトを作ってみよう
(02:30)
フレックスコンテナの設定
flexプロパティの活用例
未完了
#15 3カラムレイアウトを作ってみよう
(02:24)
nav要素の追加
orderプロパティの活用例
未完了
#16 bodyの高さについて理解しよう
(01:46)
3カラムレイアウトの問題点
body, htmlの高さ
フレックスボックスの活用
未完了
#17 footerを下部に配置しよう
(02:44)
body, htmlの設定
フレックスボックスの設定
未完了
#18 画像付きの記事一覧を作ろう
(02:51)
要素の配置
display: flex;
flexプロパティ
gapプロパティ
未完了
#19 画像を左右に振り分けよう
(02:40)
隣接兄弟結合子
:nth-child(even)
flex-direction: row-reverse;
align-items: center;
未完了
#20 ロゴ付きのヘッダーメニューを作ろう
(02:34)
要素の配置
display: flex;
justify-content: space-between;
marginのautoキーワード
未完了
#21 メニューをクリックしやすくしよう
(02:29)
リストのスタイリング
a要素のスタイリング
未完了
#22 次のステップを確認しよう
(01:28)
ここまでのまとめ
次のステップ
256timesの紹介
#10 align-self、autoキーワードを使おう
align-self: flex-start; と align-self: start; は何が違うのですか?
2022年11月24日
#17 footerを下部に配置しよう
html や body の高さを height: 100vh; と指定してもよいですか?
2022年12月26日
#18 画像付きの記事一覧を作ろう
body をフレックスコンテナにするのではダメでしょうか?
2023年2月22日
#19 画像を左右に振り分けよう
align-items の代わりに line-height を使うと上下中央揃えにならないのはなぜですか?
2023年2月5日
#21 メニューをクリックしやすくしよう
通常の設定とは別に、マウスホバーの設定は必ず a:hover のようにしないといけませんか?
2022年12月1日
#22 次のステップを確認しよう
プロパティと属性の違いはなんですか?
2023年2月5日
次におすすめのレッスン
CSS入門 メディアクエリー編
(全14回)
PREMIUM
PREMIUM
0%
CSS入門 アニメーション編
(全19回)
PREMIUM
PREMIUM
0%
実践!ポートフォリオサイトを模写しよう
(全18回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2022年11月15日
バージョン情報
Chrome 105 / Visual Studio Code 1.71.0
関連キーワード
(5)
基礎講座
(363)
初心者向け
(362)
HTML
(113)
CSS
(114)
Web制作
(19)
このレッスンを共有する