【CSS #6】基礎からちゃんと学ぶ CSS 入門！フレックスボックス (flexbox) の使い方をゲームで学ぼう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

[@shimabu_it]

「この内容はマスターしたぜ」とか「ここが難しかった」など、コメント欄で皆さんの習得状況・レベルを教えていただけると動画制作の参考になります。ぜひコメントで教えてください🙏 また応援のコメントにもとても励まされております！コメントはすべてしっかり見ています！いつもありがとう〜😂 そしてご質問・ご相談も受け付けております！動画の内容に関係なくてもOKなのでお気軽にどうぞ！😊

[@nayhkg1]

本当に分かりやすいです。全部制覇する勢いで見させていただいております。 ローカル環境構築講座お願いします。色々なサイトで言われたままにクリックしたら使えるようにはなったんですけど、どうしてできるようになったかあまり理解できていません。次同じことをする自信もありません。構築手順とともにWHYを含めて、教えて頂けないでしょうか。 また、ローカルから一般公開？までのイメージもWHYを含めていただいたらもっと嬉しいです。

[@ディーちゃんロハンくん]

/* justify-content */ flex-start: アイテムはコンテナーの左側に並びます。 flex-end: アイテムはコンテナーの右側に並びます。 center: アイテムはコンテナーの中央に並びます。 space-between: アイテムはその間に等しい間隔を空けて表示されます。 space-around: アイテムはその周囲に等しい間隔を空けて表示されます。 /* align-items */ flex-start: アイテムはコンテナーの上部に並びます。 flex-end: アイテムはコンテナーの下部に並びます。 center: アイテムはコンテナーの垂直方向中央に並びます。 baseline: アイテムはコンテナーのベースラインに表示されます。 stretch: アイテムはコンテナーの大きさに合うよう広がります。 /* flex-direction */ row: アイテムは文章と同じ方向に配置されます。 row-reverse: アイテムは文章と逆の方向に配置されます。 column: アイテムは上から下に向かって配置されます。 column-reverse: アイテムは下から上に向かって配置されます。 /* 個別に順序を指定 */ order: /* 個別にalign-itemの値で変更 */ align-self: /* flex-wrap */ nowrap: 全てのアイテムは、ひとつの行にフィットします。 wrap: アイテムは他の行へ折り返します。 wrap-reverse: アイテムは逆順になって他の行へ折り返します。 /* flex-directionとflex-wrapを統合するショートハンドプロパティー */ flex-flow: /* align-content */ flex-start: 行はコンテナーの上側に詰められます。 flex-end: 行はコンテナーの下側に詰められます。 center: 行はコンテナーの中央に詰められます。 space-between: 行はその間に等しい間隔を空けて表示されます。 space-around: 行はその周囲に等しい間隔を空けて表示されます。 stretch: 行はコンテナーに合うよう引き延ばされます。

[@ネメガ-e5t]

ゲーム実況史上最もためになる動画。

[@だいち-s2y]

とてもわかりやすかったです。 HTMLやCSSを勉強し始めて、はや3週間 progateや書籍等で上記の2つを学んでいましたが、 読むことが中心で理解が不十分でした。 こちらのゲームを紹介していただき、理解が深まりました。 さらに、わかりやすい解説と使い方のおかげで、FlexBoxの苦手意識が払拭できました。 ありがとうございます。 体調を崩さずに、今後も応援しています。

[@lindbergsblue0211]

flexboxをちょうど勉強してたので、興味をもってみることができました。ありがとうございます。わかりやすく、親しみが持てるので、しまぶーさんの動画を一通り観ようとおもってます。

[@石塚健太郎-r1t]

HTMLとCSSをこの動画でやりこんで未経験でしたが案件ゲットできました！ ありがとうございます！

[@ディーちゃんロハンくん]

わー、すごいですね！ わたしも勉強中なので、そーいう話を聞くと勇気が湧いてきます！！ 案件探しはココナラですか？

[@マスタぜろ]

@@ディーちゃんロハンくん 無視されてて草

[@ディーちゃんロハンくん]

@@マスタぜろ ありがとう(*'▽')

