【超入門】Flexboxを30分で完全習得！初心者向け【HTML・CSS コーディング】

[@webgodweb]

※※※内容訂正のご案内※※※ 動画内「align-items」解説時（10:44）のスライド画像と、「align-content」解説時（12:05）のスライド画像が編集時のミスで逆のものになってしまっております。 下記より、スライド画像をまとめたpdfファイルをご覧いただけますので、こちらも併せて動画をご視聴いただけますと幸いです。大変失礼いたしました！ webgodweb.com/flexbox/flexbox.pdf レイアウト調整を簡単、簡潔にする超便利なFlexbox！ なんとなく使っている、イマイチ使い方がわからない…そんな皆さんに向けて、Flexboxを完全解説しました！ ＜目次＞ ・オープニング 0:00 ・Flexboxとは？ 0:47 ・Flexboxはどういう時に使う？ 1:50 ・Flexboxの使い方 3:20 ・Flexboxのプロパティ 4:41 ・Flexboxのプロパティ（親要素に指定するもの）のまとめ 14:48 ・Flexboxのプロパティ（子要素に指定するもの）15:57 ・エンディング 28:16 ・今回のまとめ 28:36

[@庄子功一]

flex-direction:column指定した後にjustify-contentやalign-itemsの主軸も逆になるなんて知りませんでした。 これ知らなかったら今後の勉強でどツボにハマる所でした。 とても有益な動画でした！ありがとうございます！

[@mayumisato5384]

スライド画像をまとめたPDFがとてもわかりやすくてありがたいです！！

[@webgodweb]

ご返信が遅くなりすみません💦 ご視聴ありがとうございます！お役に立てて嬉しいです😊

[@heyomar9284]

今週は土日も仕事確定なので、なつこさんの動画を見れないかもしれませんが更新楽しみにしています。毎週楽しみです！

[@webgodweb]

土日のお仕事お疲れ様です(T . T) 今週末は動画アップ出来そうにありません💦ごめんなさい😞

[@codernakano-channel]

とても理解しやすい動画でした！コーディング初心者でこちらの動画に出会えた方は幸運ですね。

[@webgodweb]

ご視聴ありがとうございます✨ 今後も初心者のみなさんにわかりやすい動画になるよう頑張ります！

[@yuyu2312ify]

分かりやすくて何度でも何度でも繰り返し視聴出来るのでありがたいです！

[@webgodweb]

コメントありがとうございます、何度も観ていただけて嬉しいです！🙇‍♀️ 着実に身についていっていると思います！！

[@daisai8365]

とってもわかりやすい！！

[@rargo-acappella]

めちゃくちゃわかりやすいです！！ あとかわいい

[@webgodweb]

ありがとうございます！！🙇‍♀️🙇‍♀️

[@kakakakaka00099]

いつもすごく参考になります。 主軸の話、勉強になりました。 grid編も待ってます！

[@webgodweb]

ご視聴、コメントありがとうございます！！ 今後の動画の参考にさせていただきます☺️

[@fworks2]

非常にわかりやすいKZbinで本当にありがとうございます

[@webgodweb]

こちらこそご視聴ありがとうございます🙇‍♀️

[@りょ-r1h]

投稿者さんが綺麗すぎて動画の内容が頭に入ってきません（）笑

[@webgodweb]

コメントありがとうございます！ 繰り返しご視聴いただけたら嬉しいです…！😂

[@daikinoshita]

知ったつもりで知らなかったこと、javascript編も含めて、なつこさんの動画で勉強しなおしています。 おまじないのように覚えさせられたことも理解できてすっきりです。 それぞれのチートシートがダウンロード出来たら幸せになれる気がしたので、ご検討いただけると幸いです。 これからも頼りにさせていただきますので、頑張ってください！ ・・・スライド画像をまとめたpdfが用意されてましたね。ありがとうございます！

[@webgodweb]

コメントありがとうございます！！ チートシート配布がわかりづらくすみません！今後別の動画でも資料ダウンロードなどしていただけるように検討してまいりますね🙇‍♀️🙇‍♀️

[@jptk6645]

