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

Тәжірибелік нұсқаулар және стиль

文系プログラミング未経験 → 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入門 #プログラミング講座

Пікірлер: 100

  • @Ikattyo
    @Ikattyo3 жыл бұрын

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

  • @user-el9eg9rh9j
    @user-el9eg9rh9j4 жыл бұрын

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

  • @user-eh2yl2qi6p
    @user-eh2yl2qi6p3 жыл бұрын

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

  • @user-gk5vk3fi3x
    @user-gk5vk3fi3x4 жыл бұрын

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

  • @kamo4071
    @kamo40712 жыл бұрын

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

  • @eu-qf9hm
    @eu-qf9hm3 жыл бұрын

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

  • @10itinput10
    @10itinput10 Жыл бұрын

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

  • @user-ld6ge7hc1e
    @user-ld6ge7hc1e4 жыл бұрын

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

  • @tokumeiryo
    @tokumeiryo3 жыл бұрын

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

  • @taekwondoyuzu-sato5332
    @taekwondoyuzu-sato53324 жыл бұрын

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

  • @ddd4483
    @ddd44833 жыл бұрын

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

  • @ka-ml3ve
    @ka-ml3ve4 жыл бұрын

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

  • @user-hc5mu7sd4u
    @user-hc5mu7sd4u3 жыл бұрын

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

  • @Sou_mamodan
    @Sou_mamodan Жыл бұрын

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

  • @nyantaroutonyanko
    @nyantaroutonyanko4 жыл бұрын

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

  • @user-wp6uu2bs7f
    @user-wp6uu2bs7f4 жыл бұрын

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

  • @user-cf7mh1nw4h
    @user-cf7mh1nw4h4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-qj5em2fq5v
    @user-qj5em2fq5v4 жыл бұрын

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

  • @user-cu5sp9lj2n
    @user-cu5sp9lj2n4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-uw7it8lt6k
    @user-uw7it8lt6k3 жыл бұрын

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

  • @megumisuzuki1319
    @megumisuzuki13194 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-rx4vt8bs5i
    @user-rx4vt8bs5i3 жыл бұрын

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

  • @user-iu2mz2mq6n
    @user-iu2mz2mq6n4 жыл бұрын

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

  • @user-ox7ho7ku9f
    @user-ox7ho7ku9f4 жыл бұрын

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

  • @user-qt7tr3cz3k
    @user-qt7tr3cz3k2 жыл бұрын

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

  • @Edamame69
    @Edamame692 жыл бұрын

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

  • @user-cq9jp9uk6b
    @user-cq9jp9uk6b Жыл бұрын

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

  • @u4k5rose
    @u4k5rose4 жыл бұрын

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

  • @totopika
    @totopika4 жыл бұрын

    為になるぅ

  • @harukame2971
    @harukame29712 жыл бұрын

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

  • @yuichisawabe3375
    @yuichisawabe33754 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @Galaxy-bx4hc
    @Galaxy-bx4hc4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @slaimu071201
    @slaimu0712012 жыл бұрын

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

  • @yuuttana1223
    @yuuttana12234 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @eu-qf9hm
    @eu-qf9hm3 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    3 жыл бұрын

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

  • @user-vo2kk2ir7s
    @user-vo2kk2ir7s2 жыл бұрын

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

  • @GrandMaisonAnjo
    @GrandMaisonAnjo4 жыл бұрын

    こりゃモテるわ👍

  • @Haruhina_
    @Haruhina_4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @Haruhina_

    @Haruhina_

    4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @Haruhina_

    @Haruhina_

    4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @snowlight6578
    @snowlight65784 жыл бұрын

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

  • @user-wu8uw2nx8v
    @user-wu8uw2nx8v4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @ikkyu5295
    @ikkyu52953 жыл бұрын

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

  • @user-mm4we4pt2b
    @user-mm4we4pt2b4 жыл бұрын

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

  • @user-ku8lu5dm5l
    @user-ku8lu5dm5l3 жыл бұрын

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

  • @user-ek8sc4ro1s
    @user-ek8sc4ro1s3 жыл бұрын

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

  • @user-xr1gz4yp9q
    @user-xr1gz4yp9q4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-ok3xd3lf6y
    @user-ok3xd3lf6y4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @Stone-Henge
    @Stone-Henge3 жыл бұрын

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

  • @user-ff1ui8om2l
    @user-ff1ui8om2l4 жыл бұрын

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

  • @Rosemary_007
    @Rosemary_0072 жыл бұрын

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

  • @kazumaxroutine
    @kazumaxroutine4 жыл бұрын

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

  • @GASSY-hr4xk
    @GASSY-hr4xk4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @GASSY-hr4xk

    @GASSY-hr4xk

    4 жыл бұрын

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

  • @user-kq8tb1gm8t
    @user-kq8tb1gm8t4 жыл бұрын

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

  • @popopo6108

    @popopo6108

    2 жыл бұрын

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

  • @ibis5855
    @ibis58553 жыл бұрын

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

  • @sho_3321
    @sho_33213 жыл бұрын

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

  • @tanishibu6993
    @tanishibu69933 жыл бұрын

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

  • @user-ym5xt7ot5i
    @user-ym5xt7ot5i3 жыл бұрын

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

  • @kumikobaba1527
    @kumikobaba15272 жыл бұрын

    1週目

  • @user-fv4no4cv2v
    @user-fv4no4cv2v4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-fv4no4cv2v

    @user-fv4no4cv2v

    4 жыл бұрын

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

  • @user-st7fm5tt3r
    @user-st7fm5tt3r2 жыл бұрын

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

  • @user-vi3cr2xq8u
    @user-vi3cr2xq8u4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-dh8gc7gj9d
    @user-dh8gc7gj9d4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-dh8gc7gj9d

    @user-dh8gc7gj9d

    4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @user-dh8gc7gj9d

    @user-dh8gc7gj9d

    4 жыл бұрын

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

  • @user-nq7xp1rc9x
    @user-nq7xp1rc9x3 жыл бұрын

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

  • @kyleetuyosi9852
    @kyleetuyosi98524 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @mo-ks3ef
    @mo-ks3ef3 жыл бұрын

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

  • @vintagecafe4540
    @vintagecafe45404 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @vintagecafe4540

    @vintagecafe4540

    4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @ryu8084
    @ryu80842 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    2 жыл бұрын

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

  • @user-xp1iv6vd8q
    @user-xp1iv6vd8q4 жыл бұрын

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

  • @shimabu_it

    @shimabu_it

    4 жыл бұрын

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

  • @j.whorizon9786
    @j.whorizon97864 жыл бұрын

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

Келесі