Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
CSS Gridのエリアを使ったレイアウトが画期的なので布教したいです。積極的に使ってみてくださいね😆今回のコードはこちら 👉 github.com/lightsound/html-css-class/tree/master/002b_%20HolyGrail-grid前回の講座がまだの方はこちら 👉 ruclips.net/video/XrFD_0Pr6Nc/видео.html
IEがサポート外になるまでは使わないことにしてます
その判断もGoodです！👍👍
プログラミングの勉強を始めて２ヶ月、超ド級の初心者です🔰割りと早い段階でしまぶーさんのIT大学に辿り着いたのですが、自身の教材を見てて『うぅ、もう駄目だ…😫』となる度にチャンネルを訪れています。そして『大丈夫、ちゃんと理解出来てるよ』と自分を励ましています。分かりやすく解説しようとして下さるしまぶーさんの努力は、（私みたいな）諦め癖がすぐ顔を出す人達の背中を目に見えない形で力強く押してくれています。感謝しかありません。
Thanks!
気づいておりませんでした、、、ありがとうございます！🥺🙏
新参のWEBデザイナー志望者です。今までflex boxでの要素の配置やプロパティを変更していましたが、これ一括で設定できるのは革命的ですね！活用させていただきます！
シリーズ通して見てます。こんなにコンパクトにまとまって体系的な情報を無料で公開するとかイケメンすぎて興奮する。GOOD100万回押したい。
めっちゃわかりやすい
ものすごく助かりました！！感謝でいっぱいです。🎉
今回もタメになる動画をありがとうございます！いつも本当にわかりやすくて絶対今1番のIT系RUclipsrだと思います！今後も有意義な動画よろしくお願いします！
FLEX BOXでアタマパンクしていたので、マジ助かりました・・・神動画ですね
しまぶーさん、いつも動画楽しみにしています！先日flexboxを使った友人の使う簡単な実用サイトをつくりまして、やっとhtml/cssの入門編が終了しました笑今回の内容はサイト作成をしている際にflexboxだとごちゃごちゃになって力技でやっていたところや自分の今作業している部分を探すのに一苦労するようなことが解消されると思いました、非常に効率的です！百聞は一見に如かずともいうので早速今日から実践していきます！また、現在職業訓練に通いweb制作会社への就職を考えており、プログラミングに対しての苦手意識を自分から消し去ってくれたしまぶーさんには本当に感謝しております！是非これからもお体に気をつけてお仕事や動画の更新を頑張ってください！
おおー！！実践されたのは非常に良いですね。１番の学びになるかと思います。やっぱり基礎をどんだけ身につけてもアウトプットしないと分からないこともあるので、それを経験できたのは大きいかと思います。GridはIE対応が不要なサイトではバシバシ使っていってくださいね😌またプログラミングに対する苦手意識を消しされたとのことで、おそらく私の動画だけが要因ではないと思います（ご自身の努力によるものが大きいかと思います）が、そのように言ってくださるのはたいへん光栄です。今後も動画の更新は続けていきますが、次は苦手意識克服から得意なものへと昇格できるよう少しでも手助けできたらいいなと思っております♪😋
しまぶーさんの動画のお陰でどんどんコーディングが、楽しくなってきました！もっともっと勉強します！
うおー楽しくなってきた評価は最高評価と言っていいのでは・・・！勉強が楽しくなると効率も上がって一石二鳥なので楽しんでいきましょう😆
複雑なレイアウトが簡単にできてびっくりしました！cssで細かく指定するとごちゃごちゃすることが多かったです。わかりやすい説明ありがとうございます！
これは控え目にいって神というものですよねぜひ使いまくってくださいねー！😆
視覚的にレイアウトが捉えられてよかったです。説明もはっきり聞き取れました。お願いになると思いますが、CSS設計のFLOCSSを勉強しております。今後この辺のテクニック的な動画のアップを期待しています。
最近勉強を始めたのですが、fioat 使いにくい…flexbox 便利！って感じだったんですが、このgridプロパティは視覚的に理解しやすいし、コードもスッキリするのでとても使いやすそうですね。しまぶーさんの解説は一つ一つ丁寧ですし、とてもわかりやすいです！いつもありがとうございます。
flexboxですらすごい便利になったのに更に・・・grid以上のレイアウト方法が出てくるのか気になりますね😳
gridすげー！しまぶーイケメン！いつもありがとう！
これめちゃめちゃ綺麗にレイアウトできました！ありがとうございます😆
まさに勉強していたところでしたので、非常にありがたい動画です。しまぶー様様です。
おおぉ、ベストタイミング！！学びになったようで良かったです😊
こんな便利な方法があったなんて！動画とても分かりやすかったです！
ありがとうございますGrid凄いですよね・・・ぜひ使ってください😊
しまぶーさん、初めまして！最近プログラミング学習を始めて辿り着きました。取り敢えず全部動画観ます！
うぉぉぉ、かなり量が多いので大変ですよ(^O^;)ちょくちょく見てくださいねー😊
今までの苦労は何だったのかwww コードがゴチャゴチャしないのは素敵😌 しまぶーさんいつも感謝です❗️
今までの苦労は・・・ってのはめっちゃ分かります笑私も最初まさにそう思いました笑プログラミングは常にそれの連続ですね。プログラミング学習時はjQueryが出てきたときに「うおぉぉぉ」ってなりましたが、Reactが出てきたときはjQueryとはなんだったのかとなりました。その連続だと思って学び続けるしかないですね😏
ドットインストールでもGridについて学びましたがしまぶーさんの動画をみてより理解が深まりました😄flex BoxとGridマスターします！
ダブルで学ぶと復習にもなって良さそうですね！むしろ私のが復習ではなく、ドットインストールが予習！？(^O^;)笑Flex & Gridマスター = レイアウトマスターでもあるので、ぜひ極めていってくださいね💪
素晴らしい講義をありがとうございます。現在、ドットインストールやってますがこの講義の方が分かりやすく、情報量もちょうど良い感じで素晴らしいと思います。
すごい！いままでいろんな教材やudemy等でhtml、cssの勉強をしてきましたが、この講座が一番わかりやすかったです！コーディングの革命ですね、、、
勉強になりました！有難うございます。
ついにIEの呪縛から解き放たれましたね!!!!!!gridはスマホサイトでしか使ってなかったですが、PC側も解禁します😍
嬉しい限りです😂
upお疲れ様です。プログラミング講座最高です！ITの知識系の動画もたまに出してくれると嬉しいです！
ありがとうございますー！😊ITの知識系というと特にどういった内容が嬉しいとかあったりしますか！？
しまぶーのIT大学 個人的に以前出して頂いていた、Facebookの強さについてやLINEとYahooの統合のITのニュースについて聞くのが好きです！！
@@ulu7113 なるほどー！実はそれも週イチぐらいで大事なニュースをまとめるみたいな動画は計画していたりはします（でもずっとできていない笑）そっち系も改めて考え直してみますね😏
しまぶーのIT大学 おお！！週1のITニュース楽しみにしてます！よろしくお願いします🤲
gridで書いたことない人でも、メンテナンスできそうなグリッドレイアウトの簡潔さはすばらしいですね。...を使用したコーディングも試してみたいと思います。
こんな便利な技があったとは驚きです！ある程度flexboxの基礎ができてる人は完全移行する価値ありますね。あちこちに書いていたdisplay-flex,width,heightなどを書かずに済むので楽ですね。特に修正作業は恩恵が大きそう。早速試してみます！
あまりに便利すぎて他にも撮りたい講座がたくさんあるのに、こちらから撮影してしまいました。たくさんの方に布教したいです（笑）下記コードを見比べても凄い差ですよね。flexboxは何しているか結構頭を使わないと分からないのに対してgrid areaは一瞬で理解できます。使わない手はありません！！flexboxgithub.com/lightsound/html-css-class/blob/master/002a_%20HolyGrail/style.cssgrid areagithub.com/lightsound/html-css-class/blob/master/002b_%20HolyGrail-grid/style.css
@@shimabu_it 比較すると全然違いますね。実際はもっとたくさんのプロパティがあるので見にくいですし、そうすると更にGridが便利だと感じます。早速友人に共有して布教のお手伝いをしておきますね！
@@sepia_channel そうなんですよね、たったこんだけのデザインでもこれほどまでに違います。大規模なものだと凄い差が出そうですよね。ぜひぜひどんどん布教しちゃってください！世の中のサービスをより良いコードにしていきましょう😏
いつもプログラミングの勉強でみさせてもらっています。とてもわかりやすいです。ありがとうございます。
凄くわかりやすい説明で早速コード書いてみます。
すごく参考になりました。説明もわかりやすいです。
わかりやすくて感動しました！
Grid AreasはCSSの弱点であった視覚的に分かりにくい点を完全にカバーしている内容でした。ただ企業の基幹システムはIEでも動く前提の会社が多いので、tableタグだらけになることが歯がゆいですね。
そうなんですよねー、普及しない原因のひとつですね。IEはマイクロソフトから直々に技術的負債になるからやめようと言っているのに、なかなかそうならない・・・。もどかしいです😔
flexやとおっしゃる通り余計なラップするタグが増えてちゃんと設計しないとハマるポイントだったのですがこのレイアウトやったらめっちゃスッキリしてますね。これから使っていきます。そしてやっぱりIEは..................................
flexでも楽になりましたがdivタグがめちゃくちゃ増えるんですよねーgridはそこが解決されているのが非常に大きい・・・ぜひ使いまくって、そして布教してください！😊笑ちなみ私はかなり前からIE案件は受けないようにしています。IE対応込だと3倍の受注金額でも割に合わないと思っています(^O^;)
とても分かりやすかったです。色々と試してみます。ありがとうございます。
良かったです、ぜひ自分でも試してみてくださいね！より感動するかと思いますので😊
見ていてすごくワクワクしました！こんな簡単にレイアウトつくれるとは、、特にmarginなど余白サイズによく迷うので分かりやすくていいですね
私もこれを最初に知ったときはワクワクが止まりませんでした(^O^)メンテナンス性も高くて最近ずっと使ってます！
ありがとうございます！ Gridだと下手したら初心者にやらせてもすぐできちゃうくらい簡単ですよね！
これならほんとに初心者でもできますねーアスキーアートと同じような感覚でコードがかけちゃいます(^O^;)笑
今独学で勉強していたのですごく助かりました！
いつもありがとうございます。IE使用しない場合はどんどんGridを使っていこうと思います！
はい、ぜひぜひ！👍
動画ありがとうございます!レイアウトにはグリッドを使ったほうが便利ですね。すごく色々と勉強になりました～～
これ凄い便利ですよねーぜひ韓国でも布教していってください！👨🏫笑
３万人超えましたね！^ - ^これからも応援してます
ありがとうございます！！おかげさまで3万人を突破しました！！見てくださる方も増えてきているので最近良い内容を発表せねばというプレッシャーを感じるようになってしまいました(^O^;)笑自分を鼓舞して今後も有益な発信をできるように頑張ります💪
余白の設定.....で設定できるのは知りませんでした！「控えめに言って神‥‥」ですね笑ありがとうございます😉
Grid Areaは控え目に言って神ですね！！ぜひ使っていってくださいね😆
すごい！Grid 初めて聞きました！早速使ってみようと思います！
ほぼ毎日見ています。楽しくて為になる動画、ありがとうございます。
めちゃくちゃ便利ですね！今までやってたことが，，，，誰でもエンジニアになれてしまいそう笑
Web制作は本当に簡単になりそうですよね笑これがテクノロジーの進化・・・
これなら少し難しいレイアウトも作れますね。参考になりました。
しまぶーさん、いつもお世話になっております！動画の内容とは、関係の無い内容になりますが、おかげさまで、制作会社への転職が決まりました！色々とご質問したいことはあるのですが、取り急ぎ、お礼をしたくコメントしました。動画からたくさんのことを学ばせていただきありがとうございました！これからもよろしくお願いいたします！
うおおおおおおおおおおおおおおおマジですかー！！！おめでとうございます！！！最強に嬉しいです！！！こういうプログラミング系の動画を出してて良かったとめちゃくちゃ思います😭😭😭私の動画より実際にはS Yさんの努力によるものがほとんどです。ただそう言ってくださるのは本当に嬉しいです・・・報告ありがとうございます🙏ひとまずは転職成功おめでとうございます。そしてこれからも学びを高めていって、より自分の理想の働き方や目標が実現できるよう励んでください！私も負けないようにスキルアップしていきます！これからも高め合いましょう！！😊
実践的な講座ありがとうございます。スライドショーに関しても解説頂けると助かります。
こちらこそありがとうございます！作りたい講座が山ほど溜まっているのですぐには難しいですが、ちなみにスライドショーはCSSのみ、JavaScript込みのどちらでしょうか？
JavaScript込みをぜひお願いしたいです。
@@ZYL0- 分かりました！ちょっと動画は先になると思うので先にお伝えしますが、基本的にはライブラリを使って構築しようかと思います！JavaScriptで自分で作るのもいいと思うんですが、正直オープンソースのライブラリを使ったほうが質が高く、かつ短い工数でできます。自分で作るのはいわゆる「車輪の再発明」なので。ただ自作でやるとしたらReactで作ると思います。
ありがとうございました、分かり易い
今度ヤフーの面接について動画にして欲しいです！これから面接を受ける予定で、どういったところが見られたか、どれくらいの実力だったか、なぜ受かったかなど聞きたいです！
動画化候補に入れておきますが、だいぶ他にも溜まっているので相当先になるかと思います。なので、かいつまんで概要だけ。ちなみに面接の内容を完全に覚えていないので参考になるレベルのものはお伝えできないかもしれないです。あと最近得た情報ではコーディング面接もあるらしく（私のときはなかった）、だいぶ変わっているかも知れません。「志望動機」「好きなヤフーのサービス」「そのサービスを改善させるにはどうすれば？」「プログラミングはどのぐらいできる？」「どうやって勉強した？」「プログラミングのおもしろいところは？つらいところは？」みたいな内容は聞かれたような気がしますが、しっかりは覚えていないのであくまで噂半分程度で。そして自分がどうやって答えたかもほとんど忘れてしまいました😅実力は2chみたいな匿名掲示板とか、自分のブログとかを作れるレベル（非WordPress）で、そこまですごいプログラミングスキルがあったわけではないです。なぜ受かったかに関しては私もあまり分かりませんが、そもそも私は2回目の就活ということもあり相当面接スキルは高かったと自負しています。プログラミングスキル以外にそういった点も評価されたのではないかなーと予想しています。ちなみにちょっとだけ内容が関連する動画を過去に出しているので、よければそちらもどうぞ！🙇♂️ruclips.net/video/e7VXwUDl2cY/видео.html
めちゃくちゃ参考になりました！！実務経験がつめるようにポートフォリオ作成に力を入れていこうと思います！
いやーグリッドレイアウト非常に便利ですね！！！使います。しまぶーさんは、実戦の使い方まで説明してくれているのでとても解りやすいです。外周の余白の作り方やfr、minmaxなど。こういった小さなことがかなり効率化に役立つんですよね。いつも有難うございます(*^^*)
そう言ってくださって嬉しいです！なるべくプラスαな情報を出せるように頑張って頭の中から引き出しています（笑）当たり前に使っていて、どれが皆さんにとって有益なのか私も分かっていないことがあるので、ちょうど良い整理になります😋
余白で手こずっていた自分には驚きの動画でした。。。ieはきかないようですが、無視して使ってみたいです！笑
無視しましょう！！私も無視しています！！正直、官公庁系のサービス以外はIEは無視しても良いと思っています(^O^;)どんどん使って布教していってください👍
実践的で分かりやすくてありがたいです！！styled-componentsを使ったレイアウトなどもやって欲しいです
styled-componentsはReact講座の中でやりたいと思っています。私は最近一周回ってSassに戻ってきたのですが、styled-componentsも便利ですよね。まだ先ですが講座アップまでお待ちいただければと思います🙏✨
@@shimabu_it ありがとうございます！ 楽しみに待っています！！
有益すぎます、ありがとうございます
ラインを使った解説も出していただきたいです。とくに聖杯レイアウトを画面幅いっぱいに作る為にはどうするべきか解説をお願いします。
いつも楽しく拝見させていただいております！本日の内容も素晴らしい、、。もし良ければ新コーナーの「React編」期待しちゃってます😍
Reactも目下構成を練っている段階です。まずは「なぜReactが必要なのか」に焦点を絞る予定です。Reactを使っている方でも大半の方が整理できていないと思うので！Babel、Webpack、仮想DOMなどの説明が終わったあとでReactですね！もうちょっとだけお待ちください〜！！😋
ありがとうございます😊楽しみにしています！周りの友達に勧めまくっていますが、みんな凄く良かったー！って言っています😊これからも頑張ってください！応援しています😊
@@yuyam2562 わーーー拡散してもらえて嬉しいです✨これからもたくさん学びを発信していくので楽しみにしていてくださいね発信したい有益なことが山ほどありすぎてパンクしてます・・・！😆笑
marginで何度もやってた努力が虚しいですね笑 いかに簡単にするかが大事やとよく分かりました！
gridはfloatやflexを通って来た身としてはとても便利ですね、あとはIEがしっかり対応してくれさえすれば…！実務だとIE対応が必要なところが多いので、自分のポートフォリオとかに使って行こうかなぁと思ってます。
Bootstrapの解説動画もお願いします。
コードみただけでレイアウトわかるのはスゴイGrid使いたすぎてウズウズします（笑）
ウズウズは良いですね🤣さっそくコードを書いてみるしかないッ・・・！！
しまぶーさん、いつも勉強になってます！お体に気をつけて動画投稿してください！今回の感想ホントIE貧弱過ぎて草
なんか私への心配と感想のギャップ差に笑いましたこういうコメント好きです笑
あ、おもしろくてお礼を言うの忘れてましたいつもありがとうございます！😄
おもしろい！
これはすごい！と思ったんですがcloud9環境下ではgrid-areaがunknown propertyと弾かれてしまいます・・・
おーそうなんですねcloud9の設定でIEサポートとかの項目があってONとかになってるんですかね🤔
ieのシェアがもう少し下がってくれば、この手法が主流になりそうですね。
本当にそうですねー・・・今はシェアが3%ぐらいあるのでそれを捨てられるかどうかですね。ちなみに私は捨ててます(^O^;)笑最近ではIE対応しないサービスやWeb制作会社も増えているので、正直捨てる判断もありだと思っています。
@きなこもち 官公庁系のサービス以外であれば私なら捨てる判断をします！サービスの収益性の観点からいっても、3%で稼げる収益より、IEに対応する工数のコストが上回ることがほとんどですので！😅
せめてIE11だけでも対応してくれていたら実用できるのに、、、と悔やまざるを得ません。まだまだ確認にIEを使うクライアントは多いので難しいですね。
ちなみに私はサービス開発中ですが、IEは捨ててます。どこで得た情報か記憶が曖昧なので噂半分ですが、たしかリクルートのサービスとかもIE対応しないと明言していました。そのぐらい大きな企業のサービスでもIE対応しないところは増えているので必要ないのではと思っています。少なくとも超大規模なサービスでない限り、実装コストに見合わないかと思っていますよ。
いつも動画でお世話になっております。今、HTML,CSSの基礎を一通りやり、Bootstrapの学習に入りました。Bootstrapもレイアウト含め多々な便利ようですが、実際の案件獲得および作業に及ぼす重要度（必要度？）は、しまぶーさんの個人的な感覚ではどの程度の感覚でしょうか？
Bootstrapができたからといって案件獲得に繋がるかというと微妙かな〜とは思います。案件と言っても案件によってやることの幅はだいぶ広いので、自分からどういう案件を取りにいくか焦点を絞ったほうが良い気はしますね。Bootsrapが求められるのは管理画面が多いので、管理画面系のUI構築においては活きるのかなーとは思いますねー。あとは管理画面だとJavaScriptも求められることが多いので、JavaScriptも合わせて学ばれると管理画面UI構築などの仕事はできるようになると思います。もちろん案件獲得はツテや営業、自分のアピールなども大事なので、それも合わせてスキルアップする必要はありますね！
なるほど。ありがとうございます！
いつもありがとうございます！これはすごい。。。感動的です。。明日から速攻Grid使います！初心者にも優しいですよね。flexboxは習い始めにすごい苦しんだのになぁ。。しまぶーさんのIT大学で学んでる人は幸せものです＾＾
わかります！！これ最初に知ったときの感動といったらありません！！flexbox以上の感動でした😭😭😭幸せものですか！笑そこまで言ってもらうと逆に照れます(^O^;)でも・・・もっと幸せにできるようにします・・・！笑
新しい技術は常に取り込みたいが、結局のところそれにブラウザが対応していないもんだから複雑なんだよなー
今回の動画もかなり良い意味でショッキングなんですけど、IE以外のブラウザならFlexboxよりこのGridの方が簡単ですよね。今後の事考えたらGridをしっかり勉強した方が良いのでしょうか？Flexboxの必要性って今後無くなっていくんでしょうか？
私もこれ知ったとき良い意味でショッキングでした笑flexboxが必要なくなるかどうかは難しい質問ですね。私も分からないというのが結論なんですが、とりあえず私はgridに寄せていこうと思っています。現状「flexboxにできて、gridにできない」というものが存在しないので。ただ、それが正解かは分からないです(^O^;)
@@shimabu_it ありがとうございます。これからも布教活動をよろしくお願いします。ただ、忙しすぎて体調を壊さないようにして下さいね！！
@@こっつん-h3v ご心配ありがとうございますー！栄養があるもの食べるようにしているのできっと大丈夫です👩🏻🌾👨🏻🍳笑
Widthの発音はウィズです。後ろにスは付けないで大丈夫
コーディング学んでると、こんなに素晴らしいものがあるのにfloatとかflexとか最初に学ぶ必要ある？って思っちゃう。最初にこっち教えてくれって！
いつも動画ありがとうございます。５２歳でプログラミングを始めましたが、書籍などではなかなか集中して勉強できません。でもしまぶーさんの動画はわかりやすく、かなり集中して見る事が出来ます。質問なのですがしまぶーさんの色々なテクニックは、調べて独学で身に付けられた物ですか？それとも勤めていらした会社で教わったり同僚や先輩から教えてもらった物なのでしょうか？
いつもありがとうございます😊 数学みたいで楽しいですね！ IEで使えないのが難点ですが、LP制作にも使えそうですね！！
めちゃくちゃ簡単ですね、、
これは本当に革命です。最初知ったとき、私も「え、嘘でしょ！？」ってなりました😳
いつも参考にさせてもらってます！初心者なのですが、8:00まで動画のように進めたのですが、left center rightの高さが動画のようにいかず、少し高さが足りてないのですが何がいけないのでしょう、、、初歩的な質問で申し訳ないですが、解決出来そうにありません。
いつも優良な動画・解説をありがとうございます。しまぶーさんは普段のフロントエンド開発でgulpは使われていますか？それとも今後はオワコンな感じなのでしょうか。ネット上でgulpよりもnpm scripts推しの情報が増えているように思いますが個人的に動作が遅いと感じるので気になりました。
初めまして。いつも楽しく拝見させていただいております。HTMLとCSSとJavascriptの勉強をしているのですがレイアウトを作成する際などに黄金比を意識すると美しいデザインになる等を調べていて目にするのですが、しまぶーさんは意識されたりしますか？動画と関係ない質問で申し訳ないのですが、少し気になったので質問してみました。これからも頑張ってください！
しまぶーさんは、プログラミングをする時は、デュアルディスプレイとかにしていますか？結構前のしまぶーさんの黙々と作業している動画では、Macだけだった気がしましたがどうなのか気になりました。笑
おおーネクストステージさん！またコメントありがとうございますー！！実はわたしはディスプレイ使わない派なんですよねー。カフェとかで作業することが多いので、ディスプレイに慣れちゃうと外でやるときに不便だろうなーと思って最初からMacBook Airだけで頑張っています😅笑
とはいえ最近はコロナで家でしか作業していないので、1つぐらいディスプレイ使ってもいいかな〜と思い始めていたりもします（やるとは言ってません笑）
しまぶーのIT大学 しまぶーさんに覚えてもらっていて嬉しいです！！確かにディスプレイに慣れてしまうと、外でやる時不便に感じてしまいそうですね。笑しまぶーさんがカフェで作業しとる姿はお洒落すぎますね😂笑
いつも有益な情報ありがとうございます！sass,scssの方はやるんですかね？こういうのがあります程度にも発信すると良いかもしれません😄
おー、Sass・Scssは良いかもしれませんね。実は私は最近までCSS in JS（Styled ComponentとかEmotionというライブラリ）を使ってたんですが、最近1周まわってScssに戻ってきたので講座にするのもありかもしれません。ちょっと講座が詰まってるんですが将来的に考えます！リクエストありがとうございます！！最強です🙏
個人的に、SCSSに加えてディレクトリ構成方法、classの命名規則(BEM？)の解説などを見てみたいです！
いつも分かりやすい説明ありがとうございます。スクールでSkeletonを使ってグリッドを学んだのですがdivを多用するので初心者の私はよく迷子になります；；こういったフレームワークを使う利点というのなんでしょうか？レスポンシブに対応しやすい…？？もし良ければ教えてください。
VScode内のfont-familyは何を使用していますか？
ricty diminishedです！
本当に早くIE無くなってほしいですね...こんな便利なのにIE対応するだけで余計な手間が掛かるのが...
他のコメントでも書きましたが、IEはもう対応しないという選択肢もありかと思っています。既にたくさんのサービス、Web制作会社がIE対応をやめているので私も辞めています😅
そういえばflexboxでしまぶーさんが使っていたゲームは理解出来ました。しかし、それのグリッドレイアウト版の終盤が理解出来ませんでした😭しまぶーさんはそのゲームやりました？
昔やりましたよー！Gridのラインを使った指定ですね！最近やっていないのでどういうものか忘れてしまいましたが(^O^;)でも全部終わらせたかとは思います！！
いつも動画ありがとうございます！ヤフーでやりたいことができたので、エンジニア職のポテンシャル枠で転職したいと思っています。アプリ開発に関わりたいと考えているのですがどのような言語を学べばよいでしょうか？また、英語力はどの程度必要なのでしょうか？
先に言いますと英語力は不要です。当然、英語力があるのはプログラミング学習において強みになりますが、現状英語に自信がないのであれば、それを勉強する必要はないです。その時間をプログラミング学習にあてたほうが良いです。アプリ開発ですと、iOSだとSwift、AndroidだとKotlinあたりが主流ですね。今後はWeb技術で作れるReact NativeやFlutterが更に勢いを増すと思います。ご自身がどの開発をされたいか、どの技術を触ってみたいかで選ばれるのが良いかと思いますよ！😄
@@shimabu_it お忙しい中、親切・丁寧なご回答ありがとうございます🙇♂️とても助かりますし、このように返信いただけると距離を近く感じることができてモチベーションもすごく上がります！英語力が不要とは気が楽になりました、、笑全力でプログラミング技術高めていこうと思います！なるほど！そのあたりの言語に手をつけていこうと思います🙆♂️
初歩的な質問だと思いますが、リンク先のページでレイアウトを変えたい場合はリンク先のページのbodyタグにclassかidつけてそれ用にもgridを書く感じなのでしょうか？それとも別の方法の方が良いのでしょうか。
半年前にしまぶーさんの動画に出会っていれば７０万払ってスクール通わなかった・・・／(^o^)＼ｗｗいや、これからもっともっとプログラミングについて勉強できるから良かったんや！（
その70万は無駄ではないと思いますよ。もしかしたら対価として見合わないという場合はあるかと思いますが、それでも70万を払って見えたものや学んだことは大いにあるかと思います。楽観的ですが、基本私はポジティブなのでそのように考えます。ポジティブに考えて次に活かす方が有益ですもんね😄おそ美まおさんもコメントからポジティブさを感じるので心配は不要そうですが😅
日本はいつまでIEを使用するんですかね
日本はITリテラシーはまだまだ低いので当分は続きそうですね(^O^;)
作り手には視覚的にめちゃくちゃわかりやすいですけどIEに対応していないのは玉に傷ですね、、、😂実務でもあまり普及していないのはIEに対応していないからでしょうか？どのようにお考えになりますか？
仰るとおり、IE対応していないからが１番の原因だと思います！私の認識ではFlexboxですら最初は普及が遅かったので、新しい技術はこういうもんだと思って割り切っています。私がTwitterで激推ししているNext.jsもこれからどんどん普及すると思ってますよ👍
しまぶーのIT大学 ありがとうございます！flexboxもそんな状況だったんですね😳それではしまぶーさんの発信を今後も信じ続けて学習していきます☺️笑
どうやってもleft center right の1frが反映されない、、、なんでじゃあ！！泣
高さを1frにしても339にしかならず、footerと変わらないぐらいにしかならないんですが、考えられる原因としては何があるでしょうか？ちなみに1frを600pxとかに変えたらそうなるので、打ち間違いとかではないと思います。
しまぶーさん本当にわかりやすいです。。。いつも本当にお世話になってます(´;ω;｀)これからも応援してます！！！
分かりやすいと言ってもらえて私も嬉しいです😭😭😭期待に答えられるようこれからも発信がんばりますよーーー！！！💪
大昔のテーブルネストでこれやってた
vs codeで改行を入れられず焦っています。どのようにすれば改行が反映されるのでしょうか？今は自動的に右端で折り返すようになっており、改行しても自動で表示が変わってしまいます。
いつのまにか登録者かなり増えてる
そうなんですよ、最近は更に見てくださる方が増えてきて😭😭😭良い動画を撮らないと...というプレッシャー感じてきました。これからも期待に答えられるように頑張らないとと自分を鼓舞してます😣
しまぶーのIT大学 丁寧な返信ありがとうございますm(_ _)m
GASでGrid使ってGsiteに埋め込むと、スマホで表示した際に潰れてしまうのですが、解決方法ご存知の方いませんか…？
おろ・・・崩れてしまいますか・・・Gsiteを使ったことがなくよく分かっていないのですが、サービス特有の何かがあるんですかね（Gsuite?）
@@shimabu_it 返信ありがとうございます！TwitterのDMの方に詳しい概要を送らせて頂きました。お忙しい中大変恐縮なのですがもし宜しければご確認のほど宜しくお願いいたしますm(_ _)m
わかりやすいで動画ありがとうございます！余白のあたりは初めて知りました＾＾ただ、IE未対応は残念ですね。。。とても使いやすいのに😂
そうなんですよ！ただTwitterも最近IE対応を辞めたので、正直IEは無視してもいいのではないかと思っています😅
@@shimabu_it 皆がそう考えてくれれば作る側はうれしいですね^^
なんじゃこりゃああああめちゃくちゃ簡単じゃん、今までの苦労はなんだったのか…笑
全く同じようにコードを書いたのですが、Chromeで表示を確認したところ全てのタグが重なって表示されるのですが、分かる方いませんか？
これほど視覚的にとらえやすい方法があったなんて…脱帽です！ありがとうございました( ;∀;)
CSS Gridのエリアを使ったレイアウトが画期的なので布教したいです。積極的に使ってみてくださいね😆
今回のコードはこちら 👉 github.com/lightsound/html-css-class/tree/master/002b_%20HolyGrail-grid
前回の講座がまだの方はこちら 👉 ruclips.net/video/XrFD_0Pr6Nc/видео.html
IEがサポート外になるまでは使わないことにしてます
その判断もGoodです！👍👍
プログラミングの勉強を始めて２ヶ月、超ド級の初心者です🔰割りと早い段階でしまぶーさんのIT大学に辿り着いたのですが、自身の教材を見てて『うぅ、もう駄目だ…😫』となる度にチャンネルを訪れています。
そして『大丈夫、ちゃんと理解出来てるよ』と自分を励ましています。
分かりやすく解説しようとして下さるしまぶーさんの努力は、（私みたいな）諦め癖がすぐ顔を出す人達の背中を目に見えない形で力強く押してくれています。
感謝しかありません。
Thanks!
気づいておりませんでした、、、ありがとうございます！🥺🙏
新参のWEBデザイナー志望者です。
今までflex boxでの要素の配置やプロパティを変更していましたが、これ一括で設定できるのは革命的ですね！
活用させていただきます！
シリーズ通して見てます。
こんなにコンパクトにまとまって体系的な情報を無料で公開するとかイケメンすぎて興奮する。GOOD100万回押したい。
めっちゃわかりやすい
ものすごく助かりました！！感謝でいっぱいです。🎉
今回もタメになる動画をありがとうございます！
いつも本当にわかりやすくて絶対今1番のIT系RUclipsrだと思います！
今後も有意義な動画よろしくお願いします！
FLEX BOXでアタマパンクしていたので、マジ助かりました・・・神動画ですね
しまぶーさん、いつも動画楽しみにしています！
先日flexboxを使った友人の使う簡単な実用サイトをつくりまして、やっとhtml/cssの入門編が終了しました笑
今回の内容はサイト作成をしている際にflexboxだとごちゃごちゃになって力技でやっていたところや自分の今作業している部分を探すのに一苦労するようなことが解消されると思いました、非常に効率的です！百聞は一見に如かずともいうので早速今日から実践していきます！
また、現在職業訓練に通いweb制作会社への就職を考えており、プログラミングに対しての苦手意識を自分から消し去ってくれたしまぶーさんには本当に感謝しております！
是非これからもお体に気をつけてお仕事や動画の更新を頑張ってください！
おおー！！実践されたのは非常に良いですね。１番の学びになるかと思います。やっぱり基礎をどんだけ身につけてもアウトプットしないと分からないこともあるので、それを経験できたのは大きいかと思います。GridはIE対応が不要なサイトではバシバシ使っていってくださいね😌
またプログラミングに対する苦手意識を消しされたとのことで、おそらく私の動画だけが要因ではないと思います（ご自身の努力によるものが大きいかと思います）が、そのように言ってくださるのはたいへん光栄です。
今後も動画の更新は続けていきますが、次は苦手意識克服から得意なものへと昇格できるよう少しでも手助けできたらいいなと思っております♪😋
しまぶーさんの動画のお陰でどんどんコーディングが、楽しくなってきました！
もっともっと勉強します！
うおー楽しくなってきた評価は最高評価と言っていいのでは・・・！
勉強が楽しくなると効率も上がって一石二鳥なので楽しんでいきましょう😆
複雑なレイアウトが簡単にできてびっくりしました！cssで細かく指定するとごちゃごちゃすることが多かったです。わかりやすい説明ありがとうございます！
これは控え目にいって神というものですよね
ぜひ使いまくってくださいねー！😆
視覚的にレイアウトが捉えられてよかったです。説明もはっきり聞き取れました。
お願いになると思いますが、CSS設計のFLOCSSを勉強しております。今後この辺のテクニック的な動画のアップを期待しています。
最近勉強を始めたのですが、
fioat 使いにくい…
flexbox 便利！
って感じだったんですが、このgridプロパティは視覚的に理解しやすいし、
コードもスッキリするのでとても使いやすそうですね。
しまぶーさんの解説は一つ一つ丁寧ですし、とてもわかりやすいです！
いつもありがとうございます。
flexboxですらすごい便利になったのに更に・・・
grid以上のレイアウト方法が出てくるのか気になりますね😳
gridすげー！しまぶーイケメン！いつもありがとう！
これめちゃめちゃ綺麗にレイアウトできました！ありがとうございます😆
まさに勉強していたところでしたので、非常にありがたい動画です。
しまぶー様様です。
おおぉ、ベストタイミング！！
学びになったようで良かったです😊
こんな便利な方法があったなんて！
動画とても分かりやすかったです！
ありがとうございます
Grid凄いですよね・・・ぜひ使ってください😊
しまぶーさん、初めまして！
最近プログラミング学習を始めて辿り着きました。
取り敢えず全部動画観ます！
うぉぉぉ、かなり量が多いので大変ですよ(^O^;)
ちょくちょく見てくださいねー😊
今までの苦労は何だったのかwww コードがゴチャゴチャしないのは素敵😌 しまぶーさんいつも感謝です❗️
今までの苦労は・・・ってのはめっちゃ分かります笑
私も最初まさにそう思いました笑
プログラミングは常にそれの連続ですね。プログラミング学習時はjQueryが出てきたときに「うおぉぉぉ」ってなりましたが、Reactが出てきたときはjQueryとはなんだったのかとなりました。その連続だと思って学び続けるしかないですね😏
ドットインストールでもGridについて学びましたが
しまぶーさんの動画をみてより理解が深まりました😄
flex BoxとGridマスターします！
ダブルで学ぶと復習にもなって良さそうですね！むしろ私のが復習ではなく、ドットインストールが予習！？(^O^;)笑
Flex & Gridマスター = レイアウトマスターでもあるので、ぜひ極めていってくださいね💪
素晴らしい講義をありがとうございます。
現在、ドットインストールやってますがこの講義の方が分かりやすく、情報量もちょうど良い感じで素晴らしいと思います。
すごい！いままでいろんな教材やudemy等でhtml、cssの勉強をしてきましたが、この講座が一番わかりやすかったです！コーディングの革命ですね、、、
勉強になりました！有難うございます。
ついにIEの呪縛から解き放たれましたね!!!!!!
gridはスマホサイトでしか使ってなかったですが、PC側も解禁します😍
嬉しい限りです😂
upお疲れ様です。
プログラミング講座最高です！
ITの知識系の動画もたまに出してくれると嬉しいです！
ありがとうございますー！😊
ITの知識系というと特にどういった内容が嬉しいとかあったりしますか！？
しまぶーのIT大学
個人的に以前出して頂いていた、Facebookの強さについてやLINEとYahooの統合のITのニュースについて聞くのが好きです！！
@@ulu7113 なるほどー！実はそれも週イチぐらいで大事なニュースをまとめるみたいな動画は計画していたりはします（でもずっとできていない笑）そっち系も改めて考え直してみますね😏
しまぶーのIT大学 おお！！週1のITニュース楽しみにしてます！よろしくお願いします🤲
gridで書いたことない人でも、メンテナンスできそうなグリッドレイアウトの簡潔さはすばらしいですね。
...を使用したコーディングも試してみたいと思います。
こんな便利な技があったとは驚きです！
ある程度flexboxの基礎ができてる人は完全移行する価値ありますね。
あちこちに書いていたdisplay-flex,width,heightなどを書かずに済むので楽ですね。特に修正作業は恩恵が大きそう。
早速試してみます！
あまりに便利すぎて他にも撮りたい講座がたくさんあるのに、こちらから撮影してしまいました。たくさんの方に布教したいです（笑）
下記コードを見比べても凄い差ですよね。flexboxは何しているか結構頭を使わないと分からないのに対してgrid areaは一瞬で理解できます。使わない手はありません！！
flexbox
github.com/lightsound/html-css-class/blob/master/002a_%20HolyGrail/style.css
grid area
github.com/lightsound/html-css-class/blob/master/002b_%20HolyGrail-grid/style.css
@@shimabu_it
比較すると全然違いますね。
実際はもっとたくさんのプロパティがあるので見にくいですし、そうすると更にGridが便利だと感じます。
早速友人に共有して布教のお手伝いをしておきますね！
@@sepia_channel そうなんですよね、たったこんだけのデザインでもこれほどまでに違います。大規模なものだと凄い差が出そうですよね。ぜひぜひどんどん布教しちゃってください！世の中のサービスをより良いコードにしていきましょう😏
いつもプログラミングの勉強でみさせてもらっています。とてもわかりやすいです。ありがとうございます。
凄くわかりやすい説明で早速コード書いてみます。
すごく参考になりました。説明もわかりやすいです。
わかりやすくて感動しました！
Grid AreasはCSSの弱点であった視覚的に分かりにくい点を完全にカバーしている内容でした。ただ企業の基幹システムはIEでも動く前提の会社が多いので、tableタグだらけになることが歯がゆいですね。
そうなんですよねー、普及しない原因のひとつですね。IEはマイクロソフトから直々に技術的負債になるからやめようと言っているのに、なかなかそうならない・・・。もどかしいです😔
flexやとおっしゃる通り余計なラップするタグが増えて
ちゃんと設計しないとハマるポイントだったのですが
このレイアウトやったらめっちゃスッキリしてますね。
これから使っていきます。
そしてやっぱりIEは..................................
flexでも楽になりましたがdivタグがめちゃくちゃ増えるんですよねー
gridはそこが解決されているのが非常に大きい・・・
ぜひ使いまくって、そして布教してください！😊笑
ちなみ私はかなり前からIE案件は受けないようにしています。
IE対応込だと3倍の受注金額でも割に合わないと思っています(^O^;)
とても分かりやすかったです。色々と試してみます。ありがとうございます。
良かったです、ぜひ自分でも試してみてくださいね！
より感動するかと思いますので😊
見ていてすごくワクワクしました！
こんな簡単にレイアウトつくれるとは、、
特にmarginなど余白サイズによく迷うので分かりやすくていいですね
私もこれを最初に知ったときはワクワクが止まりませんでした(^O^)
メンテナンス性も高くて最近ずっと使ってます！
ありがとうございます！ Gridだと下手したら初心者にやらせてもすぐできちゃうくらい簡単ですよね！
これならほんとに初心者でもできますねー
アスキーアートと同じような感覚でコードがかけちゃいます(^O^;)笑
今独学で勉強していたのですごく助かりました！
いつもありがとうございます。IE使用しない場合はどんどんGridを使っていこうと思います！
はい、ぜひぜひ！👍
動画ありがとうございます!レイアウトにはグリッドを使ったほうが便利ですね。すごく色々と勉強になりました～～
これ凄い便利ですよねー
ぜひ韓国でも布教していってください！👨🏫笑
３万人超えましたね！^ - ^
これからも応援してます
ありがとうございます！！おかげさまで3万人を突破しました！！見てくださる方も増えてきているので最近良い内容を発表せねばというプレッシャーを感じるようになってしまいました(^O^;)笑
自分を鼓舞して今後も有益な発信をできるように頑張ります💪
余白の設定.....で設定できるのは知りませんでした！
「控えめに言って神‥‥」ですね笑
ありがとうございます😉
Grid Areaは控え目に言って神ですね！！
ぜひ使っていってくださいね😆
すごい！Grid 初めて聞きました！早速使ってみようと思います！
ほぼ毎日見ています。楽しくて為になる動画、ありがとうございます。
めちゃくちゃ便利ですね！
今までやってたことが，，，，
誰でもエンジニアになれてしまいそう笑
Web制作は本当に簡単になりそうですよね笑
これがテクノロジーの進化・・・
これなら少し難しいレイアウトも作れますね。参考になりました。
しまぶーさん、いつもお世話になっております！
動画の内容とは、関係の無い内容になりますが、
おかげさまで、制作会社への転職が決まりました！
色々とご質問したいことはあるのですが、
取り急ぎ、お礼をしたくコメントしました。
動画からたくさんのことを学ばせていただきありがとうございました！
これからもよろしくお願いいたします！
うおおおおおおおおおおおおおおおマジですかー！！！
おめでとうございます！！！最強に嬉しいです！！！こういうプログラミング系の動画を出してて良かったとめちゃくちゃ思います😭😭😭
私の動画より実際にはS Yさんの努力によるものがほとんどです。ただそう言ってくださるのは本当に嬉しいです・・・報告ありがとうございます🙏
ひとまずは転職成功おめでとうございます。そしてこれからも学びを高めていって、より自分の理想の働き方や目標が実現できるよう励んでください！私も負けないようにスキルアップしていきます！これからも高め合いましょう！！😊
実践的な講座ありがとうございます。
スライドショーに関しても解説頂けると助かります。
こちらこそありがとうございます！作りたい講座が山ほど溜まっているのですぐには難しいですが、ちなみにスライドショーはCSSのみ、JavaScript込みのどちらでしょうか？
JavaScript込みをぜひお願いしたいです。
@@ZYL0- 分かりました！ちょっと動画は先になると思うので先にお伝えしますが、基本的にはライブラリを使って構築しようかと思います！JavaScriptで自分で作るのもいいと思うんですが、正直オープンソースのライブラリを使ったほうが質が高く、かつ短い工数でできます。自分で作るのはいわゆる「車輪の再発明」なので。ただ自作でやるとしたらReactで作ると思います。
ありがとうございました、分かり易い
今度ヤフーの面接について動画にして欲しいです！
これから面接を受ける予定で、どういったところが見られたか、どれくらいの実力だったか、なぜ受かったかなど聞きたいです！
動画化候補に入れておきますが、だいぶ他にも溜まっているので相当先になるかと思います。なので、かいつまんで概要だけ。
ちなみに面接の内容を完全に覚えていないので参考になるレベルのものはお伝えできないかもしれないです。あと最近得た情報ではコーディング面接もあるらしく（私のときはなかった）、だいぶ変わっているかも知れません。
「志望動機」「好きなヤフーのサービス」「そのサービスを改善させるにはどうすれば？」「プログラミングはどのぐらいできる？」「どうやって勉強した？」「プログラミングのおもしろいところは？つらいところは？」みたいな内容は聞かれたような気がしますが、しっかりは覚えていないのであくまで噂半分程度で。そして自分がどうやって答えたかもほとんど忘れてしまいました😅
実力は2chみたいな匿名掲示板とか、自分のブログとかを作れるレベル（非WordPress）で、そこまですごいプログラミングスキルがあったわけではないです。なぜ受かったかに関しては私もあまり分かりませんが、そもそも私は2回目の就活ということもあり相当面接スキルは高かったと自負しています。プログラミングスキル以外にそういった点も評価されたのではないかなーと予想しています。
ちなみにちょっとだけ内容が関連する動画を過去に出しているので、よければそちらもどうぞ！🙇♂️
ruclips.net/video/e7VXwUDl2cY/видео.html
めちゃくちゃ参考になりました！！実務経験がつめるようにポートフォリオ作成に力を入れていこうと思います！
いやーグリッドレイアウト非常に便利ですね！！！使います。しまぶーさんは、実戦の使い方まで説明してくれているのでとても解りやすいです。外周の余白の作り方やfr、minmaxなど。こういった小さなことがかなり効率化に役立つんですよね。いつも有難うございます(*^^*)
そう言ってくださって嬉しいです！
なるべくプラスαな情報を出せるように頑張って頭の中から引き出しています（笑）当たり前に使っていて、どれが皆さんにとって有益なのか私も分かっていないことがあるので、ちょうど良い整理になります😋
余白で手こずっていた自分には驚きの動画でした。。。ieはきかないようですが、無視して使ってみたいです！笑
無視しましょう！！私も無視しています！！
正直、官公庁系のサービス以外はIEは無視しても良いと思っています(^O^;)
どんどん使って布教していってください👍
実践的で分かりやすくてありがたいです！！
styled-componentsを使ったレイアウトなどもやって欲しいです
styled-componentsはReact講座の中でやりたいと思っています。私は最近一周回ってSassに戻ってきたのですが、styled-componentsも便利ですよね。まだ先ですが講座アップまでお待ちいただければと思います🙏✨
@@shimabu_it ありがとうございます！ 楽しみに待っています！！
有益すぎます、ありがとうございます
ラインを使った解説も出していただきたいです。
とくに聖杯レイアウトを画面幅いっぱいに作る為にはどうするべきか解説をお願いします。
いつも楽しく拝見させていただいております！
本日の内容も素晴らしい、、。
もし良ければ新コーナーの「React編」期待しちゃってます😍
Reactも目下構成を練っている段階です。
まずは「なぜReactが必要なのか」に焦点を絞る予定です。Reactを使っている方でも大半の方が整理できていないと思うので！Babel、Webpack、仮想DOMなどの説明が終わったあとでReactですね！もうちょっとだけお待ちください〜！！😋
ありがとうございます😊
楽しみにしています！
周りの友達に勧めまくっていますが、みんな凄く良かったー！って言っています😊
これからも頑張ってください！
応援しています😊
@@yuyam2562 わーーー拡散してもらえて嬉しいです✨
これからもたくさん学びを発信していくので楽しみにしていてくださいね
発信したい有益なことが山ほどありすぎてパンクしてます・・・！😆笑
marginで何度もやってた努力が虚しいですね笑 いかに簡単にするかが大事やとよく分かりました！
gridはfloatやflexを通って来た身としてはとても便利ですね、あとはIEがしっかり対応してくれさえすれば…！
実務だとIE対応が必要なところが多いので、自分のポートフォリオとかに使って行こうかなぁと思ってます。
Bootstrapの解説動画もお願いします。
コードみただけでレイアウトわかるのはスゴイ
Grid使いたすぎてウズウズします（笑）
ウズウズは良いですね🤣
さっそくコードを書いてみるしかないッ・・・！！
しまぶーさん、いつも勉強になってます！
お体に気をつけて動画投稿してください！
今回の感想
ホントIE貧弱過ぎて草
なんか私への心配と感想のギャップ差に笑いました
こういうコメント好きです笑
あ、おもしろくてお礼を言うの忘れてました
いつもありがとうございます！😄
おもしろい！
これはすごい！と思ったんですが
cloud9環境下ではgrid-areaがunknown propertyと弾かれてしまいます・・・
おーそうなんですね
cloud9の設定でIEサポートとかの項目があってONとかになってるんですかね🤔
ieのシェアがもう少し下がってくれば、この手法が主流になりそうですね。
本当にそうですねー・・・今はシェアが3%ぐらいあるのでそれを捨てられるかどうかですね。ちなみに私は捨ててます(^O^;)笑
最近ではIE対応しないサービスやWeb制作会社も増えているので、正直捨てる判断もありだと思っています。
@きなこもち 官公庁系のサービス以外であれば私なら捨てる判断をします！サービスの収益性の観点からいっても、3%で稼げる収益より、IEに対応する工数のコストが上回ることがほとんどですので！😅
せめてIE11だけでも対応してくれていたら実用できるのに、、、と悔やまざるを得ません。
まだまだ確認にIEを使うクライアントは多いので難しいですね。
ちなみに私はサービス開発中ですが、IEは捨ててます。
どこで得た情報か記憶が曖昧なので噂半分ですが、たしかリクルートのサービスとかもIE対応しないと明言していました。そのぐらい大きな企業のサービスでもIE対応しないところは増えているので必要ないのではと思っています。少なくとも超大規模なサービスでない限り、実装コストに見合わないかと思っていますよ。
いつも動画でお世話になっております。
今、HTML,CSSの基礎を一通りやり、Bootstrapの学習に入りました。
Bootstrapもレイアウト含め多々な便利ようですが、実際の案件獲得および作業に及ぼす重要度（必要度？）は、
しまぶーさんの個人的な感覚ではどの程度の感覚でしょうか？
Bootstrapができたからといって案件獲得に繋がるかというと微妙かな〜とは思います。案件と言っても案件によってやることの幅はだいぶ広いので、自分からどういう案件を取りにいくか焦点を絞ったほうが良い気はしますね。Bootsrapが求められるのは管理画面が多いので、管理画面系のUI構築においては活きるのかなーとは思いますねー。あとは管理画面だとJavaScriptも求められることが多いので、JavaScriptも合わせて学ばれると管理画面UI構築などの仕事はできるようになると思います。もちろん案件獲得はツテや営業、自分のアピールなども大事なので、それも合わせてスキルアップする必要はありますね！
なるほど。ありがとうございます！
いつもありがとうございます！
これはすごい。。。感動的です。。明日から速攻Grid使います！
初心者にも優しいですよね。
flexboxは習い始めにすごい苦しんだのになぁ。。
しまぶーさんのIT大学で学んでる人は幸せものです＾＾
わかります！！
これ最初に知ったときの感動といったらありません！！
flexbox以上の感動でした😭😭😭
幸せものですか！笑
そこまで言ってもらうと逆に照れます(^O^;)
でも・・・もっと幸せにできるようにします・・・！笑
新しい技術は常に取り込みたいが、結局のところそれにブラウザが対応していないもんだから
複雑なんだよなー
今回の動画もかなり良い意味でショッキングなんですけど、
IE以外のブラウザならFlexboxよりこのGridの方が簡単ですよね。
今後の事考えたらGridをしっかり勉強した方が良いのでしょうか？
Flexboxの必要性って今後無くなっていくんでしょうか？
私もこれ知ったとき良い意味でショッキングでした笑
flexboxが必要なくなるかどうかは難しい質問ですね。私も分からないというのが結論なんですが、とりあえず私はgridに寄せていこうと思っています。現状「flexboxにできて、gridにできない」というものが存在しないので。ただ、それが正解かは分からないです(^O^;)
@@shimabu_it
ありがとうございます。
これからも布教活動をよろしくお願いします。
ただ、忙しすぎて体調を壊さないようにして下さいね！！
@@こっつん-h3v ご心配ありがとうございますー！栄養があるもの食べるようにしているのできっと大丈夫です👩🏻🌾👨🏻🍳笑
Widthの発音はウィズです。後ろにスは付けないで大丈夫
コーディング学んでると、こんなに素晴らしいものがあるのにfloatとかflexとか最初に学ぶ必要ある？って思っちゃう。最初にこっち教えてくれって！
いつも動画ありがとうございます。５２歳でプログラミングを始めましたが、書籍などではなかなか集中して勉強できません。でもしまぶーさんの動画はわかりやすく、かなり集中して見る事が出来ます。質問なのですがしまぶーさんの色々なテクニックは、調べて独学で身に付けられた物ですか？それとも勤めていらした会社で教わったり同僚や先輩から教えてもらった物なのでしょうか？
いつもありがとうございます😊 数学みたいで楽しいですね！ IEで使えないのが難点ですが、LP制作にも使えそうですね！！
めちゃくちゃ簡単ですね、、
これは本当に革命です。
最初知ったとき、私も「え、嘘でしょ！？」ってなりました😳
いつも参考にさせてもらってます！
初心者なのですが、8:00まで動画のように進めたのですが、left center rightの高さが動画のようにいかず、少し高さが足りてないのですが何がいけないのでしょう、、、初歩的な質問で申し訳ないですが、解決出来そうにありません。
いつも優良な動画・解説をありがとうございます。
しまぶーさんは普段のフロントエンド開発でgulpは使われていますか？
それとも今後はオワコンな感じなのでしょうか。
ネット上でgulpよりもnpm scripts推しの情報が増えているように思いますが個人的に動作が遅いと感じるので気になりました。
初めまして。いつも楽しく拝見させていただいております。
HTMLとCSSとJavascriptの勉強をしているのですがレイアウトを作成する際などに黄金比を意識すると美しいデザインになる等を調べていて目にするのですが、しまぶーさんは意識されたりしますか？
動画と関係ない質問で申し訳ないのですが、少し気になったので質問してみました。これからも頑張ってください！
しまぶーさんは、プログラミングをする時は、デュアルディスプレイとかにしていますか？
結構前のしまぶーさんの黙々と作業している動画では、Macだけだった気がしましたがどうなのか気になりました。笑
おおーネクストステージさん！
またコメントありがとうございますー！！
実はわたしはディスプレイ使わない派なんですよねー。カフェとかで作業することが多いので、ディスプレイに慣れちゃうと外でやるときに不便だろうなーと思って最初からMacBook Airだけで頑張っています😅笑
とはいえ最近はコロナで家でしか作業していないので、1つぐらいディスプレイ使ってもいいかな〜と思い始めていたりもします（やるとは言ってません笑）
しまぶーのIT大学
しまぶーさんに覚えてもらっていて嬉しいです！！
確かにディスプレイに慣れてしまうと、外でやる時不便に感じてしまいそうですね。笑
しまぶーさんがカフェで作業しとる姿はお洒落すぎますね😂笑
いつも有益な情報ありがとうございます！
sass,scssの方はやるんですかね？
こういうのがあります程度にも発信すると良いかもしれません😄
おー、Sass・Scssは良いかもしれませんね。実は私は最近までCSS in JS（Styled ComponentとかEmotionというライブラリ）を使ってたんですが、最近1周まわってScssに戻ってきたので講座にするのもありかもしれません。ちょっと講座が詰まってるんですが将来的に考えます！
リクエストありがとうございます！！最強です🙏
個人的に、SCSSに加えてディレクトリ構成方法、classの命名規則(BEM？)の解説などを見てみたいです！
いつも分かりやすい説明ありがとうございます。
スクールでSkeletonを使ってグリッドを学んだのですが
divを多用するので初心者の私はよく迷子になります；；
こういったフレームワークを使う利点というのなんでしょうか？
レスポンシブに対応しやすい…？？
もし良ければ教えてください。
VScode内のfont-familyは何を使用していますか？
ricty diminishedです！
本当に早くIE無くなってほしいですね...
こんな便利なのにIE対応するだけで余計な手間が掛かるのが...
他のコメントでも書きましたが、IEはもう対応しないという選択肢もありかと思っています。既にたくさんのサービス、Web制作会社がIE対応をやめているので私も辞めています😅
そういえばflexboxでしまぶーさんが使っていたゲームは理解出来ました。しかし、それのグリッドレイアウト版の終盤が理解出来ませんでした😭しまぶーさんはそのゲームやりました？
昔やりましたよー！Gridのラインを使った指定ですね！
最近やっていないのでどういうものか忘れてしまいましたが(^O^;)
でも全部終わらせたかとは思います！！
いつも動画ありがとうございます！
ヤフーでやりたいことができたので、エンジニア職のポテンシャル枠で転職したいと思っています。アプリ開発に関わりたいと考えているのですがどのような言語を学べばよいでしょうか？
また、英語力はどの程度必要なのでしょうか？
先に言いますと英語力は不要です。当然、英語力があるのはプログラミング学習において強みになりますが、現状英語に自信がないのであれば、それを勉強する必要はないです。その時間をプログラミング学習にあてたほうが良いです。
アプリ開発ですと、iOSだとSwift、AndroidだとKotlinあたりが主流ですね。今後はWeb技術で作れるReact NativeやFlutterが更に勢いを増すと思います。ご自身がどの開発をされたいか、どの技術を触ってみたいかで選ばれるのが良いかと思いますよ！😄
@@shimabu_it
お忙しい中、親切・丁寧なご回答ありがとうございます🙇♂️とても助かりますし、このように返信いただけると距離を近く感じることができてモチベーションもすごく上がります！
英語力が不要とは気が楽になりました、、笑全力でプログラミング技術高めていこうと思います！
なるほど！そのあたりの言語に手をつけていこうと思います🙆♂️
初歩的な質問だと思いますが、リンク先のページでレイアウトを変えたい場合は
リンク先のページのbodyタグにclassかidつけてそれ用にもgridを書く感じなのでしょうか？
それとも別の方法の方が良いのでしょうか。
半年前にしまぶーさんの動画に出会っていれば７０万払ってスクール通わなかった・・・／(^o^)＼ｗｗ
いや、これからもっともっとプログラミングについて勉強できるから良かったんや！（
その70万は無駄ではないと思いますよ。もしかしたら対価として見合わないという場合はあるかと思いますが、それでも70万を払って見えたものや学んだことは大いにあるかと思います。楽観的ですが、基本私はポジティブなのでそのように考えます。ポジティブに考えて次に活かす方が有益ですもんね😄
おそ美まおさんもコメントからポジティブさを感じるので心配は不要そうですが😅
日本はいつまでIEを使用するんですかね
日本はITリテラシーはまだまだ低いので当分は続きそうですね(^O^;)
作り手には視覚的にめちゃくちゃわかりやすいですけどIEに対応していないのは玉に傷ですね、、、😂
実務でもあまり普及していないのはIEに対応していないからでしょうか？
どのようにお考えになりますか？
仰るとおり、IE対応していないからが１番の原因だと思います！私の認識ではFlexboxですら最初は普及が遅かったので、新しい技術はこういうもんだと思って割り切っています。私がTwitterで激推ししているNext.jsもこれからどんどん普及すると思ってますよ👍
しまぶーのIT大学 ありがとうございます！
flexboxもそんな状況だったんですね😳
それではしまぶーさんの発信を今後も信じ続けて学習していきます☺️笑
どうやってもleft center right の1frが反映されない、、、なんでじゃあ！！泣
高さを1frにしても339にしかならず、footerと変わらないぐらいにしかならないんですが、考えられる原因としては何があるでしょうか？
ちなみに1frを600pxとかに変えたらそうなるので、打ち間違いとかではないと思います。
しまぶーさん本当にわかりやすいです。。。
いつも本当にお世話になってます(´;ω;｀)
これからも応援してます！！！
分かりやすいと言ってもらえて私も嬉しいです😭😭😭
期待に答えられるようこれからも発信がんばりますよーーー！！！💪
大昔のテーブルネストでこれやってた
vs codeで改行を入れられず焦っています。どのようにすれば改行が反映されるのでしょうか？
今は自動的に右端で折り返すようになっており、改行しても自動で表示が変わってしまいます。
いつのまにか登録者かなり増えてる
そうなんですよ、最近は更に見てくださる方が増えてきて😭😭😭
良い動画を撮らないと...というプレッシャー感じてきました。これからも期待に答えられるように頑張らないとと自分を鼓舞してます😣
しまぶーのIT大学
丁寧な返信ありがとうございますm(_ _)m
GASでGrid使ってGsiteに埋め込むと、スマホで表示した際に潰れてしまうのですが、解決方法ご存知の方いませんか…？
おろ・・・崩れてしまいますか・・・Gsiteを使ったことがなくよく分かっていないのですが、サービス特有の何かがあるんですかね（Gsuite?）
@@shimabu_it 返信ありがとうございます！TwitterのDMの方に詳しい概要を送らせて頂きました。お忙しい中大変恐縮なのですがもし宜しければご確認のほど宜しくお願いいたしますm(_ _)m
わかりやすいで動画ありがとうございます！
余白のあたりは初めて知りました＾＾
ただ、IE未対応は残念ですね。。。
とても使いやすいのに😂
そうなんですよ！ただTwitterも最近IE対応を辞めたので、正直IEは無視してもいいのではないかと思っています😅
@@shimabu_it 皆がそう考えてくれれば作る側はうれしいですね^^
なんじゃこりゃああああ
めちゃくちゃ簡単じゃん、今までの苦労はなんだったのか…笑
全く同じようにコードを書いたのですが、Chromeで表示を確認したところ全てのタグが重なって表示されるのですが、分かる方いませんか？
これほど視覚的にとらえやすい方法があったなんて…
脱帽です！ありがとうございました( ;∀;)