こんにちは!はっち(@hacchikabu)と申します。
20代のwebデザイナーを目指している会社員です。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
「お金の知識」×「webデザイン」×「スプラトゥーン」×「プレミアリーグ」×「エンタメ」の5本柱で情報発信を行っています。
今回はHTML/CSSのコーディングをする時には
避けられない
「Flex box」の勉強になる
Youtubeをご紹介します。
特にヘッダーでは要素を横並びにすることが
多いので、よく使われると思います。
逆に使いこなせないと、
コーディングできないと思われますので、
デザインをする方も、
このコーディング方法が分かるとエンジニアさんとコミュニケーションがかなり楽になると思います。
それでは見ていきましょう!
【超入門】初心者必見!10分でわかるFlexbox講座【HTML・CSS コーディング】
まずは、Webの神様さんの動画です。
flex boxの基本要素の8割がこの動画で簡潔にまとめられています。
HTML/CSSの勉強を始めた方には必須動画です。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
特に番外編の横並びにした後に、幅をする必要があることは結構大事で
色んなサイトで使われてますね。
初心者向け!CSS Flexbox(フレックスボックス) 実践編。4つのよくある基本的なレイアウトをFlexboxで組んでみましょう!
お次は、フロントエンドチャンネルさんの動画です。
Webの神様さんの動画で基礎を学んだ後に、実践としてよくあるスタイルを実践していきます。
HTMLから書いていくので、flex boxだけでなくて
HTML/CSSが自分で書けるのかも確かめることができます。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
inline要素に対してもFlex boxで位置指定できることは早く知りたかったです。
CSS入門講座 #11:Flexbox(フレックスボックス)でレイアウトを組もう
最後は、Webクリエイターボックスのmanaさんです。
web制作を志した方であれば、一度は見たことがあるこの本の著者です。
![](https://hacchi-kabu.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://hacchi-kabu.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
上の動画でもうまくついていけなかった方へ。
復習としてこの動画を見てみてください
親要素・子要素の関係からFlex boxを説明しているのが好きなポイントです。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
このFlex boxのチートシート(分かりやすく一覧にしたもの)も配布していらっしゃるので
Youtube概要欄から、ダウンロードもおすすめします。
まとめ
いかがでしたでしょうか。
Flex boxはCSSの要素というだけではなく、
HTMLの段階から意識してレイアウトを組む必要もありますので、
きちんと理解して使うようにすると学習もスムーズかと思います。
![](https://hacchi-kabu.com/wp-content/uploads/2022/02/BYEBYE-1024x572.png)
![](https://hacchi-kabu.com/wp-content/uploads/2022/02/BYEBYE-1024x572.png)
コメント