ヘッダーコーディングの学習の記事で .header{ margin-top: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #333; display: flex; flex-direction: column; align-items: center; } このように書かれていて　要素が中央にきていました。　これは主軸の方向が逆になっていたということだったんですね。 justify-content は　text-align-center ; align-items:center　はvertical-align:center と覚えてしまっています。 すっと軸の向きが変わるとすんなり頭にいれるのが難しそうです。

[@yagzg3879]

よい説明でした！ありがとうございます！！

[@webgodweb]

こちらこそ、ご視聴ありがとうございます☺️

[@dokidoki_dokin-chan]

教えるのが才能ありすぎです‼︎ 美人で頭良すぎて、、 美人なのがムダに思えるくらいすごくて。 全部動画見たいです！ありがとうございます♪

[@6354-q3d]

話し方と図解がめちゃくちゃ分かりやすいです。すごい。勉強になります！

[@webgodweb]

コメントありがとうございます😊嬉しいお言葉励みになります🍀

[@whitosi]

痒いところを確認できるので、ありがたいです！チャンネル登録しました！

[@webgodweb]

ご視聴、チャンネル登録誠にありがとうございます！ 今後ともよろしくお願いいたします✨

[@kozukaeleven9040]

可愛すぎます！

[@webgodweb]

コメントありがとうございます🙇‍♀️🙇‍♀️

[@kozukaeleven9040]

@@webgodweb 7年ぶりにコーディングしてます！ 図解で分かりやすい説明と声が落ち着くのでなんか良いです♪

[@yukokubo3696]

いつもわかりやすい動画ありがとうございます。 質問です。のをフレックスボックスで並べたい場合は親要素をにして書くべきでしょうか？ classやid要素で囲って書くべきでしょうか？

[@webgodweb]

ulタグ、liタグは、並列関係にあるものをマークアップする用途で使われるのが望ましいです。 なので、Flexbox部分をどんなHTML構造にすべきかは、並べたい要素の種類によると思います。 Flexbox基準ではなく、文書構造をもとにして、使用するHTMLタグ（ulタグ、もしくはdivタグにクラス名をつけるなど）を決めてみてください！

[@泰大黒沼]

いつもありがたく拝見させていただいております！😃 操作画面とトーク画面の2画面で説明してもらえないでしょうか？

[@webgodweb]

貴重なご意見ありがとうございます！ わかりづらい構成にて失礼いたしました🙇‍♀️ 改善した動画の作成も今後検討いたします！ すべて同じ内容ではないのですが、 よく使うものだけをピックアップしたこちらの動画では操作画面を見ながら解説していますので、一旦はこちらも参考にしていただけると幸いです！ 【超入門】初心者必見！10分でわかるFlexbox講座【HTML・CSS コーディング】 kzbin.info/www/bejne/hovWp3mPm96KrZI

[@jebstrika8386]

この動画のアングルが一番可愛いです😄 カンプからのコーディングで挫折も多いですが、いつも参考にさせて頂いております。

[@webgodweb]

コメントありがとうございます🙇‍♀️🙇‍♀️ いつもご視聴ありがとうございます！！

[@nakai-tomoki]

今のところ自分に一番フィットする教材として活用させていただいています。 ドットインストールとセットで使うと理解度めちゃくちゃ上がります！！ WEBの神様にお願いです。 XDデータ・フォトショップ・イラストレーターのデザインからのコーディングを最初から解説した分かりやすい動画がなくて地味に苦戦しています。 模写コーディング実践編の様に詳細な解説動画あると助かります🙏

[@webgodweb]

リクエストありがとうございます✨デザインからのコーディングですね💡 リクエストにお応えするのに少し時間がかかるかもしれませんが、お待ちいただければ幸いです🍀

[@emiris69]

PDF活用させていただきます！

[@webgodweb]

ありがとうございます！🙇‍♀️ お役に立てば嬉しい限りです！！✨

[@carol8259]

どの動画も本当にわかりやすくて、すごいです。CSS,カナリわかるようになりました！ありがとうございます！！！

[@webgodweb]

嬉しいお言葉ありがとうございます🍀これからもよろしくお願いします😊

[@野田京介]

レイアウトを考える上で非常なプロパティだと思います。ただ単純に画像だけを並べるのならいいけど、そこにテキストで説明を加えたり、ひとつひとつの大きさが違うとどこで折り返せるようにしたりとか、かなりスキルも必要だなと苦戦しています。

[@webgodweb]

ご返信遅くなりすみません🙇‍♀️ 仰る通り、場合によってはかなり工夫が必要なレイアウトなどもあり、どこでどのようにFlexboxを使うか、を考えるのが特に難しいかもしれません。 使い続けていると、次第に慣れていろいろな活用が思い浮かぶようになってきます！倦厭しているうちは上達しにくいので、是非進んで取り入れていただければと思います🙆‍♀️

[@野村拓也-p3r]

可愛いすぎるので気をつけてください^_^ わかりやすかったです、ありがとうございます😊

[@webgodweb]

お役に立てて嬉しいです😂

[@石丸大明]

いつも学習の為に楽しく拝見しております🙇‍♂️1つ質問があります！ある講師の方にflexboxを制したらコーディングも6割近く制する事が出来るといわれました！そのコーディングにもよりますが模写などをする際に本当にある程度はflexboxでできるものでしょうか？もしそうならもっとflexboxを理解して苦手としているコーディングをよりスムーズに行けたらと思っております。よろしければアドバイス頂ければ幸いです🙇‍♂️

[@webgodweb]

ご視聴ありがとうございます！ 確かに、Webサイトは要素を整列させるようなレイアウトが基本にはなってくるので、これを簡単に扱えるFlexboxを使いこなせれば、かなりコーディングが楽になるとは思いますよ！ よろしければ、こちらの動画で最低限の使い方から覚えていただければ幸いです！ kzbin.info/www/bejne/hovWp3mPm96KrZI

[@石丸大明]

@@webgodweb さん コメント頂きありがとうございます🙇‍♂️おすすめ頂いた動画も拝見させて頂きます！☺️ちなみにwebの神様のなつこさんの動画でremや%の単位の動画などはございますか？？こちらの方もある課題で理解せねばいかずなつこさんの動画が分かりやすいのでインプットして課題でアウトプットを考えているのでが、、😓重ね重ねすいません。🙇‍♂️

[@ken2470]

flexはややこしかったのですが、とても勉強になりました。ありがとうございます。スライド画像は分かりやすいです。これはフォトショップやイラストレーターで作っているのですか？

[@webgodweb]

ご視聴ありがとうございます！ お役に立ててよかったです！✨ はい、スライド画像はすべてAdobeのIllustratorで作成しています！

[@chocomint694]

inline-blockのときは、display= inline-flexですか？？😮

[@webgodweb]

おっしゃる通りです！！

[@ramirami-dy3fc]

もしかしてalign-itemsとalign-contentの場面の順番が、間違っていません？

[@webgodweb]

ご指摘ありがとうございます。編集上のミスで、仰る部分のスライド画像が反対になっておりました…。 概要欄に訂正の案内と、スライド画像をまとめたデータを掲載させていただきました。こちらにて動画内容を再度確認していただければ幸いです。 webgodweb.com/flexbox/flexbox.pdf 混乱を招いてしまい大変失礼いたしました！

[@ramirami-dy3fc]

@@webgodweb ありがとうございます✨

[@yotchayotcha]

質問失礼します。 display:block、inline、flexの3つの違いってどうイメージすると良いですか？

[@アンサーソフト]

私が思考ストップした所は １．FlexBoxを使ったページのサンプルイメージが欲しかった ２．display:fleex;のブロック要素とは？ ３．display:inline-flex;のインライン要素とは？ ブロック要素とは、インライン要素とは、何だったかなと 頭の中で、忘れたなぁ。この次辺りで説明があるかと思うと 先に解説が進んで、落ちこぼれてしまいましたよ。残念 全体的には、良く勉強されて、まとまっていると思います。 ユーデミーの大学講師になれますね。

[@casettejp]

90年代のインターネットビッグバンの時代は、休日はいつも秋葉原を徘徊し、自宅で固定IPアドレス取得した自作PCにDNSサーバー、WEBサーバー、メールサーバーを立てて、名刺サイズの動画ストリーミング実験などを趣味（いわゆるヲタク）でやっていました。まだユーチューブすら無かった時代でした。その後、レンタルサーバーや各種ネット上のサービスで何でも済ませられる時代になり、2000年以降はパソコンヲタクもやめてしまいました。ここ数年、本業の仕事も定年退職となり、浦島太郎の様にジジイになった今、ウェブ関連の知識を取り戻し、更には格段に進化した言語を学び直してみたくなり、ユーチューブで学習動画を見まくっています。私の様な「元ヲタ」が若い人から動画で教えて頂けて、しかも完全無料とは感謝しか有りません。ありがとうございます。（追記）プログラミングを学習し直しているのは自前でネットショップを作りたくなったからです。今はショップを作るサービスはいくらでも有りますが、必ず販売手数料を取られます。自前で作れば出店料や販売手数料を取られずに利益を残せます。最近流行りのマイニングをする代わりにネットショップでコツコツ稼ぐべく、昔の知識を磨き直して活かそうとしています。

[@webgodweb]

コメントありがとうございます！恐れ多いです。 少し目を離した隙に目まぐるしく状況が変わって、新しい情報・技術が次から次へと流れ込んでくるのがWebの面白いところだと私も思います。今後ともご視聴いただければ嬉しい限りです！

[@casettejp]

@@webgodweb 女神様の動画で現代プログラミングを勉強させて頂きます。

[@ささき-c2p]

アラインアイテムズとアラインコンテントの図がが逆になってますね。

[@kagomekagome807]

動画のalign-itemsとalign-contentの表示が逆になってませんか？

[@webgodweb]

はい、編集ミスがあり申し訳ございません。。。 概要欄から正しいスライド資料をPDFにて配布しておりますので、こちらもご参考にしていただけると幸いです🙇‍♀️

[@kagomekagome807]

@@webgodweb ご丁寧にご回答ありがとうございます^_^ 今後もがんばってください♪

[@kazu9827]

わかりやすい😭😭😭😭

[@webgodweb]

ご視聴ありがとうございます😊これからもよろしくおねがいします🍀

[@kawa9462]

Flexboxでつまずいています。サイトのMENUボタンに使う物でしょうか。 主軸が右並びでも左並びでも数字で記入されていなければどっちが主軸か分からない気がするのは初心者だからなのでしょうか。

[@webgodweb]

Flexboxは、要素の横並びなどが簡単で、レスポンシブ対応なども楽になる便利機能です！メニューだけでなく、要素を並べるときにはよく活用します。 主軸の方向は必ずデフォルトがあるので、今どんなプロパティが指定されているかを調べたりすれば、予想がつくようにもなります🙏

[@user-wz9lf9jv4p]

わかりやすい説明とても助かります！ありがとうございます！！ 例えばブログでモバイル画面時にヘッダー上部の"画像のみ"を縮小して全体を見えるようにすることは可能でしょうか？？ ブログタイトルを画像自体に書いているため、画像ごと縮小する方法を模索中です…

[@webgodweb]

ご返信が遅くなりすみません！ 恐縮ですが、状況をもう少し具体的に教えていただけると助かります🙇‍♀️ img要素を画面幅に応じてサイズ変更したい、ということでしょうか…？

[@ミラ-u4i]

いつも見させていただいてます。 ちょっと質問なんですが、FLEXBOXはとても便利な機能だと思いますが 最初のうちはFLEXBOXなしでもできるようになってから、使用した方がいいのでしょうか？

[@webgodweb]

ご視聴ありがとうございます！ はい、仰る通りです。比較的新しい機能なので、Flexboxを使っていないレイアウトのサイトの方がまだまだ多いのが現状かと思います。 そういったサイトを改修したりするときに、どうしてもFlexboxの構造には後から変えられない、あるいは変える必要が無いこともあり得るので、まずオーソドックスなやり方を身に付けていただくのは必須かと思います🙇‍♀️

[@yoheikawamura8599]

これ・・・無料でいいんですか！？　他のサービスでお金出して買った内容より充実してます！😂笑

[@webgodweb]

時間をかけて制作したので、そう言って頂けると嬉しい限りです🙇‍♀️今後ともみなさまのお役に立てるように頑張ります！

[@貧乏脱出したい]

めちゃわかりやすかった。この子と仕事したいがために応募する人多そう＾＾

[@webgodweb]

コメントありがとうございます😊弊社はフラットな関係でいながら、笑いの絶えない仕事場ですが、スピード感や求められる資質等の要件が高いので、Webを極めようと熱い想いをもった方のご応募が多めです✨

[@Mi-yv5sr]

floutのほうがかんたんにかんじてまうくらいむずい

[@webgodweb]

おっしゃる通り、最初習得するときには少しパワーがいると思います🥲 ただ、floatの使い方によっては、あとあとサイトの構造を変えたり、メンテナンスしていったりするときに苦労することがあります。。その点、Flexboxは、内側に封じ込めてつくるぶん、レイアウト変更や並び替えなどが簡単だなと思います🙏

[@kiyoshin8163]

displayの講座でもそうでしたが、この講座も編集ミスが残念過ぎます。台本は素晴らしく理解しやすいと思うのですが、編集がグチャグチャで本当に台無しかと。youtubeって撮り直し、或いは編集し直しは大変なんでしょうか。。。

[@webgodweb]

貴重なご意見ありがとうございます。編集ミスで混乱させてしまい誠に申し訳ございません。 動画の差し替えができないKZbinの仕様上、こちらの動画は概要欄で正しい資料を配布の上、そのまま公開させていただいております🙇‍♀️ 最近の動画では複数人チェックの上、情報のミスがないように徹底しております。学習に活用いただけるコンテンツづくりにこれからも尽力しますので、今後ともご視聴いただければ幸いです🙇‍♀️

[@kiyoshin8163]

youtubeでは仕様上、動画の差し替えができないんですね。残念です。いつでも何回でも見直して頭に刻みつけたいコンテンツだと思うのですが、話の筋が途中通らずストレスが溜まり、再び見る気にならないんです。でも、最近このチャンネルを見始めて、最初の方から少しずつフォローさせて頂いているところであり、まだまだこれからも追っていきます。楽しみにしてます。

[@江戸川-m5q]

サイコ―！(^^)/

[@webgodweb]

ご視聴ありがとうございます🍀そう言っていただけると嬉しいです😃

[@辺境チャンネル]

ごめんなさい、、タイプです

[@webgodweb]

ありがとうございます？！😂

[@hennnyu.channel]

いつも動画ありがとうございます。 お願いがあります。 出来るだけ難しい単語を使わないで説明していただけないでしょうか？ もっと簡単に説明してほしいです。 すみません。お願いします。

[@hennnyu.channel]

本当に初心者向けなのであれば、初心者の人は途中で見るのをやめてしまうと思います。

[@webgodweb]

貴重なご意見ありがとうございます。今後の参考にさせていただきます。 Flexboxについては、公式のリファレンスの概念自体も難しく、これ以上噛み砕くと余計に分かりづらくなってしまうと考えたので、難しい単語・概念についてはそのまま動画内でも使用させていただきました。 もし宜しければ、軸の概念などのややこしい部分を理解しなくても良いように、さらに初心者向けのFlexboxの使い方動画をアップしておりますので、こちらからご覧いただければ幸いです。 kzbin.info/www/bejne/hovWp3mPm96KrZI 初めはこちらの動画の内容のような程度で、多少使い方に慣れていただいてからの方が、概念が難しい部分も直感的に分かりやすくなるかと思います。

[@hennnyu.channel]

@@webgodweb ありがとうございます😊

[@tatsuyanishikawa9982]

なんで実際にコード書いて解説してくれないんだ。理解しにくい。。。 いつもわかりやすいのに。動画見終わってなるほどってならない。

[@tatsuyanishikawa9982]

この動画の後に下記のリンク先の動画見るとわかりやすいです。 kzbin.info/www/bejne/fIaXg6KZjsSMZ80

[@webgodweb]

コメントありがとうございます。 ご期待に添えず申し訳ありません！Flexboxは高機能でいろいろとややこしいので、動きが頭の中でイメージができるようになってから、自分でコードを書いて試しながら学習してもらえればと思います。 頂いたご意見は今後の参考にさせていただきます🙇‍♀️