[@hwialh5914]

色々な動画を見ましたが、1番分かりやすかったです😍早速やってみます！！ありがとうございます✨

[@ricoco57]

初心者の私にピッタリのゲームを紹介していただきありがとうございます。😊

[@宇井広紳]

ゲームで理解できるので楽しいですね。１回では覚えられないので、何回もやってみます。

[@yooosuke0124]

ちょっと待ってください、、、 賢すぎませんか？？？ flexboxの色んな記事や動画を見てきましたが、ゲームで覚えるというアプローチは凄すぎます。 これからも動画楽しみにしています！！！！

[@shimabu_it]

これ作った人は賢すぎますね、ゲームは偉大です！笑 はい、また新しくこういうのを見つけたら紹介したいと思うので、ぜひぜひお楽しみに！

[@濱田幸一-i6g]

非常に勉強になります。 現在フリーランスで独立を目指してHTMLとCSSを学び始めました。 今後はプログラミングも学んでHPの作成をまずはできるようになりたいと思っております。 非常にわかりやすい動画なので、これからも配信お願いします！！

[@takumukageyama7107]

本当に勉強になりました！ フレックスボックスは本当に分からなくて困っていたので助かりましたー！

[@桂小太郎-x4s]

うげーー最終問題むずかしーー

[@ラブリーかりん]

緑のカエル🐸が可愛い❤️

[@ゆずのすけ-u4k]

どうして伸びないんだろうってくらい神動画で毎回助かります！今回も動画アップありがとうございました

[@shimabu_it]

大器晩成型なのでこれから伸びる！！・・・はず？笑 またコメントをくださってありがとうございます！やる気になります💪

[@sannoa9954]

わかりやすすぎる！ ドットインストールで意味わからなくて頭抱えてたのに この動画であっさり解決です。 ありがとうございます！！

[@宮岡良輔-k6o]

とてもわかりやすかったです。reverseで軸が変わった時は、少しややこしくなりますね。見直します。

[@biobibio]

自分でやりつつ、動画で復習しました。　なんとなくの理解を最強に分かりやすくしてくれて、すごく助かりました・・・！！！

[@shimabu_it]

この🐸は正直Flexboxを理解するのに最強です！笑

[@えむ-s1s]

つい最近HTMLの動画を見て以来、ありがたくここまで拝聴させて頂いております。 どの動画よりもわかりやすく有益だと思います😌他の動画での勉強をしなくなりました。 今後とも配信のほどよろしくお願いいたします。

[@chinchilla3538]

とても楽しく学ぶことができました。最後の問題は難しかったです。

[@shimabu_it]

最後は難しいですよねー急に難易度が上がるので、その前にあと2つぐらいクッションが欲しいような気もします(^O^;)笑 ただゲームで学ぶのはやっぱり頭の体操にもなるし最高ですよね😆

[@becky_chocho]

面白いゲームを紹介していただいてありがとうございます！ 今日ドットインストールでFlexbox篇習って、さっそくゲームやったら、クリアした。自信つきました！ありがとう！

[@あきらいふ]

とても分かりやすく、書籍を読むよりスッと頭に入って入ってきます。 ウェブを勉強中ということもあり、チャンネル登録させていただきました。 初心者の方にはとくにオススメしたい動画、ゲームです。

[@shimabu_it]

このゲームめちゃくちゃおもしろいですよね！こういうゲーム×勉強はめちゃくちゃ需要がある分野なので、もっと増えてほしいなーと思っています😊

[@あきら-m4c]

ちょうどflexboxの学習中で、難しくて悩んでいたのですが、こちらの動画でかなり理解が進みました。正直Progateとかより分かりやすかったと思います。 お金払っても良いレベルの動画でした。ありがとうございました。

[@shimabu_it]

お金を払っても良いレベル、最高のほめ言葉では・・・😳 そう言ってくださって嬉しいです！ 今後もたくさん講座を充実させていきますね👍

[@furutei920]

今UPされている動画でどれをとっても　しまぶーさんが一番わかりやすい。

[@JUNHARA2]

教材のセンスとレベルが凄すぎます！

