ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/24
NEW
『Nuxt入門 基礎編』をリリースしました
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】詳解CSS フレックスボックス編
ウェブページのレイアウトに広く使われている、CSSのフレックスボックスについて見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 フレックスボックス編
Webデザインで幅広く使われている、CSSフレックスボックスの使い方について詳しく解説していきます。
0%
動画レッスン一覧
(16)
質問と回答
(115)
#01 フレックスボックスを使ってみよう
(02:19)
無料公開中
概要
利用例
未完了
#02 関連用語について理解しておこう
(01:27)
無料公開中
flex container
flex item
主軸
交差軸
未完了
#03 要素の並び、揃えを制御しよう
(02:32)
無料公開中
flex-direction
justify-content
align-items
未完了
#04 flex-wrap、align-contentを使おう
(02:11)
無料公開中
flex-wrap
align-content
flex-flow
未完了
#05 align-self、orderを使ってみよう
(01:30)
align-self
order
未完了
#06 flex-basisでサイズを決めよう
(01:45)
flex-basis
未完了
#07 flex-grow、flex-shrinkを理解しよう
(02:47)
flex-grow
flex-shrink
未完了
#08 flexプロパティを使ってみよう
(02:38)
flex
初期値に関する注意点
未完了
#09 2カラムレイアウトを作ってみよう
(02:08)
2カラムレイアウト
未完了
#10 3カラムレイアウトを作ってみよう
(01:28)
3カラムレイアウト
order
未完了
#11 縦方向に要素を配置してみよう
(02:52)
縦方向への配置
高さの設定
未完了
#12 要素を上下左右中央に配置しよう
(02:47)
上下左右中央への配置
フレックスボックスを使った方法
未完了
#13 ヘッダーレイアウトを作ってみよう
(02:39)
ヘッダーレイアウトの制作
marginとの組み合わせ
未完了
#14 横並びメニューを作ってみよう
(02:23)
横並びメニュー
クリックエリアの設定
未完了
#15 画像とテキストを配置してみよう
(02:49)
画像とテキストの配置
未完了
#16 画像を左右に振り分けてみよう
(02:28)
交互に配置が逆になるリストの作成
flex-direction: row-reverse
未完了
#01 フレックスボックスを使ってみよう
選択した行を移動するショートカットを教えてください
2022年7月23日
なぜクラス名を container とするのですか?
2022年7月9日
flex-basis: 50px を指定しているのに、ブラウザ幅を縮めると box1 と box2 の幅が 50px 以下になるのはなぜですか?
2022年6月9日
div class="box box1" という具合に二回も box を書くのは何故でしょうか?
2022年1月27日
グローバルナビゲーションを作成する場合には display: flex; が主流ですか?
2022年1月27日
右側のブラウザ実行環境画面を非表示にする方法はありますか?
2022年1月27日
VS Code ではなくブラウザ実行環境を使ったほうがよいのですか?
2022年1月27日
display:flex; にはなぜ親要素が必要になるのですか?
2022年1月27日
フレックスボックスを使用する際は親要素が必要になるのでしょうか?
2022年1月27日
Flexbox、inline-block、floatの違いと使い分けについて
2022年1月27日
flex:1;とは何ですか?
2022年1月27日
#03 要素の並び、揃えを制御しよう
flex-direction:row-reverse; が正しく適用されないのですがどうすればいいですか?
2022年9月3日
flex-direction: row-reverse; を指定したときの justify-content: flex-end; の動きが理解できません
2022年1月27日
CSS プロパティの初期値とはなんですか?
2022年1月27日
flex-directionとjustify-contentの関係がよくわかりません
2022年1月27日
flex-directionが機能しません
2022年1月27日
align-itemsをcenterやflex-endにしてもうまくいきません
2022年1月27日
#04 flex-wrap、align-contentを使おう
flex-wrap を指定して、align-items も指定する場合はあるのですか?
2022年5月19日
align-items と align-content でスペースの違いが出来るのはなぜでしょうか?
2022年1月27日
align-contentとalign-itemsの違いは何ですか?
2022年1月27日
交差軸方向に余裕を持たせるにはどうすればいいのでしょうか?
2022年1月27日
align-itemsとalign-contentはどう違うのですか?
2022年1月27日
#05 align-self、orderを使ってみよう
order プロパティの使い道を教えてください
2022年1月27日
order の仕組みがよくわかりません
2022年1月27日
#06 flex-basisでサイズを決めよう
flex-basisがよくわからない
2022年1月27日
#07 flex-grow、flex-shrinkを理解しよう
flex-grow: 1; は余白を均等に分配するという理解であっていますか?
2022年1月27日
なぜ全体の長さが 380px とわかるのでしょうか?
2022年1月27日
幅が異なるフレックスアイテムに flex-shrink の幅を設定したところ、想定とは違う幅になってしまったのはなぜですか?
2022年1月27日
flex-shrinkの具体的な使用シーンが想定できません
2022年1月27日
flex-shrinkの計算がわかりません
2022年1月27日
flex-shrinkがどのように調整されるかわかりません
2022年1月27日
デモが表示されません
2022年1月27日
#08 flexプロパティを使ってみよう
flex: initial; の意味を教えてください
2022年9月3日
box3 に flex-grow: 2; を設定しているから、多く配分されているということですか?
2022年5月24日
flex: initial; はどういう場面で使うのですか?
2022年1月27日
basis を指定すると grow と shrink が無効になってしまう気がするのですが...
2022年1月27日
flex-basisが0%であるという状態が想像できません
2022年1月27日
なぜgrowとshrinkを一緒に指定しないといけないのでしょうか?
2022年1月27日
#09 2カラムレイアウトを作ってみよう
2 カラム用レイアウトとは何ですか?
2022年3月7日
main の幅を width: 100% ではなく flex: 1 にするのはなぜですか?
2022年1月27日
直近の子要素とはどこまでを指しますか?
2022年1月27日
flex: auto; と flex: 1; の違いを教えて下さい
2022年1月27日
flexboxは入れ子構造に対応していますか?
2022年1月27日
#10 3カラムレイアウトを作ってみよう
CSS に要素を書くとき .(ドット)から始まるのはどんな時ですか?
2022年1月27日
なぜ nav 要素には float プロパティが適用されないのですか?
2022年1月27日
widthではなくflex-basisで幅を指定しても良いですか?
2022年1月27日
「order: -1」とせずにHTMLを編集すればいいのでは?
2022年1月27日
#11 縦方向に要素を配置してみよう
.container は縦方向、main は横方向に伸びるのはなぜですか?
2022年3月24日
height: 100vh; と設定しても問題ないでしょうか?
2022年1月27日
body のmargin をリセットしない場合、footer を画面からはみ出さないようにするにはどうしたらよいのでしょうか?
2022年1月27日
なぜ Flexbox では margin の相殺が起きないのですか?
2022年1月27日
bodyの直近の子要素はどこまで含まれますか?
2022年1月27日
head に height を設定できません
2022年1月27日
毎回、高さ100%を指定する必要がありますか?
2022年1月27日
bodyの中にかかれている内容が理解できません
2022年1月27日
htmlの代わりにアスタリスク(*)にして高さを指定してもいいですか?
2022年1月27日
bodyとhtmlの両方に100%を指定しなくてはいけないのはなぜですか?
2022年1月27日
#12 要素を上下左右中央に配置しよう
calc の 20px や 50px は何の数値ですか?
2022年2月16日
justify-content や align-items を div タグに直接指定しても反映されないのはなぜでしょうか?
2022年1月27日
header 要素の position: relative の役割を教えてください
2022年1月27日
margin: autoで真ん中に寄せてもいいですか?
2022年1月27日
プロパティの名前がなぜそうなっているのかわかりません
2022年1月27日
「justify-content: center; align-items: center;」をheaderの方に書くのはなぜですか?
2022年1月27日
calc()で使っている50%の意味がわかりません
2022年1月27日
画面を左右2分割することはできますか?
2022年1月27日
#13 ヘッダーレイアウトを作ってみよう
ul の「 padding: 0 」の部分は「 padding-inline-start: 0 」でも問題ないですか?
2022年1月27日
nav と指定している部分を nav > ul や nav.ul にするとうまくいかないのはなぜですか?
2022年1月27日
画像サイズは width と height の両方を指定する必要がありますか?
2022年1月27日
nav ul ではなく nav で指定してはいけないのですか?
2022年1月27日
display: flex; と margin-left: auto; はセットでしか機能しないのはなぜですか?
2022年1月27日
navタグは必要ですか?
2022年1月27日
画像サイズの指定方法について教えて下さい
2022年1月27日
なぜliが右端に移動するのかわかりません
2022年1月27日
list-styleをliではなくてulで指定しているのはなぜですか?
2022年1月27日
nav ulに「margin-left: auto;」としてはだめですか?
2022年1月27日
imgのサイズだけHTMLで指定しているのはなぜですか?
2022年1月27日
justify-content: space-between; が反映されません。
2022年1月27日
画像を配置したのですがうまく表示できません
2022年1月27日
画像が反映されません
2022年1月27日
#14 横並びメニューを作ってみよう
なぜ inline を block に変えると横並びが元に戻るのですか?
2022年3月24日
動画通りにコードを入力しましたが、menu の文字が上下中央揃えになりません
2022年1月27日
ul に display: flex; とすると、孫の a 要素にまで効くのはなぜでしょうか?
2022年1月27日
なぜ nav ul ではなく nav li に背景色を設定したのですか?
2022年1月27日
:hover とはなんですか?
2022年1月27日
a要素に変えるとスタイルが変わるのはなぜですか?
2022年1月27日
navをセレクタに含める意味はありますか?
2022年1月27日
なぜ li を a にすると周辺がクリックできるようになるのですか?
2022年1月27日
「display: block;」は「display: inline-block;」でもいいですか?
2022年1月27日
line-heightとheightはどう違うのですか?
2022年1月27日
リンクにカーソルをあわせると指アイコンになりますがなぜですか?
2022年1月27日
#15 画像とテキストを配置してみよう
div の必要性がわかりません
2022年7月9日
flex : 1; の使い方がよくわかりません
2022年2月28日
固定幅を 180px としたのには決まりがあるのですか?
2022年1月27日
画像を固定幅にするのはなぜですか?
2022年1月27日
.desc { flex: 1; } の意味がわかりません
2022年1月27日
divの使いどころがわかりません
2022年1月27日
margin-bottomはpicの方に設定してもいいですか?
2022年1月27日
.picの幅を変えても画像の幅が変わらないのはなぜですか?
2022年1月27日
VS Codeで「元に戻す」ショートカットキーはありますか?
2022年1月27日
#16 画像を左右に振り分けてみよう
画像とテキストの間の余白に gap を使ってもいいですか?
2022年6月1日
padding を設定していないのにスペースが空いてしまいます
2022年1月27日
calc の指定が効いていないようなのですが原因がわかりません
2022年1月27日
案件を獲得するには HTML と CSS すべてを完璧に理解しなければいけないでしょうか?
2022年3月3日
特定の要素を指定する場合は、nth-of-type を使用するのではないでしょうか?
2022年1月27日
section ではなく .desc に width: calc(100% - 180px - 32px); を指定するのはなぜですか?
2022年1月27日
画像とテキストの左右の入れ替えに order を使っても良いですか?
2022年1月27日
width100%の挙動について教えてください。
2022年1月27日
floatやclearでは作れないのでしょうか?
2022年1月27日
<p>タグにある英字が自動改行できません
2022年1月27日
justify-content: space-between;を指定するのはなぜですか?
2022年1月27日
nth-childがうまく動きません
2022年1月27日
幅や余白などのサイズをどうやって決めているのですか?
2022年1月27日
「display:flex」と「display:block/inline」の関係について教えて下さい
2022年1月27日
calcで何を計算しているのかわかりません
2022年1月27日
ロゴとテキストの間にスペースが空きません
2022年1月27日
リリース情報(note)
『詳解CSS フレックスボックス編』をリリースしました
詳細情報
最終更新日
2019年12月27日
バージョン情報
Chrome 78.0 / Visual Studio Code 1.38.0