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

Подписаться 118 тыс.

Просмотров 93 тыс.

50% 1

文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
📙 もくじ
0:00 準備
1:00 マークアップするものを説明
1:26 header, main, footerの準備
1:46 header スタート
2:20 Unsplash Sourceの紹介
3:53 navタグ解説
5:13 main スタート
5:35 articleタグ解説
7:00 h1タグを複数使うことについて
7:52 timeタグ解説
8:41 ダミー文章 Lorem... の紹介
9:36 footer スタート
9:48 smallタグ解説
10:28 まとめ
🚀 今日のひとこと
ちゃんと学ぶHTMLの第4回目で、
今回は実際にマークアップをします！
今まで学んだレッスンの集大成的な動画になります。
HTMLの初心者・入門者向けの基礎講座はこれで終了で、
今後はCSS講座、JavaScript講座を考えています。
🔥 基礎から学ぶ HTML入門講座
【第1回】タグの要素を理解してコーディングしよう！
• 【HTML #1】基礎からちゃんと学ぶ HT...
【第2回】タグの属性について学ぼう！
• 【HTML #2】基礎からちゃんと学ぶ HT...
【第3回】ブラウザによる差異について学習しよう！
• 【HTML #3】基礎からちゃんと学ぶ HT...
👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#HTML #HTML入門 #プログラミング講座

Хобби

Опубликовано:

26 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@taekwondoyuzu-sato5332 4 года назад

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

@tokumeiryo 3 года назад

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

@user-eh2yl2qi6p 3 года назад

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

@eu-qf9hm 3 года назад

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

@user-gk5vk3fi3x 4 года назад

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

@ka-ml3ve 4 года назад

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

@user-el9eg9rh9j 4 года назад

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

@user-ld6ge7hc1e 4 года назад

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

@Ikattyo 3 года назад

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

@user-wp6uu2bs7f 4 года назад

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

@kamo4071 2 года назад

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

@user-cu5sp9lj2n 4 года назад

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

@shimabu_it 4 года назад

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

@user-qj5em2fq5v 4 года назад

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

@nyantaroutonyanko 4 года назад

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

@user-cf7mh1nw4h 4 года назад

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

@shimabu_it 4 года назад

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

@ddd4483 3 года назад

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

@10itinput10 Год назад

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

@user-uw7it8lt6k 3 года назад

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

@user-ox7ho7ku9f 4 года назад

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

@user-rx4vt8bs5i 3 года назад

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

@Sou_mamodan Год назад

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

@user-hc5mu7sd4u 3 года назад

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

@user-iu2mz2mq6n 4 года назад

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

@totopika 4 года назад

為になるぅ

@u4k5rose 4 года назад

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

@user-qt7tr3cz3k 2 года назад

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

@yuichisawabe3375 4 года назад

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

@shimabu_it 4 года назад

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

@megumisuzuki1319 4 года назад

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

@shimabu_it 4 года назад

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

@Galaxy-bx4hc 4 года назад

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

@shimabu_it 4 года назад

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

@yuuttana1223 4 года назад

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

@shimabu_it 4 года назад

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

@user-cq9jp9uk6b Год назад

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

@harukame2971 2 года назад

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

@eu-qf9hm 3 года назад

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

@shimabu_it 3 года назад

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

@Edamame69 2 года назад

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

@GrandMaisonAnjo 4 года назад

こりゃモテるわ👍

@Haruhina_ 4 года назад

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

@shimabu_it 4 года назад

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

@Haruhina_ 4 года назад

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

@shimabu_it 4 года назад

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

@Haruhina_ 4 года назад

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

@shimabu_it 4 года назад

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

@ikkyu5295 3 года назад

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

@user-wu8uw2nx8v 4 года назад

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

@shimabu_it 4 года назад

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

@user-ek8sc4ro1s 3 года назад

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

@user-ku8lu5dm5l 3 года назад

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

@snowlight6578 4 года назад

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

@Rosemary_007 2 года назад

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

@user-ff1ui8om2l 4 года назад

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

@user-ok3xd3lf6y 4 года назад

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

@shimabu_it 4 года назад

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

@user-vo2kk2ir7s 2 года назад

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

@user-xr1gz4yp9q 4 года назад

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

@shimabu_it 4 года назад

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

@user-mm4we4pt2b 4 года назад

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

@GASSY-hr4xk 4 года назад

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

@shimabu_it 4 года назад

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

@GASSY-hr4xk 4 года назад

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

@slaimu071201 2 года назад

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

@user-kq8tb1gm8t 4 года назад

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

@popopo6108 2 года назад

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

@kazumaxroutine 4 года назад

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

@ibis5855 3 года назад

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

@Stone-Henge 3 года назад

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