[@user-ts4ce8if4u]

とても勉強になりました。何度も見返して理解していきます。

[@shimabu_it]

ありがとうございます。 ゲーム形式だと分かりやすいですよね😊

[@佐々木愛-c8z]

flex-boxは他のサイトをマネして対応していて（このプロパティ効いてないんやけど作った人もよくわからず無理やりコーディングしてるな。。。）と思っていました。今回かわいいカエルがぴょんぴょん跳ねるのを見ながらたくさんプロパティとプロパティ値を自分で書いて、苦手意識が減りました。（あ〜、昨日仕事で修正指示が出たボタン並んでるところの中身、flex-box使わなあかんな。。。）と気が重かったんですが、ウキウキflex-boxいっぱい書きたくなりました。ありがとうございました🥰

[@吉田晃崇]

ドットインストールで急にフレックスボックスが出てきてなんじゃこれとなっていてのですごく助かりました 早くマスターして模写頑張ります！！

[@norim.2842]

ドットインストールでの悩みが解けた！ 神動画💫💫

[@shimabu_it]

おおーそう言ってくださって嬉しいですー！！今後もドットインストールで分からない部分があれば補完するのに使ってみてくださいね✌

[@みい-b2m]

これを一緒にやってflex-boxがようやく理解できましたー！ありがとうございます😊

[@okinu4044]

この動画すごくわかりやすかったです。

[@shimabu_it]

実は分かりやすいのは私ではなくFLEXBOX FROGGYでは・・・！？🤔笑

[@takuyanemoto7186]

とてもわかりやすくて感動しました！この動画に会えて良かったです！

[@慶太荒川-q6v]

HTML、CSSと内容が非常に分かりやすくて一気に見てしまいました！ 次はしまぶーさんもオススメしていたJavaScriptを何回かに分けて解説して頂きたいです！

[@shimabu_it]

うおぉ、一気にご視聴嬉しいです！ありがとうございます！CSS基礎は先日出した7回目で終わりました！次はJavaScriptとCSS実践を同時にやっていくので、そちらもお楽しみに！😙

[@tavernitysonw]

すごい！！ どれだけやったらこんなに 自由自在に扱えるのか😂 積み重ねるしかないよなー😅 次の動画も楽しみにしてます！！

[@shimabu_it]

ありがとうございます！こればかりは慣れですね〜！ 実践でも何度か書いていると自然と身につきます☺️

[@黄鼻]

講座が全て分かりやすいです。フロントエンド脱初心者用ロードマップ作ってください。

[@堀田真衣]

初心者です。とても分かりやすかったです。ありがとうございます！column使って逆転した時が難しかったです。引き続き勉強頑張ります!

[@hirokina601]

分かりやすかったです！！！

[@shimabu_it]

ありがとうございます！ 分かりやすいのは🐸かもしれませんが！😂笑

[@yum4415]

本当に分かりやすくて聞きやすくてかつ学びになるっていう最高動画有り難いです🙏✨

[@RYO-sk9lx]

flex boxを覚えていく上で最高のサービスです！ プロパティと値が複数あり一度では覚えれませんが、 このゲーム感覚としまぶーさんのチュートリアルがあることで復習すれば必ずマスターできそうです！

[@松尾卓-g3s]

いつも凄いわかりやすい‼️ 感謝しています。ありがとうございます‼️

[@陳嘉翔-y5w]

一気にHTML口座からここまで見ました！ ゲームの実況を見ているように、一緒に考えながらしまぶーさんの解説を聞きました。カエルも可愛くて、ゲームを通じてぜんぜん集中力は落ちないです！こんな教え方好きです！ 「カエルが非常に窮屈で並んでいるので、早めに助けに行きましょう」←外国人特有のツボかもしれないが、ここは笑いました

[@shimabu_it]

おおーたくさん見てくださってありがとうございます！ ゲーム実況（笑）昔はゲーム実況をしていたので、そのときの経験が活きたのかもしれません！(^O^) こういうゲームで学べる教材がたくさんあると良いなーと思います！

[@まい-k8u]

