【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
基礎の基礎がめちゃくちゃわかりやすいです。助かります。
ちょうどプログラミング勉強しようと思ってたさながら発見しました! すごく分かりやすいです。今後も更新して頂けるとすごく嬉しいです!応援してます!
とてもわかりやすかったです! これからも参考にさせていただきます!
すごい勉強になります。ありがとうございます。
最後まで物凄くわかりやすかったです!WordPress初心者に刺さる内容でした!
HTML復習!!わかりやすいです!
今回もとてもわかりやすかったです!シリーズ通して色々と勉強になりました〜👍
とてもわかりやすい! ありがとうございます
HTMLを勉強して総復習として視聴させていただいています。 凄くシンプルで分かりやすく、初めにこの動画観てから勉強すれば良かったと思ったほどです。 他の講座の動画も楽しみにしております。
とてもわかりやすいです。コードを打ちながら滑舌よくどもることもなく整理された解説をされていてすごいなと思います。かっこいいです。そういう姿も目標になりますし憧れます。ありがとうございます!
分かりやすい動画をありがとうございます。
非常に勉強になりました。 次の動画も楽しみにしています^ ^
すごく見やすいです。ありがとうございます。
わかりやすい講座を感謝します!
本では理解が難しい箇所が 動画ですごく分かりやすく解説される のでとても為になります ありがとうございます
現在ドットインストールでHTML、CSSを学びました。 復習を行いながらしまぶーさんの動画を拝見しています! とてもわりやすく新しく学べることも多いと感じました! 次はCSSの動画で勉強してみます!!
本当に助かります。 しまぶーさんのおかげで効率的にhtmlを学習できました。
@shimabu_it
4 жыл бұрын
良かったです!実はこれからHTMLとCSSの応用実践講座も考えているので、そちらも楽しみにしてください😊
プロゲートは勉強したものの、マークアップの構造をしっかり理解できていなかったので、すごく助かります🤲🤲
全4回見終わりました! わかりやすかったです!
@shimabu_it
4 жыл бұрын
おおー良かったです😂 あとは実際に書いてみることですね。アウトプットが成長に繋がります! またCSSも待っているので、そちらも勉強していきましょー!!🔥
勉強になりました、ありがとうございます😊
いつも励みになります。ありがとうございます。
@shimabu_it
4 жыл бұрын
私もコメントにいつも励まされています。ありがとうございます。😂
ちょっと自分で勉強してから見ないと分からないですね。 勉強なりました!!!
vscodeにおけるショートカットキーなどの説明とても為になります😊😊
VSCodeをインストールして、動画見ながら一緒にマークアップしてみました! 分かりやすくて、4回すべて一気見でした(笑) これからも見続けます!
視聴させていただきました、この動画を見て、自分でもHTMLが書ける気がしてきました!
これです!htmlを学んでも、コードをどのように打っていくのか?? こーいったプチ実践的にしてくれるサイトは初めて見ました。 このタグは、こーいう風にどこに使う…など、とても分かり易かったです。 動画を観ないでもコードが打てるようになっただけで、とても自信がつきました。 実際はもっともっと複雑なコードだとは思いますが、この一連の流れが基礎なのだと思いました。 こんな感じで、習ったことを少しずつアウトプットしていき、レベルアップしていけたらなぁ、と 思っています。
イケメンさんに丁寧に教えてもらってうれしいです😂
今仕事で動きのあるサイト制作をしているのですが、基本をよくわからないまま何となくでやっていたのですごく助かります!わかりやすくて勉強になります。
為になるぅ
一通り手順などは無視してサイトを作成することは出来ていましたが、の一気表示や、Loremの使用など初めて習うことが多くて、とても参考になりました。ありがとうございます。
今まで見た動画のなかで 一番わかりやすかったです(^^) ありがとうございます✨
@shimabu_it
4 жыл бұрын
うおーーーめちゃくちゃ高い評価で嬉しいです。動画作ってよかった😂😂 CSSとJavaScript講座もやってるので、よければそちらもご覧ください!
最近プログラミングをはじめました。まだ慣れていないので誤ってコードを消したりして全然進みませんww しかし、しまぶーさんの解説がすごく分かりやすく満足しています!これからも動画で独学しようと思っています! 次の動画も楽しみにしています!
@shimabu_it
4 жыл бұрын
最初は誰もがそんなもんです!笑 私も動画を作り続けて、その独学のサポートができるように頑張ります 一緒に頑張りましょうね👍
◎第4回 マークアップ よくあるブログのマークアップ ボディータグ ・header ・main ・footer ※アンスプラッシュのランダムイメージが おすすめ❗️
しまぶーさんのプログラミング学習講座を一通り区切りがついたので全部やってみます。プロゲートやUdemyなどの動画教材でやった自分からすると補完機能の説明やリファレンスを使った説明はとても新鮮で良かったです。ひとつ気になった点は副タイトルっていうよりはサブタイトルのほうがきれいですね笑
@shimabu_it
4 жыл бұрын
嬉しすぎる感想だ、いつも嬉しいコメントに励まされています😭 > 副タイトルっていうよりはサブタイトルのほうがきれい これはたしかに・・・副タイトルってなんだ(^O^;)笑
Lorem便利ですね!勉強になりました!
@shimabu_it
3 жыл бұрын
Loremみたいな、こういう豆知識も出していきますよー✨
HTMLの勉強始めて一日目の初心者です勉強してるときに思ったんですけどなんかマトリョーシカみたいな感じですね!(笑)
こりゃモテるわ👍
スプラプレイヤーだったとは! 親近感湧きました! 自分も頑張ります。
@shimabu_it
4 жыл бұрын
ふふふ、オールXですよ😏 一緒に頑張りましょう😊
@Haruhina_
4 жыл бұрын
しまぶーのIT大学 でしたら対戦してるかもですね😤😤(笑)
@shimabu_it
4 жыл бұрын
@@Haruhina_ そちらもオールXでしたか!対戦している可能性ありますね笑 余裕ができたらゲーム実況もやりたいという夢はあります😂
@Haruhina_
4 жыл бұрын
しまぶーのIT大学 おー!楽しみにしています👍 生放送から始めてみてはいかがですか?🙃
@shimabu_it
4 жыл бұрын
@@Haruhina_ スプラ3が出たら絶対にやります!😊
大変参考になります!教えて欲しいのですが、9:25でpタグの段落下げてるのはどうやってるのですか?
【動画に関して】 smallタグ初耳でした! 分かり易かったです!👍 【質問】 50×50はアンスプラッシュ以外のimgでも使えますか? 【要望】 作るサイトの完成形を最初に見せてくれるとありがたいです。 今回は簡単なサイトだったので良かったのですが全体像が分からないと何をしてるのかイメージしずらいかもです💦 🙇♂️🙇♂️
@shimabu_it
4 жыл бұрын
学びがあったようで何よりです! 質問にお答えしますが、imgの記法は Unsplash 限定ですね。下記がサイトなのですが、詳しくいろいろ書かれているので、もしよければ見てみてください! source.unsplash.com/ 要望に関してですが、たしかに・・・!それは仰るとおりですね。学びになります。今後のプログラミング講座では先に全体像をお伝えしますね。有益なアドバイスをありがとうございます!🙇♀️🙇♂️
情報ありがとうございます😸 あっという間に完成した😳 ダミー文章何のためにあるんだろう🤔
いつもありがとうございます!動画楽しませてもらっています。 タグってemmetで出てきますか? ※7:50~のところです。
大学でプログラミングを習っていて、すごくわかりやすかったです!! htmlで作ったプログラムを実際に検索(ほかの端末などで)できるようにするにはどうすればよいのでしょうか?
しまぶーさんの動画わかりやすいです。 有料でもいいので オンラインサロンとか 開かれないんですか? 是非、やって欲しいです🙇♂️
初心者HTML/CSS 本買って、一週間勉強してみたけど、情報古いし、そもそもエディターがVS Codeじゃなかったりとかで最初からこの動画見たほうが絶対よかった! ありがとうございます!!!
@shimabu_it
4 жыл бұрын
本あるあるですね(笑)本を買うにしても中身を見てから、かつ出版日が近いものを選ぶようにしてください!😁
cssとjavascriptの講座楽しみにしています
@shimabu_it
4 жыл бұрын
CSSは既にやっていて、めちゃくちゃ詳しく解説しています(自画自賛) JavaScriptも頑張って良い講座を作りますのでお楽しみに😁
初めまして。このチャンネルに出会ってからプログラミングの勉強を始めました。 質問なのですが、ulとlistタグを書いた際に、しまぶーさんの画面では縦表示になっていたものが、私の画面では「ホーム ブログ アバウト」のように、横に一直線に並んでしまいました。何がいけなかったのでしょうか。使っているOSはwindowsでブラウザはChrome、コードはそっくり真似て書いています。
ブラウザによって差異があるときの解決策を教えてもらいたいです
アラフィフですが、いまからプログラマーを目指すところまでの意気込みはまだありませんが、興味があるので、これから少しずつやってみようという気になりました!!!You Tube講座ありがとうございます( ;∀;)
動画タメになりました!! 1点教えていただきたいのですが、unsplashから引っ張ってきた画像が更新するとなかなか表示されません。 なぜでしょうか、、、
いつもわかりやすい動画ありがとうございます! タグの基本的な理解や、Lorem、unsprash/random/50x50などのテクニックも非常にありがたかったです。 今回しまぶーさんのコーディングをみてまして、vs codeの仕様が私と違うと感じました。 インデント幅ですが、デフォルトで4に設定されているのでしょうか? すごく見やすいなと感じまして私もやってみました。 一般的にプロは4でされるのか、あるいは好みだったりするのでしょうか。 お忙しいところ恐れ入りますが、ご教示頂けますと幸いです。 可読性の重要性はわかるのですが、どのようにすれば可読性がよくなるのか、 プロのちょっとしたリファクタリングテクニックやvsコードの設定テクニックなど、 すごく興味があるのでいつか動画にしていただけたら嬉しいです。 是非ご検討お願いします^^
@shimabu_it
4 жыл бұрын
VS Codeのインデントは動画で4になっちゃってますね。私は業務では基本的に2にしています。ちなみにタブではなくスペースです。チームによって異なるものの私が今まで携わったプロジェクトはほとんどスペース2幅でしたね。 あとVS Codeは動画用にめちゃくちゃ拡大しているので、それで見やすいというのもあるかも!?(^O^;)笑 ちなみにそういった細かい部分の設定ですが、基本的にはPrettierに任せるのが最近ではベストプラクティスとされています。人間がそういうのを設定する時代は終わりを告げました(笑)フロントエンド関係ではほとんどのプロジェクトで導入されています。下記動画で解説しているので、まずはHTMLとCSSの前にPrettierを導入すると便利かもしれません! kzread.info/dash/bejne/rKOVq9humcnVgKw.html ぜひ参考に!
@GASSY-hr4xk
4 жыл бұрын
しまぶーさん、いつも返信ありがとうございます! なんと・・・^^; ベストプラクティス、設定してくれるのですね。動画見ます!
わかりやすく教えてくださりありがとうございます! 一点質問がございます。9:26で行の頭を一瞬でそろえていたのですが、あれはどのように範囲選択されたのでしょうか? 本動画の趣旨とそれた質問で申し訳ありません。。。
@popopo6108
2 жыл бұрын
私もそこが気になりました。教えて欲しいです!!
他の方のススメでしまぶーさんの名前を耳にしたので視聴させて頂いたのですが、説明の発音などもハキハキしてとても聞きやすく、都度MDNでタグの意味も説明してくれたりと、勧められた意味が分かる動画でした。 もし差し支えなければ教えて頂きたいのですが、この動画の初めにムー?という課金アプリの事を少し口にされていましたが、そのアプリについて知りたいので良ければ返信頂けるか、URLだけでも教えて頂けると幸いです。
Codeは何のソフトをしようしていますか?
アンスプラッシュのランダム表示なのですが、自分のパソコンからはうまく表示できるのですが、他人のパソコンから見ると表示されなくなってしまいます😭😭
すみません。 左の縦のラインを合わせるやり方ってどうすれば宜しいでしょうか。
1週目
しまぶーさんいつも動画見ております。4:21のところで、ulのつぎに>を打つと自動的にulの閉じタグが作られてしまうのですがどうしたらいいのでしょうか?
@shimabu_it
4 жыл бұрын
ありがとうございます! 下記ご確認ください! 正: ul>li*3 誤: li*3 誤の方は、最初に < をつけてしまっています。こちらは不要です!
@user-fv4no4cv2v
4 жыл бұрын
しまぶーのIT大学 今気づきました…!恐縮です。ありがとうございます!yahoo入れるようにがんばってます(^^)
body 以外になにか書いても反映されます結局bodyってなんのいみがあるんですか?
すみません。 timeタグってどこから引っ張ってきました? リンク張ってもらえると嬉しいです。
@shimabu_it
4 жыл бұрын
timeタグのリファレンスです↓ developer.mozilla.org/ja/docs/Web/HTML/Element/time
すいません。9:05の所の、文章をそのまま下に複製するショートカット教えてください。
@shimabu_it
4 жыл бұрын
Command + C でコピーをして Commnad + V で貼り付けているだけですよ!👍
@user-dh8gc7gj9d
4 жыл бұрын
しまぶーのIT大学 あ、そうだったんですね!ありがとうございます!!めちゃくちゃ高速でやってたから別のやり方があるのかな?と思ってしまいました笑
@shimabu_it
4 жыл бұрын
複数行コピーしたのをペーストしまくった感じです笑 早くやりすぎちゃいました(^O^;)
@user-dh8gc7gj9d
4 жыл бұрын
しまぶーのIT大学 そうなんですね!!ありがとうございます!
ヘッダー=サイトタイトル ロゴ メイン=内容 フッター=著作権
プロゲートで一通り勉強したけど、全体像を把握するのにはこちらの動画が一番わかりやすかったです! 何より今の時点で低評価「0」というのが物語っていますね^^
@shimabu_it
4 жыл бұрын
HTMLだけじゃなくJavaScriptまでやってみてくださいね! そちらも全体像を把握するのに便利な講座を出しているので👍
HTMLをいじらずにサイトを作るツールがwordpressなの?
すみません。2画面にするアプリの正式名称を教えて頂けませんでしょうか
@shimabu_it
4 жыл бұрын
こちらです!😊 manytricks.com/moom/
@vintagecafe4540
4 жыл бұрын
しまぶーのIT大学 早速の御返事誠にありがとうございます! 動画いつも心待ちにしております!!!
@shimabu_it
4 жыл бұрын
@@vintagecafe4540 ありがとうございます。これからも動画たくさん発信していきますねー!👍
h1タグ と divタグの違いはなんですか?
@shimabu_it
2 жыл бұрын
ただしくマークアップできているとSEO上、評価されます!👍👍
動画を見れば低評価ゼロなのも納得です😆
@shimabu_it
4 жыл бұрын
ほんとだ・・・!!嬉しすぎる🤣
HTML編はあっさり終わったようですが、ブロック要素とインライン要素の説明ぐらいはしといた方がよかったのではないでしょうか。