【HTML #4】基礎からちゃんと学ぶ HTML 入門!実際にマークアップしよう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ต.ค. 2024

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

  • @taekwondoyuzu-sato5332
    @taekwondoyuzu-sato5332 4 ปีที่แล้ว +5

    とてもわかりやすいです。コードを打ちながら滑舌よくどもることもなく整理された解説をされていてすごいなと思います。かっこいいです。そういう姿も目標になりますし憧れます。ありがとうございます!

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

    本では理解が難しい箇所が 動画ですごく分かりやすく解説される
    のでとても為になります ありがとうございます

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

    これです!htmlを学んでも、コードをどのように打っていくのか??
    こーいったプチ実践的にしてくれるサイトは初めて見ました。
    このタグは、こーいう風にどこに使う…など、とても分かり易かったです。
    動画を観ないでもコードが打てるようになっただけで、とても自信がつきました。
    実際はもっともっと複雑なコードだとは思いますが、この一連の流れが基礎なのだと思いました。
    こんな感じで、習ったことを少しずつアウトプットしていき、レベルアップしていけたらなぁ、と
    思っています。

  • @harukame2971
    @harukame2971 2 ปีที่แล้ว

    一通り手順などは無視してサイトを作成することは出来ていましたが、の一気表示や、Loremの使用など初めて習うことが多くて、とても参考になりました。ありがとうございます。

  • @10itinput10
    @10itinput10 2 ปีที่แล้ว +2

    今回もとてもわかりやすかったです!シリーズ通して色々と勉強になりました〜👍

  • @佐々木愛-c8z
    @佐々木愛-c8z ปีที่แล้ว +1

    イケメンさんに丁寧に教えてもらってうれしいです😂

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

    基礎の基礎がめちゃくちゃわかりやすいです。助かります。

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

    最後まで物凄くわかりやすかったです!WordPress初心者に刺さる内容でした!

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

    HTMLを勉強して総復習として視聴させていただいています。
    凄くシンプルで分かりやすく、初めにこの動画観てから勉強すれば良かったと思ったほどです。
    他の講座の動画も楽しみにしております。

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

    わかりやすい講座を感謝します!

  • @すみれチャンネル-e9t
    @すみれチャンネル-e9t 3 ปีที่แล้ว +1

    視聴させていただきました、この動画を見て、自分でもHTMLが書ける気がしてきました!

  • @吉田山田-k1m
    @吉田山田-k1m 4 ปีที่แล้ว +7

    ちょうどプログラミング勉強しようと思ってたさながら発見しました!
    すごく分かりやすいです。今後も更新して頂けるとすごく嬉しいです!応援してます!

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

    本当に助かります。
    しまぶーさんのおかげで効率的にhtmlを学習できました。

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

      良かったです!実はこれからHTMLとCSSの応用実践講座も考えているので、そちらも楽しみにしてください😊

  • @歌下手チャンネル-f7c
    @歌下手チャンネル-f7c 3 ปีที่แล้ว +1

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

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

    分かりやすい動画をありがとうございます。

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

    いつも励みになります。ありがとうございます。

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

      私もコメントにいつも励まされています。ありがとうございます。😂

  • @eu-qf9hm
    @eu-qf9hm 4 ปีที่แล้ว +2

    HTML復習!!わかりやすいです!

  • @大城海斗-e8z
    @大城海斗-e8z 4 ปีที่แล้ว

    現在ドットインストールでHTML、CSSを学びました。
    復習を行いながらしまぶーさんの動画を拝見しています!
    とてもわりやすく新しく学べることも多いと感じました!
    次はCSSの動画で勉強してみます!!

  • @バナナオキ
    @バナナオキ 4 ปีที่แล้ว +3

    全4回見終わりました!
    わかりやすかったです!

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

      おおー良かったです😂
      あとは実際に書いてみることですね。アウトプットが成長に繋がります!
      またCSSも待っているので、そちらも勉強していきましょー!!🔥

  • @レトロのばやし
    @レトロのばやし 3 ปีที่แล้ว

    ちょっと自分で勉強してから見ないと分からないですね。
    勉強なりました!!!

  • @佐藤翔太-i2h
    @佐藤翔太-i2h 4 ปีที่แล้ว

    とてもわかりやすかったです!
    これからも参考にさせていただきます!

  • @瀧田佳一郎
    @瀧田佳一郎 4 ปีที่แล้ว

    プロゲートは勉強したものの、マークアップの構造をしっかり理解できていなかったので、すごく助かります🤲🤲

  • @叶さとう
    @叶さとう 4 ปีที่แล้ว +1

    とてもわかりやすい!
    ありがとうございます

  • @北斗拳四郎-m5m
    @北斗拳四郎-m5m 4 ปีที่แล้ว +1

    勉強になりました、ありがとうございます😊

  • @やまうみ-s5o
    @やまうみ-s5o 4 ปีที่แล้ว

    VSCodeをインストールして、動画見ながら一緒にマークアップしてみました!
    分かりやすくて、4回すべて一気見でした(笑)
    これからも見続けます!

  • @Galaxy-bx4hc
    @Galaxy-bx4hc 4 ปีที่แล้ว +3

    最近プログラミングをはじめました。まだ慣れていないので誤ってコードを消したりして全然進みませんww
    しかし、しまぶーさんの解説がすごく分かりやすく満足しています!これからも動画で独学しようと思っています!
    次の動画も楽しみにしています!

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

      最初は誰もがそんなもんです!笑
      私も動画を作り続けて、その独学のサポートができるように頑張ります
      一緒に頑張りましょうね👍

  • @logconsole-s2f
    @logconsole-s2f 4 ปีที่แล้ว +2

    vscodeにおけるショートカットキーなどの説明とても為になります😊😊

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

    今仕事で動きのあるサイト制作をしているのですが、基本をよくわからないまま何となくでやっていたのですごく助かります!わかりやすくて勉強になります。

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

    スプラプレイヤーだったとは!
    親近感湧きました!
    自分も頑張ります。

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

      ふふふ、オールXですよ😏
      一緒に頑張りましょう😊

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

      しまぶーのIT大学 でしたら対戦してるかもですね😤😤(笑)

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

      @@Haruhina_ そちらもオールXでしたか!対戦している可能性ありますね笑
      余裕ができたらゲーム実況もやりたいという夢はあります😂

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

      しまぶーのIT大学
      おー!楽しみにしています👍
      生放送から始めてみてはいかがですか?🙃

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

      @@Haruhina_ スプラ3が出たら絶対にやります!😊

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

    ◎第4回
    マークアップ
    よくあるブログのマークアップ
    ボディータグ
      ・header
    ・main
    ・footer
    ※アンスプラッシュのランダムイメージが
    おすすめ❗️

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

    しまぶーさんのプログラミング学習講座を一通り区切りがついたので全部やってみます。プロゲートやUdemyなどの動画教材でやった自分からすると補完機能の説明やリファレンスを使った説明はとても新鮮で良かったです。ひとつ気になった点は副タイトルっていうよりはサブタイトルのほうがきれいですね笑

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

      嬉しすぎる感想だ、いつも嬉しいコメントに励まされています😭
      > 副タイトルっていうよりはサブタイトルのほうがきれい
      これはたしかに・・・副タイトルってなんだ(^O^;)笑

  • @ka-ml3ve
    @ka-ml3ve 4 ปีที่แล้ว +1

    非常に勉強になりました。
    次の動画も楽しみにしています^ ^

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

    大変参考になります!教えて欲しいのですが、9:25でpタグの段落下げてるのはどうやってるのですか?

  • @user-wu8uw2nx8v
    @user-wu8uw2nx8v 4 ปีที่แล้ว +3

    【動画に関して】
    smallタグ初耳でした!
    分かり易かったです!👍
    【質問】
    50×50はアンスプラッシュ以外のimgでも使えますか?
    【要望】
    作るサイトの完成形を最初に見せてくれるとありがたいです。
    今回は簡単なサイトだったので良かったのですが全体像が分からないと何をしてるのかイメージしずらいかもです💦
    🙇‍♂️🙇‍♂️

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

      学びがあったようで何よりです!
      質問にお答えしますが、imgの記法は Unsplash 限定ですね。下記がサイトなのですが、詳しくいろいろ書かれているので、もしよければ見てみてください!
      source.unsplash.com/
      要望に関してですが、たしかに・・・!それは仰るとおりですね。学びになります。今後のプログラミング講座では先に全体像をお伝えしますね。有益なアドバイスをありがとうございます!🙇‍♀️🙇‍♂️

  • @eu-qf9hm
    @eu-qf9hm 4 ปีที่แล้ว +1

    Lorem便利ですね!勉強になりました!

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

      Loremみたいな、こういう豆知識も出していきますよー✨

  • @プログラミングの勉強してる姿を配
    @プログラミングの勉強してる姿を配 2 ปีที่แล้ว +3

    HTMLの勉強始めて一日目の初心者です勉強してるときに思ったんですけどなんかマトリョーシカみたいな感じですね!(笑)

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

    今まで見た動画のなかで
    一番わかりやすかったです(^^)
    ありがとうございます✨

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

      うおーーーめちゃくちゃ高い評価で嬉しいです。動画作ってよかった😂😂
      CSSとJavaScript講座もやってるので、よければそちらもご覧ください!

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

    為になるぅ

  • @Rosemary_007
    @Rosemary_007 3 ปีที่แล้ว +2

    アラフィフですが、いまからプログラマーを目指すところまでの意気込みはまだありませんが、興味があるので、これから少しずつやってみようという気になりました!!!You Tube講座ありがとうございます( ;∀;)

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

    情報ありがとうございます😸
    あっという間に完成した😳
    ダミー文章何のためにあるんだろう🤔

  • @宮下寛太-x5n
    @宮下寛太-x5n 4 ปีที่แล้ว +1

    わかりやすく教えてくださりありがとうございます!
    一点質問がございます。9:26で行の頭を一瞬でそろえていたのですが、あれはどのように範囲選択されたのでしょうか?
    本動画の趣旨とそれた質問で申し訳ありません。。。

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

      私もそこが気になりました。教えて欲しいです!!

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

    他の方のススメでしまぶーさんの名前を耳にしたので視聴させて頂いたのですが、説明の発音などもハキハキしてとても聞きやすく、都度MDNでタグの意味も説明してくれたりと、勧められた意味が分かる動画でした。
    もし差し支えなければ教えて頂きたいのですが、この動画の初めにムー?という課金アプリの事を少し口にされていましたが、そのアプリについて知りたいので良ければ返信頂けるか、URLだけでも教えて頂けると幸いです。

  • @寝癖さん
    @寝癖さん 4 ปีที่แล้ว +2

    初心者HTML/CSS 本買って、一週間勉強してみたけど、情報古いし、そもそもエディターがVS Codeじゃなかったりとかで最初からこの動画見たほうが絶対よかった!
    ありがとうございます!!!

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

      本あるあるですね(笑)本を買うにしても中身を見てから、かつ出版日が近いものを選ぶようにしてください!😁

  • @Stone-Henge
    @Stone-Henge 4 ปีที่แล้ว

    初めまして。このチャンネルに出会ってからプログラミングの勉強を始めました。
    質問なのですが、ulとlistタグを書いた際に、しまぶーさんの画面では縦表示になっていたものが、私の画面では「ホーム ブログ アバウト」のように、横に一直線に並んでしまいました。何がいけなかったのでしょうか。使っているOSはwindowsでブラウザはChrome、コードはそっくり真似て書いています。

  • @GASSY-hr4xk
    @GASSY-hr4xk 4 ปีที่แล้ว +1

    いつもわかりやすい動画ありがとうございます!
    タグの基本的な理解や、Lorem、unsprash/random/50x50などのテクニックも非常にありがたかったです。
    今回しまぶーさんのコーディングをみてまして、vs codeの仕様が私と違うと感じました。
    インデント幅ですが、デフォルトで4に設定されているのでしょうか?
    すごく見やすいなと感じまして私もやってみました。
    一般的にプロは4でされるのか、あるいは好みだったりするのでしょうか。
    お忙しいところ恐れ入りますが、ご教示頂けますと幸いです。
    可読性の重要性はわかるのですが、どのようにすれば可読性がよくなるのか、
    プロのちょっとしたリファクタリングテクニックやvsコードの設定テクニックなど、
    すごく興味があるのでいつか動画にしていただけたら嬉しいです。
    是非ご検討お願いします^^

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

      VS Codeのインデントは動画で4になっちゃってますね。私は業務では基本的に2にしています。ちなみにタブではなくスペースです。チームによって異なるものの私が今まで携わったプロジェクトはほとんどスペース2幅でしたね。
      あとVS Codeは動画用にめちゃくちゃ拡大しているので、それで見やすいというのもあるかも!?(^O^;)笑
      ちなみにそういった細かい部分の設定ですが、基本的にはPrettierに任せるのが最近ではベストプラクティスとされています。人間がそういうのを設定する時代は終わりを告げました(笑)フロントエンド関係ではほとんどのプロジェクトで導入されています。下記動画で解説しているので、まずはHTMLとCSSの前にPrettierを導入すると便利かもしれません!
      th-cam.com/video/zoaIv5ifoPI/w-d-xo.html
      ぜひ参考に!

    • @GASSY-hr4xk
      @GASSY-hr4xk 4 ปีที่แล้ว +1

      しまぶーさん、いつも返信ありがとうございます!
      なんと・・・^^;
      ベストプラクティス、設定してくれるのですね。動画見ます!

  • @ゲームモンスト-f4r
    @ゲームモンスト-f4r 3 ปีที่แล้ว

    大学でプログラミングを習っていて、すごくわかりやすかったです!!
    htmlで作ったプログラムを実際に検索(ほかの端末などで)できるようにするにはどうすればよいのでしょうか?

  • @ディーちゃんロハンくん
    @ディーちゃんロハンくん 4 ปีที่แล้ว

    いつもありがとうございます!動画楽しませてもらっています。
    タグってemmetで出てきますか?
    7:50~のところです。

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

    Codeは何のソフトをしようしていますか?

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

    しまぶーさんの動画わかりやすいです。
    有料でもいいので
    オンラインサロンとか
    開かれないんですか?
    是非、やって欲しいです🙇‍♂️

  • @やまもと-z3j
    @やまもと-z3j 4 ปีที่แล้ว

    ブラウザによって差異があるときの解決策を教えてもらいたいです

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

    アンスプラッシュのランダム表示なのですが、自分のパソコンからはうまく表示できるのですが、他人のパソコンから見ると表示されなくなってしまいます😭😭

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

    こりゃモテるわ👍

  • @ふくまろ-k9t
    @ふくまろ-k9t 4 ปีที่แล้ว +1

    しまぶーさんいつも動画見ております。4:21のところで、ulのつぎに>を打つと自動的にulの閉じタグが作られてしまうのですがどうしたらいいのでしょうか?

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

      ありがとうございます!
      下記ご確認ください!
      正: ul>li*3
      誤: li*3
      誤の方は、最初に < をつけてしまっています。こちらは不要です!

    • @ふくまろ-k9t
      @ふくまろ-k9t 4 ปีที่แล้ว

      しまぶーのIT大学 今気づきました…!恐縮です。ありがとうございます!yahoo入れるようにがんばってます(^^)

  • @たくぞう-i7v
    @たくぞう-i7v 3 ปีที่แล้ว

    すみません。
    左の縦のラインを合わせるやり方ってどうすれば宜しいでしょうか。

  • @高本-x9d
    @高本-x9d 4 ปีที่แล้ว +1

    cssとjavascriptの講座楽しみにしています

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

      CSSは既にやっていて、めちゃくちゃ詳しく解説しています(自画自賛)
      JavaScriptも頑張って良い講座を作りますのでお楽しみに😁

  • @レオンレオン-u6p
    @レオンレオン-u6p 2 ปีที่แล้ว

    body 以外になにか書いても反映されます結局bodyってなんのいみがあるんですか?

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

    動画タメになりました!!
    1点教えていただきたいのですが、unsplashから引っ張ってきた画像が更新するとなかなか表示されません。
    なぜでしょうか、、、

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

    h1タグ と divタグの違いはなんですか?

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

      ただしくマークアップできているとSEO上、評価されます!👍👍

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

    1週目

  • @mo-ks3ef
    @mo-ks3ef 4 ปีที่แล้ว

    HTMLをいじらずにサイトを作るツールがwordpressなの?

  • @かきくけこ-y6v
    @かきくけこ-y6v 4 ปีที่แล้ว +1

    すみません。
    timeタグってどこから引っ張ってきました?
    リンク張ってもらえると嬉しいです。

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

      timeタグのリファレンスです↓
      developer.mozilla.org/ja/docs/Web/HTML/Element/time

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

    すみません。2画面にするアプリの正式名称を教えて頂けませんでしょうか

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

      こちらです!😊
      manytricks.com/moom/

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

      しまぶーのIT大学 早速の御返事誠にありがとうございます! 動画いつも心待ちにしております!!!

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

      @@vintagecafe4540 ありがとうございます。これからも動画たくさん発信していきますねー!👍

  • @まるお-v9d
    @まるお-v9d 4 ปีที่แล้ว +1

    すいません。9:05の所の、文章をそのまま下に複製するショートカット教えてください。

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

      Command + C でコピーをして
      Commnad + V で貼り付けているだけですよ!👍

    • @まるお-v9d
      @まるお-v9d 4 ปีที่แล้ว +1

      しまぶーのIT大学 あ、そうだったんですね!ありがとうございます!!めちゃくちゃ高速でやってたから別のやり方があるのかな?と思ってしまいました笑

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

      複数行コピーしたのをペーストしまくった感じです笑
      早くやりすぎちゃいました(^O^;)

    • @まるお-v9d
      @まるお-v9d 4 ปีที่แล้ว +1

      しまぶーのIT大学 そうなんですね!!ありがとうございます!

  • @あーゴリゴリ
    @あーゴリゴリ 3 ปีที่แล้ว +1

    ヘッダー=サイトタイトル ロゴ
    メイン=内容 
    フッター=著作権

  • @ひろ-r8h3o
    @ひろ-r8h3o 4 ปีที่แล้ว +2

    動画を見れば低評価ゼロなのも納得です😆

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

      ほんとだ・・・!!嬉しすぎる🤣

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

    プロゲートで一通り勉強したけど、全体像を把握するのにはこちらの動画が一番わかりやすかったです!
    何より今の時点で低評価「0」というのが物語っていますね^^

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

      HTMLだけじゃなくJavaScriptまでやってみてくださいね!
      そちらも全体像を把握するのに便利な講座を出しているので👍

  • @j.whorizon9786
    @j.whorizon9786 4 ปีที่แล้ว

    HTML編はあっさり終わったようですが、ブロック要素とインライン要素の説明ぐらいはしといた方がよかったのではないでしょうか。

  • @切り抜きチャンネル-f2r
    @切り抜きチャンネル-f2r 4 ปีที่แล้ว +3

    すごい勉強になります。ありがとうございます。