楽しく勉強することができました！ 初めてflexboxを理解できた気がします プロパティのヒントが出るので分かりやすいのもいいですね

[@yukarim4303]

すごくわかりやすかったです。ゲームだと楽しい。面白い。

[@morita821]

しまぶーさんの動画いつも拝見させていただいております。 最近プログラミングを学び始めたので、ものすごく助かっています。 flexboxをゲームをしながら学べるので控えめに言って神すぎます！！ しまぶーさんの実際のコーディングをしている動画も見てみたいです。 突然のリクエストですいません。 検討の方お願いします。

[@こーひーふらっしゅ]

最終問題だけ少し手こずりましたがクリアできました！直感的にflexboxが学べていいですね。今までfloatを使ってページを作っていたのですがこれを機にflexboxを使ってみたいと思います😀

[@秋本裕之]

やっぱり覚えることいっぱいですね！ だけど、楽しいです！ Swift Play groundsみたいでいいですね！ 楽しく遊ばせてもらいます。

[@shimabu_it]

Swift Playgrounds、やったことないけど楽しそうなので時間があるときにやりたい・・・！ こういうゲーム形式で学べるのって重要ですよね！もっと増えていってほしい！

[@makisaito5997]

flexboxでかなりつまずいてしまっているので本当にありがたいです！

[@void2extern189]

ありがとう！Up主さん。Lv 15/24まで見た。19まで見た。CSSは底が深くて見えなくて、怖いと思ってたが、意外と浅いかも、と思える様になって来た。 やあっと、全部見た。ふぅー。

[@Joy-of-the-Lord]

楽しく学べていいですね！うろ覚えなので、復習のため、２回目トライしようとしたところ、前回の自分の回答がすでに全ての問題に記憶されていて、ゲームにならないです。Cookieを削除して、local storageも何もないことをチェックしても解決できず。。。何をしたら、自分の前回の回答がリセットされるのか、初心者すぎてわかりませんでした。。。

[@syunsuke]

flex-directionやflex-wrapのreverseが次々出てくると縦軸と横軸がごっちゃになってしまう;-; しかしゲーム感覚でとても楽しめました！

[@slaimu071201]

◎第6回Flexbox ★蛙を蓮の葉っぱにのせるゲーム★ リファレンスに書かれてる、flexbox の概念は難しい。 ●justify content 横方向に動かせる ・flex-end ・center ・around-space ・space-between ●align-item 縦方向に動かせる ☆斜めに動かせる→真ん中に配置 　*justify-content:center; *align-iten:center; ●fldx-direction ・row-reverse ・column ※row-reverseの後の、flex-endは 　逆向きに動く

[@フグ-v1w]

今までfloatでやってたので、配置に苦戦してました…。 めちゃめちゃわかりやすかったです！ まだ慣れないけど…

[@shimabu_it]

floatはもう現場で使うことはほぼ無いですねー ぜひflexで慣れちゃってください！

[@mika5678]

ようやく最近模写にも慣れてきて、flexboxも使いこなせるようになりたいと思ったので、しまぶーさんの動画があって本当に助かりました！😭🙇‍♀️もしお時間あれば教えて頂きたいのですが、(文にすると分かりにくくてすみません😓)親要素の中に子要素が3つあり、1番目と3番目を縦に左側に、2番目を右側に配置したいのですが、flexboxで可能でしょうか？？色々試したのですが分からず、、結局floatを使ったのですが、もし可能でしたら教えて頂きたいです🙇‍♀️🙇‍♀️よろしくお願いします🙇‍♀️！

[@FairyPitta816]

ドットインストールで「？」となったのですが、理解が深まりました。ありがとうございます！

[@28web44]

職業訓練校がフロートゴリ押しだったので知識をアプデします。助かりました。

[@luvluvmac]

Level 24最終問題で手こずりましたが解けました。

[@かなで-k6t]

後半のカエル🐸の窮屈さにジワるwww 個人的な疑問なんですが、今後勉強していく上でfloatは概念くらいまで覚えて、後はflexboxとかgridシステムを勉強していった方がより実践的でしょうか？

[@shimabu_it]

