【HTML/CSSレイアウト #1】実践的かつデザインも学べるレイアウト講座を開講します【ヤフー出身エンジニアの初心者向けプログラミング講座】

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ก.ย. 2024

ความคิดเห็น • 88

  • @shimabu_it
    @shimabu_it  4 ปีที่แล้ว +27

    私の経験上、キレイなHTML・CSSを組める人は少ない印象です。
    実践でも使えるキレイなコーディングを学んでいきましょう!!
    JavaScript講座も進めていきますが、あちらは内容を作るのが重く1つ1つに時間がかかってしまいます。
    こちらは比較的早く動画を作ることができるので、プログラミングの学びコンテンツが途切れることがないように並行して進めます。

  • @わわわ-b9o
    @わわわ-b9o 4 ปีที่แล้ว +31

    自分が見てるプログラミング系TH-camrの中で一番集中できるし分かりやすいです 
    今日も有益な動画、ありがとうございます

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +4

      凄いイイネがついてる。嬉しいコメントありがとうございます。
      現状に甘んじず、今後も進化していきますよーーー💪

  • @中野陽介-e6i
    @中野陽介-e6i 4 ปีที่แล้ว +3

    まだまだ、プログラミング勉強1か月程の初心者ですが、今1番混乱しているのがレイアウトに関してです💦有益な動画ありがとうございます。何度も何度も見て、脳に定着させます。

  • @ゆずのすけ-u4k
    @ゆずのすけ-u4k 4 ปีที่แล้ว +4

    学びのない回がありません、いつもありがとうございます!
    プレゼンが本当に上手い

  • @takaone-w5d
    @takaone-w5d 4 ปีที่แล้ว +2

    最近思うのが実際はお金はらって学ぶべき物をこうやってTH-camで無料で学べる時代に感謝しないとですね、本当にいつも役立つ情報や学習をありがとう御座います!

  • @user-tz8pl6tx9z
    @user-tz8pl6tx9z 2 ปีที่แล้ว +2

    初心者には、有難い小技だと思いました。
    使わせて貰います。
    ありがとう御座います。

  • @takahirohirata5226
    @takahirohirata5226 3 ปีที่แล้ว +1

    いやはや凄い人が出てきました。その昔80万ほど払ってデ◯タル◯リウッドなる講座を半年受けましたが、のっけからついて行けず何も身につきませんでした。しかしこの人の説明は50過ぎの私にもとてもわかりやすく親切に端折らずに教えてくれます。勝手に弟子入りさせてもらいます。

  • @user-nh6cn9ct2y
    @user-nh6cn9ct2y 2 ปีที่แล้ว +1

    勉強になります。
    頑張って下さい。

  • @宇田川博英
    @宇田川博英 4 ปีที่แล้ว +1

    毎回、とても学習させていただいてます。有難う御座います。
    動画の内容は基より、しまぶーさんの滑舌の良いしゃべりはとても耳に心地よく入ってきます。これが無料なのか!!ビックリです。お身体ご自愛し、これからも分かり易い動画お願いいたします。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      高い評価&お気遣いありがとうございます!😊
      リアルでは滑舌が良いとあまり言われたこと無いんですけど、動画だと結構そのように言ってくださる方がいて驚きです。動画向きの声なのかな(^O^;)笑
      はーい!これからも有益な動画を発信していきますね👍

  • @user-nh6cn9ct2y
    @user-nh6cn9ct2y 2 ปีที่แล้ว +1

    いつも勉強になります。
    エンジニアになれるかわからないですが、頑張ります。

  • @kowich6789
    @kowich6789 4 ปีที่แล้ว +1

    この様な有益情報は、素晴らしいと思います。どこのサイトでも基本の記述しかない物が多いです。初心者に優しいです。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      基本的なものだけでなく、よく使われる実践的なものまで幅広く紹介していきますよー!😊

    • @kowich6789
      @kowich6789 4 ปีที่แล้ว +1

      @@shimabu_it それを楽しみにしています。応援します。

  • @user-ub1of7wm6n
    @user-ub1of7wm6n 4 ปีที่แล้ว

    本当にいつも有益な動画をありがとうございます!!
    無料で見せていただけることに本当に感謝します!!
    しかも俳優さんみたいにスタイリッシュで、毎日モチベ保って学ばせていただけてます!!

  • @人面アライグマ
    @人面アライグマ 4 ปีที่แล้ว +3

    実践的な内容‼️✨待ってました‼️次回の動画も楽しみにしてます‼️

  • @user-ws4jf8by5v
    @user-ws4jf8by5v 3 ปีที่แล้ว +1

    とてもわかりやすい解説で勉強になります!ありがとうございました!!

  • @soichiromamiya8455
    @soichiromamiya8455 4 ปีที่แล้ว +1

    いつも試聴させていただいております!
    ちょうど今、レイアウトについて悩んでいる時期で、どんな時にmarginを使い、どんな時にはpaddingを使うといったことや、共通レイアウトがあるときの効率的なクラスの付け方など、日々悪戦苦闘していたので今回のような講座はとても勉強になります!
    次回以降も参考にさせていただきますと同時に、拡張機能のリリースも楽しみにしております!

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      CSSの書き方は正解はないので悩みますよね。なるべくキレイなコードを、少なくとも私にとっての正解をお伝えしていこうと思っています。私も生涯勉強中ですので、むしろより良い書き方があれば教えてくださいね😆🙏

  • @yoseei40
    @yoseei40 4 ปีที่แล้ว

    アウトラインや、imgタグに付いてくるverticalーalignなど、とても勉強になりました。
    いつも、分かりやすい動画をありがとうございます。

  • @黄鼻
    @黄鼻 4 ปีที่แล้ว

    これはコード書くとき必須だと思って最後まで見たら、拡張機能とは...即、追加しました!
    IT大学の講座が見やすい理由の一つは、コード打ちの正確さと、コメントアウトなどの前準備で余計なロスがないことだと思います。
    見倣ってタイピングの腕もあげたいと思います。

  • @letsgoboys9676
    @letsgoboys9676 4 ปีที่แล้ว +4

    動画投稿ありがとうございます!
    確かに初めからbackgroundcolor付けとけばわかりやすいですね…!
    JavaScriptゆっくりでも全然大丈夫ですよ!

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +2

      > JavaScriptゆっくりでも全然大丈夫ですよ!
      ひえー、そういっていただけると救いになります。心待ちにしていただいているのが分かるので、なるべく早く出せるようには頑張ります✌️

  • @user-zq1iz4gd2l
    @user-zq1iz4gd2l 4 ปีที่แล้ว +2

    しまぶーさん、初めまして。
    win3.1の時代にHPを作って楽しんでいたんですが、それ以来30年以上経過したこの歳にしてまさか職場のECサイトをデザイン含めコーディングまで担当するようなことになろうとは。cssとはなんぞや?から始めて約1カ月。少しずつ、ホンマ少しずつですが、アウトプットもできるようになり、楽しさを覚えてきたところです。しまぶーさんの講義を沢山勉強して、孫に教えてやれるようになりたいと思ってます。(笑)

  • @sinuture
    @sinuture 4 ปีที่แล้ว +4

    拡張機能開発ヤバっ!!!
    楽しみです!

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +2

      超ショボいものなんで期待値はめちゃくちゃ下げてください。本当に(^O^;)
      早く申請は通ってほしいですが、まだ通りません笑

  • @ulu7113
    @ulu7113 4 ปีที่แล้ว +2

    動画アップお疲れ様です!
    いつも楽しみにしてます😁

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      むしろいつもコメントくださって嬉しいです😊
      ありがとうございます!

  • @爆ちゃんねる
    @爆ちゃんねる 3 ปีที่แล้ว

    初学者にとってはとても有り難い、動画でした🙇

  • @user-ec2sw7vy7t
    @user-ec2sw7vy7t 4 ปีที่แล้ว +1

    すごく分かりやすいです。
    ありがとうございます。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      今後もお任せください💪

  • @高木瑞季-d2e
    @高木瑞季-d2e 4 ปีที่แล้ว +2

    今回もとても分かりやすかったです!

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +2

      ありがとうございますー!
      今回「も」ってのが最高に嬉しいです😊

  • @uverworld5348
    @uverworld5348 4 ปีที่แล้ว +1

    簡単なサイトですが1から作ることができました!
    アウトプットすることで理解がいまいちだったところが結構定着してきたと思います!
    しまぶーさんの動画でも色々また学ばせていただきます!

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      学習スピードが早い・・・このままもっとスキルを身に着けていってだんだんと難しいものも作っていきましょう!!💪

  • @user-xo9zk8bq8u
    @user-xo9zk8bq8u 4 ปีที่แล้ว +1

    スクールに通う必要ないくらい、解説と内容が素晴らしいです!
    理解できました。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      そう言ってもらえると嬉しいです😊
      今後も講座を充実させていきますね👍

  • @1ncursio
    @1ncursio 4 ปีที่แล้ว +2

    新しい動画ですね!よく見てます~~

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      コメントたくさんくださっているの知ってます
      ありがとうございます!😭😭

  • @dmcreatorjapan
    @dmcreatorjapan 4 ปีที่แล้ว +1

    自分がガイドつけるときは全体にbox-sizing: border-boxかけてからborder: 1px dash #eee;(めっちゃ薄い線)でつけるかな。
    変にオブジェクトに色つけるとデザインバランスが変わってしまうリスクがある。
    なんなら薄いボーダーでも入ってる時と入っていない時で見え方が変わってしまうので
    ガイドはあくまでガイドで最終の見た目でバランス調整は必須。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      box-sizing: border-box からの border でもいいですね✌️
      > ガイドはあくまでガイドで最終の見た目でバランス調整は必須。
      もちろん、これが大事ですね!仰るとおりかと思います!

  • @あおぴょん-e1i
    @あおぴょん-e1i 4 ปีที่แล้ว

    すげえわかり易い!!

  • @ikkyu5295
    @ikkyu5295 3 ปีที่แล้ว +1

    情報ありがとうございます😸
    コードを打った後に
    販売までの流れがみたいです😃

  • @いっしー-y4f
    @いっしー-y4f 4 ปีที่แล้ว

    今webデザイナーの勉強をしていたのですが、どうしてもサイト作成実践でうまくCSSのデザインが機能しなくて困っていました。
    backgroundcolorは完全に盲点でした…!
    margin同士の打ち消しバグのあたりとかを注意して見てみます。ありがとうございます!

  • @マカロニ-v4s
    @マカロニ-v4s 4 ปีที่แล้ว +1

    拡張機能楽しみです。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      申請早く通ってくれーーーGoogleさーん😠😠😠

  • @中村周人-b1s
    @中村周人-b1s 4 ปีที่แล้ว

    いつもお世話になっております。
    とてもわかりやすくてためになる動画をありがとうございます😊

  • @user-ok3xd3lf6y
    @user-ok3xd3lf6y 4 ปีที่แล้ว

    拡張機能申請通ったらぜひ使用させて下さい😆
    私はまだサイト制作の経験が少ないので今後のレイアウト動画楽しみにしています。

  • @foxkitutune2683
    @foxkitutune2683 3 ปีที่แล้ว

    しまぶーさんのサロンに入り再びこちらの動画に戻ってきました
    すみません、まだあちらでのコメントの仕方がいまいち容量掴めずこちらに投稿しています(初投稿でもあります)
    プログラミングについて以前は何をすればいいかわからず、とりあえず追っていく形で動画を見てましたがサロン入会後は何をすればいいのか明確になり安心して勉強できています^^ありがとうございます

  • @yuuttana1223
    @yuuttana1223 4 ปีที่แล้ว +2

    JavaScriptのES6で始めたんですけど、ES5も知らないと困ったりします?
    letをvarでする人やfunction()を() =>とかする人がいてどっちで覚えていいかわからなくなりました。(暗記はしていませんが...)

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      ES6(ES2015)からで問題ないですよ(ちなみES2015の方が正式名称なのでES2015で表現しますね)
      ネット上には情報が混合してあるので、こんがらがりますが、基本的にはES2015を覚えていけば問題ありません。文章だけだとうまく伝えられないので、後々詳しくそこらへんも動画で解説します。
      ちなみにvarはもう使ったらダメですが、functionの書き方はチームによりますね。そこは両方覚えておいて、チームに合わせるのが1番です。

    • @yuuttana1223
      @yuuttana1223 4 ปีที่แล้ว +1

      しまぶーのIT大学 ありがとうございますm(_ _)mとてもスッキリしました。動画楽しみにしてます!

    • @かず-g9b3b
      @かず-g9b3b 4 ปีที่แล้ว +2

      @@yuuttana1223 横槍すみません。自分が一度詰まったことあるので書きます…w
      functionと()=>{}(アロー関数)についてですが、見た目だけでなくthisの扱いが違う?という大きな違いがあります。今これをみても何を言っているかわからないと思いますが、アロー関数で書いている時にどうもうまく動かないということがあればfunctionに書き直すなどしてみると解決するかもしれません…

  • @shingotakano8534
    @shingotakano8534 3 ปีที่แล้ว +1

    有益すぎて鼻血が出ます^^
    ありがとうございます。

  • @いにしえオンエア
    @いにしえオンエア 3 ปีที่แล้ว +1

    右下のコードはどのように出すんですか?

  • @吉田達矢-l4q
    @吉田達矢-l4q 3 ปีที่แล้ว

    質問です。Macのマウスを使われていますか?

  • @あきらいふ
    @あきらいふ 4 ปีที่แล้ว +1

    いつもありがとうございます。
    本当に、いいねが足りないくらいです。

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      Facebookみたいに「超いいね」が導入が必要かも!?(^O^;)笑

  • @st1382
    @st1382 4 ปีที่แล้ว +1

    為になりすぎる笑笑

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      そう言ってもらえると嬉しいです😊

  • @ropital_
    @ropital_ 4 ปีที่แล้ว +1

    動画には関係ないですが、Yahooのエンジニア採用は面接は何回程度あるのでしょうか?
    また、グループ面接などはありましたでしょうか?

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +2

      関係ない質問も大歓迎です!
      ヤフーのエンジニア採用は、私の記憶が正しければ対面2回+オンライン1回で、グループ面接はありませんでした。私が関西だったからだと思いますが最終面接がオンラインでした。
      ちなみにですが、今年はコーディングテストが課されているという話も聞きました。私のときはコーディングテストは無かったので、どう対策すればいいかまでは分かりませんが(^O^;)

    • @ropital_
      @ropital_ 4 ปีที่แล้ว +1

      @@shimabu_it グループ面接対策していなかったので安心です。面接は3回ある可能性が高いのですね^^ ありがとうございます!しっかり面接対策をしていきます
      時期的に間に合うかわかりませんが、しまぶーさんの就活講座の面接対策の動画お待ちしております!
      コーディングテストは無事通過させていただきました。3問あって割と難しめでしたが、全部解けなければいけないというわけではなかったみたいです!

  • @号釰就是
    @号釰就是 4 ปีที่แล้ว +1

    高評価105 低評価0 やっぱりしまぶーさんの動画は有益すぎる😂

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      たしかに凄い比率だ...嬉しすぎます😭😭

  • @user-pp6nv4yk6q
    @user-pp6nv4yk6q ปีที่แล้ว

    バックグラウンドカラーのみ表示させるにはどうしたらいいでしょうか?
    プロゲートではできていたのに........
    教えてください🙇

  • @u2usokendo949
    @u2usokendo949 3 ปีที่แล้ว +1

    些細とも言える違和感でも、それを見逃したりシカトしてると、サイト全体になると大きなズレになるんだなぁ。

  • @takesakamo9643
    @takesakamo9643 4 ปีที่แล้ว +6

    0:52 講座の特徴
    2:20 ターゲット
    3:28 テクニック(コーディング)
    9:08 borderとoutlineの違い

  • @さた-p6p
    @さた-p6p 4 ปีที่แล้ว +1

    動画に関係ないんですけど後ろの背景は実物ですか?それとも仮想現実?🤔

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +2

      第2の世界です。ようこそ、こちら側の世界へ👻
      (合成です)

  • @kayono_
    @kayono_ 3 ปีที่แล้ว

    background-colorで範囲が分かる方法に今まで何故気づかなかったんだ自分!もっと勉強ガンバリマス!!

  • @sendy4546
    @sendy4546 4 ปีที่แล้ว

    outlineで同じようにやっても左の・←これを含む囲いになっちゃう。backgroundcolourは含んでないのに…。初心者なので全然分からないので誰か教えてください💦

  • @1億3千万
    @1億3千万 4 ปีที่แล้ว

    目からウロコです、今通ってるスクールじゃそんな事教えてくれなかったw

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว

      スクール超えきた!?😂

  • @ピグモン-s2x
    @ピグモン-s2x 4 ปีที่แล้ว +1

    使っているソフト何ですか?
    Atom、じゃないですよね?

    • @shimabu_it
      @shimabu_it  4 ปีที่แล้ว +1

      Visual Studio Codeです!
      フロントエンドではもうこれ1択ですね。こちらをオススメしています!

    • @ピグモン-s2x
      @ピグモン-s2x 4 ปีที่แล้ว +1

      しまぶーのIT大学 ありがとうございます!

  • @slaimu071201
    @slaimu071201 2 ปีที่แล้ว +1

    ◎HTMLとCSS レイアウト
    ☆講座特徴
     ・実践的なレイアウトとデザイン
     ・実際にコード
     ・デザイン的視点での解説

    • @slaimu071201
      @slaimu071201 2 ปีที่แล้ว +1

      ●バックグラウンドカラーの用途
       +アウトライン
      →見逃し防止 
       要素ごとに色をつけることで、
       padding.marginの影響が何によるものか
       分かりやすい
      ・インライン要素はvertical-alignという
       baselineがあるのでbottomにする
      ・outlineとborderの違い
       outline:境界線同士が重なる
       border:境界線は重ならず隙間ができる 
       
       ゆえに、outline > border

  • @daniloabe6196
    @daniloabe6196 3 ปีที่แล้ว

    全くの初心者です。全く同じようにコードを打っても、アウトラインとボーダーだけがなぜかつきません。わかる方いましたら教えて頂けませんか?

    • @モンスト-n8w
      @モンスト-n8w 3 ปีที่แล้ว

      他の要素は適応されていますか?

    • @daniloabe6196
      @daniloabe6196 3 ปีที่แล้ว

      @@モンスト-n8w その他のバックグラウンドカラーなどの要素は全て適応されております。

    • @モンスト-n8w
      @モンスト-n8w 3 ปีที่แล้ว +1

      @@daniloabe6196 全く同じコードを書いているのなら、他の原因は思いつかないです😢 力になれずすみません(◞‸◟)

    • @daniloabe6196
      @daniloabe6196 3 ปีที่แล้ว

      @@モンスト-n8w 問題が解決しました!
      コードの問題ではなくページの更新の問題でした!通常の更新は行っていたのですが、スーパーリロードというものを知りませんでした。私のパソコンに対する知識が少な過ぎるのですね。
      ご協力頂き本当にありがとうございます。☺️

    • @モンスト-n8w
      @モンスト-n8w 3 ปีที่แล้ว +1

      @@daniloabe6196 いえいえ笑 解決してよかったです!