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

@nayhkg1

3 жыл бұрын

本当に分かりやすいです。全部制覇する勢いで見させていただいております。 ローカル環境構築講座お願いします。色々なサイトで言われたままにクリックしたら使えるようにはなったんですけど、どうしてできるようになったかあまり理解できていません。次同じことをする自信もありません。構築手順とともに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: 行はコンテナーに合うよう引き延ばされます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

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

@user-mm4we4pt2b

4 жыл бұрын

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

@user-sq4fj9jl1w

3 жыл бұрын

@@user-mm4we4pt2b 無視されてて草

@user-mm4we4pt2b

3 жыл бұрын

@@user-sq4fj9jl1w ありがとう(*'▽')

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

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

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

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

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

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

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

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

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

@shimabu_it

4 жыл бұрын

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

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

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

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

@shimabu_it

4 жыл бұрын

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

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

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

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

@shimabu_it

4 жыл бұрын

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

@user-gh9xp1cr6r

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

@user-ey4iu7rv3v

4 жыл бұрын

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

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

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

◎第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は 　逆向きに動く

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

@user-ib2tv4en2f

4 жыл бұрын

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

@shimabu_it

4 жыл бұрын

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

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

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

@shimabu_it

4 жыл бұрын

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

@maamamamama4842

4 жыл бұрын

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

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

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

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

@shimabu_it

4 жыл бұрын

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

@prabu2778

4 жыл бұрын

@@shimabu_it No HTML and CSS?

@shimabu_it

4 жыл бұрын

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

@prabu2778

4 жыл бұрын

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

@shimabu_it

4 жыл бұрын

​@@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".

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

@shimabu_it

4 жыл бұрын

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

髪切りましたね＾＾

@shimabu_it

4 жыл бұрын

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

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

@shimabu_it

4 жыл бұрын

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

@colorsdrip-kenta

4 жыл бұрын

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

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

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

@Leo-en8wh

3 жыл бұрын

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

@PP-gx8xt

3 жыл бұрын

Not talking to you Mind your own business, boy

@Leo-en8wh

2 жыл бұрын

@@PP-gx8xt lmao

@user-oc5lv9lk4w

2 жыл бұрын

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

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