🐸の押し込められ具合・・・笑 floatの話はちょうど本日Twitterでやり取りが発生したので、そちらのリンクを張りますね。 twitter.com/shimabu_it/status/1261871767506677761 私が知っている限りではfloatは動画の回り込みだけでレイアウト用途では不要と思っています。基本はflexboxとgridですね！

[@かなで-k6t]

しまぶーのIT大学 返信ありがとうございます😊　今後の学習の参考にさせて頂きます❗️

[@hakaseschannelvct5652]

24が難しかった。 23までは何とか手探りでやれる難易度だったから難しく感じた。

[@板垣玲偉-i9t]

いつも楽しく拝見させていただいてます！ 質問なのですが、現在大学4年生で来年からSIer企業への就職を目指しています。コロナで時間がある今のうちからプログラミングの勉強をしようと思いProgateやドットインストールに登録しました。SIerならばどの言語を習得するべきでしょうか

[@yutai.1937]

とってもわかりやすいです。 ありがとうございます！ こんなイケメンが「カエル🐸カエル🐸カエル🐸」言ってるのが なんだかおもしろかったです笑

[@shimabu_it]

ありがとうございますー！ たしかに🐸ってめっちゃ言ってますよね、この動画の私(^O^;)笑 Flexboxはめちゃくちゃ実践でも使うのでぜひマスターしてください✌️✨

[@mii5626]

Lv.17、自分でやった時は order: 3; にしていました。 「3マス右へ動かすから3」と思ったけれど、1でいいのですね！なぜ？？

[@yuk8353]

最近、コーディングをはじめたばかりですが、とってもわかりやすくて重宝してます！毎日、基礎動画をドライヤーするときにイヤホンして、みるのが楽しみです＾＾これからも応援してます☆カエルめちゃわかりやすくて職場で自慢しました笑

[@あたま-y6r]

こんばんは！チャンネル登録して、いつも楽しく動画を拝見しています。 動画内容と関係ない質問で恐縮なんですが、私は競技プログラミングでアルゴリズムを考えることが楽しいと感じて、エンジニアを目指し始めたのですが、アルゴリズムの考案、改良を行うような業務を行うエンジニアになるためには何のエンジニアになれば良いのでしょうか？

[@shimabu_it]

動画と関係ない質問も大歓迎ですよ！質問ありがとうございます！ なるほどー、ただぶっちゃけ私が競プロ勢ではなく周りにもいないので的確なアドバイスはできないですね。正直、何のエンジニアがいいのか私には分かりませんが、競プロが得意な方はどのエンジニアにもなれそうな気がします。競プロ勢は論理的思考力・問題解決力が高いと感じていてどういう領域だろうが自分で解決できる気がします。 アルゴリズムで言うと、ゲームの物理エンジンの開発では使いそうですね。あとは大規模なデータをいかに効率的に処理するか、それこそヤフーとかたくさんデータを持っているような企業であれば、そういった仕事はありそうな気がします。 より具体的なアドバイスができなくてごめんよー🙏

[@あたま-y6r]

しまぶーのIT大学 質問に答えていただき、ありがとうございます！ まだはっきりとは見えてきませんが、いろいろインターン受けて見ながら、自分の道を見つけていこうと思います。これからも動画を楽しみに応援しています！

[@mshun0929]

しまぶーさんと同じタイピングスピードで打てるように毎日やります がんばれ俺…

[@ポムニ]

楽しく学べますね＾＾♡しかもしまぶーさんの解説が本当にわかりやすい（涙） 感謝です。ありがとうございます(*´ω｀*)！ レベル19のカエルには思わず笑ってしまいました笑 これからも素敵なコンテンツ、楽しみにしております(__)♡！

[@shimabu_it]

コメントありがとうございます！ いろいろ褒めていただいて嬉しい限りです😆 このゲームの🐸はかわいいですよね笑 個人的には最後のエンディングが好きです笑 はい、今後もためになる動画を出していきますね！

[@maamamamama4842]

リンクから飛んでもコードを打つところがなくて全画面がカエルと池と葉っぱの絵になっていて何回入っても同じ状態なんですが助けてください。ゲームが始められません。

[@shimabu_it]

おや・・・その状況は聞いたことがないですね。 スマートフォンでやってたりしますか？ PCの場合はブラウザを教えていただきたいです。

[@maamamamama4842]

@@shimabu_it 返信ありがとうございます。MacOs Mojave バージョン10.14.6です。

[@prabu2778]

Do in English? What language you use for front End and Back end in web development.

[@shimabu_it]

I use React with TypeScript for frontend and Node.js for backend. 😆

[@prabu2778]

@@shimabu_it No HTML and CSS?

[@shimabu_it]

Yes. HTML and CSS are no longer needed. I markup with JSX(React).

[@prabu2778]

@@shimabu_it sorry for Asking many questions sir . Where did you learn all these things? From college?

[@shimabu_it]

​@@prabu2778 No problem.😊 I learned from video. There are many video learning now. In Japan, video learning called "Dotinstall" and "Progate" are famous and I use "Dotinstall".

[@ディーちゃんロハンくん]

レベル24が難しかったです(≧◇≦) 実際の現場でもレベル24ぐらいのレイアウトは求められることは多いですか？

[@taishishinoda7176]

webデザイナーとフロントエンドエンジニアの違いが微妙です。 どなたか教えていただけな気でしょうか。

[@コレコレ-y1e]

デザイナーはデザイン、コーディングができる人はhtml,cssでサイトやwebアプリの側をつくります。フロントエンジニアは側だけでなく、中の処理をjsを使って処理のコーディングを行います。もちろんフロントエンジニアもhtml,cssも書きます。 こんな感じの印象ですね

[@shimabu_it]

コレコレさんの認識であっています！代わりに説明ありがとうございます！😊 フロントエンジニアもhtml, cssは書きますが、ReactやVue使ったりと、JavaScriptに深く精通している必要があります！

[@hirotatakashi6736]

10年以上ぶりにWEBを思い出して再勉強してます。flexboxって便利ですね。floatを使った時は、バグが出やすく大変でした。しまぶーさんのIT大学最初から見てます。勉強になります。そして年齢関係なく楽しく学べるのは、本当に感謝です。これからも応援しています。ありがとうございます(^▽^)

[@anuk9013]

問題が発生し再生ができないと表示されてしまいますなく😢

[@高本-x9d]

最終問題がクリアできませんでした。。。wrap-reverseを忘れてたああああ( ;∀;)

[@shimabu_it]

wrap-reverseはめったに使わないプロパティなので忘れるのはあるあるです（笑）

[@hiro-cx9zi]

最後の問題自力で出来るかなと思ったけど無理だった、、、

[@colorsdrip-kenta]

いつも動画みてます。 最後のレベルが全く理解できなかったです。。

[@shimabu_it]

最後のレベルはかなり難しいですね。最後のレベルのようなレイアウトを組むことはまず無いので、その以前まで理解できていたらとりあえずはOKです！👍

[@colorsdrip-kenta]

@@shimabu_it 返信ありがとうございます。引き続きしまぶーさんの動画みながら頑張ります👍

[@りんりん-j6h]

髪切りましたね＾＾

[@shimabu_it]

バレましたか・・・！ ちょっと幼くなりすぎちゃいました😂笑

[@bobkazuko.0264]

「そもそもFlexboxとは？」という説明を最初に入れて欲しいです...

[@PP-gx8xt]

フレックスディレクション(笑) ディレクションってなんだよ(笑) ダイレクションだろ(笑) プログラミングの前に英語勉強しなさい

[@Leo-en8wh]

Direction はアメリカ英語ではディレクションですよ。揚げ足取ろうとする前に貴方こそ勉強すべきでは。

[@PP-gx8xt]

Not talking to you Mind your own business, boy

[@Leo-en8wh]

@@PP-gx8xt lmao

[@ぽぴ-o8y]

@@PP-gx8xt 何言ってんだおまえ 非を認めろよガキか

[@mshun0929]

しまぶーさんと同じタイピングスピードで打てるように毎日やります がんばれ俺…