【HTML #1】基礎からちゃんと学ぶ HTML 入門！タグの要素を理解してコーディングしよう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
HTML-код
- Опубликовано: 3 авг 2024
- 文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
📙 もくじ
0:00 プロジェクトの作成〜HTMLの雛形を準備
2:01 Visual Studio Codeの設定変更
3:48 HTMLのリファレンス（MDN）を紹介
5:21 HTMLの要素一覧
6:48 html, head, bodyタグの解説
9:06 正しいマークアップをしていこう
10:41 Googleのクローラーについて
12:09 header, mainタグの解説
13:12 そのタグでしか出来ないこともある
15:06 まとめ
🔥 基礎から学ぶ HTML入門講座
【第2回】タグの属性について学ぼう！
• 【HTML #2】基礎からちゃんと学ぶ HT...
【第3回】ブラウザによる差異について学習しよう！
• 【HTML #3】基礎からちゃんと学ぶ HT...
【第4回】実際にマークアップしよう！
• 【HTML #4】基礎からちゃんと学ぶ HT...
🔥 その他オススメの動画
【プログラミング講座】
HTML、CSS，JavaScriptの関係性を解説！エンジニア初心者や入門者にオススメ！
• 【プログラミング講座】HTML、CSS，Ja...
【GitHubの使い方入門】
GitHub Pagesを使って世界中にサイトを公開しよう！アウトプットこそ学びだ！
• 【GitHubの使い方入門】GitHub P...
🚀 今日のひとこと
HTMLの基礎について解説します。
コーディングを学びたい初心者・入門者向け講座です。
これから4回に分けて勉強していきます。
チュートリアル（Tutorial）としてお使いください。
HTMLが完璧になったらその次はCSSですね！
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#HTML #HTML入門 #プログラミング講座 
Хобби
![Jordan Adetunji - KEHLANI REMIX (feat. Kehlani) [Official Video]](http://i.ytimg.com/vi/EeJ8n5PxFGE/mqdefault.jpg)
最近始めたばかりでとても分かりやすくて助かってます！！
おかげで楽しみな気分で勉強できています。ありがとうございます。
分かりやすすぎて話し方も声も聞きやすくてとってもありがたいです☺️これからオープン系全体的に学習させていただきます。
情報学部生です。これから頑張りたいと思っていたのでありがたいです。とてもわかりやすくて今後の動画も楽しみです！
めちゃくちゃ初心者やけど、言うとおりにそのまま進めてたらちゃんと出来た
感動
自分で作業しながら出来るのええわ〜
ものすごく分かりやすい！
起業してお忙しい中ありがたい。
素晴らしい動画です。
私の未来に光が見えました。
感謝いたします。
マークアップの意味を理解してなかったので、なるほどなるほどと楽しかったです！ありがとうございます！
一番初めに動画見た時は速すぎて何言ってるかわからなかったけど、ドットインストールで学習してから見るとめっちゃすんなり理解できる。
めちゃくちゃ面白いです！！
勉強させていただきます
私はHTML→CSS→JavaScriptの順番をオススメしています！
一緒に勉強していきましょー！！🤝
大手のオンライン授業で習ってますが、全然意味もわからず説明も下手くそで困っていました。しまぶーさんの教え方が上手すぎてこっちで勉強させていただきます。ありがとうございます。
htmlもjavascriptも仕事で使うのですが基礎がなっていないのでとりあえず検索するからはじめていましたが何から手をつけていいかわからない状態でした。ですがこの動画をみてとても説明がわかりやすくてまずはこの動画を頭に叩き込みます！ありがとうございます！
ドットインストールでHTMLの基本文法を軽く学習してからこれを見るとかなり定着しそう！
説明が上手すぎる。
感謝です😌
プログラミング初心者です。
とてもわかり易かったです。ありがとうございました。
プログラミングを始めようと思っている大学生です。
ドットインストールの代わりに使おうと思います！
素晴らしい動画を
ありがとうございます！！
頑張ります。感謝
テックアカデミーのフロントエンドコースで速攻つまづいていたので、助かります！ありがとうございます！
これが、無料！？本当に感謝です。これからもたくさん見て活用させてください！
分かりやすい。ありがとうございます
そう言ってくださって嬉しいです。ありがとうございます😆
神コンテンツ。ホントにありがとうございます！
めっちゃ分かりやすし、めっちゃイケメンですね☺️また楽しみにしてます❗️
物凄く分かりやすくて震えました！
口をあけてポケーと聞いているだけでも理解できるので物凄く楽でした！有難うございます！
分かりやすいご説明有難うございます。
ドットインストールで一度学習してからこちらの動画を見るとスムーズに内容が入ってきました。
別の動画も見させていただきます！
めちゃくちゃわかりやすいです。
本当にありがとうございます。
勉強になります。
ありがとう！！ こんな講座動画を待っていました。すごくシンプルで知りたいところが知ることができる。小学生の子供に教えたいので、私がまず覚えたい、というか、昔はflashとかドリームウエーバーとか使って仕事している時があったので、タグの書き方とかやりたいな、と思って。
ありがとうございます😆
毎度お世話になります！
こちらこそ見てくださって嬉しいです😊
最近転職してフロント系の仕事を始めたので、とても参考になりました。
転職おめでとうございます！！🎉
参考にしてくださったようで私もたいへん嬉しいです！
フロントエンド系で少しでもお役に立てるような動画を出していきますね。
ぜひぜひお時間のあるときに興味がある動画があればご覧ください✌✨
コロナで週5休みになったので、ポジティブにプログラミング始めました！RUclipsで100時間勉強blogをやります！
すごくわかりやすい
情報ありがとうございます😸
あんなにいっぱい
言語あるんだー😳
ありがとうございます。
とてもわかりやすくて助かります。どうもありがとうございます。
質問です。11分20秒辺りで、開始タグと終了タグをまとめて選択し、修正されていますが、そういうショートカットがあるのでしょうか？option+Dとも違うのかなと思っています。
Thanks for this video
最近SEOについて勉強してたら
HTMLタグの構造がめっちゃ大切やって思った。
SEOを勉強する前は全部でよくねって思ってた頃の自分に教えてあげたいくらい。
ってあくまで装飾用のタグなんよね？
div は基本は装飾用のタグですね。MDNリファレンス
developer.mozilla.org/ja/docs/Web/HTML/Element/div
> class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
たまに国際化対応のため、という感じですが、ほぼ100%スタイル付け用途かと思われます。
SEOもまた深いんですよね。実はSEOもめちゃくちゃ強いので、その講座もやりたい・・・けど当分はJavaScript講座でできません・・・(^O^;)
でよくね←凄い分かる。
少しだけ分かりました、もっと勉強します
現在ドットインストールがDos攻撃受けたとかでアクセスできない中、こんな有益な動画ありがたいです！
おお、そんなことが・・・
今見たら復旧していたようで一安心😄
最初にtestと出ないどころかタイトルがindex.htmlと表示され白紙状態にしかなりません。Google Chrome、visual studio code 2を使用してます
質問です。ゲストブラウザーでブラウジング中という画面にはどうやってアクセスするのでしょうか？
エディタはEclipseでも良いのですか？
Eclipseとvscodeはどう違いますか？
質問させてください。1分50秒くらいで「保存をして」と言ってますが、どのように保存するんですか?
Google Chromeのタブに移しても「test」が反映されなくて困ってます
転職でヤフーを目指していますが、やっておいた方が良いこととかありましたら教えてください！プログラミングはしたことがなく、しまぶーさんのIT大学で勉強している段階です。JSで苦戦中です😭
ctrl+sで保存ができる。ページに反映するには保存することが必要。
初心者ですが、ブラウザとエディターはどうやって動画のように並べて表示するのですか？
しまぶーさんのhtml学習サイトのおすすめ教えて！！
全体像が分かりました。
検索エンジンに何が書いてあるのか知らせるためにタグを使う。
見た目はCSSであくまでやる。
次の講座も楽しみにしています。
ウィンドウズ11のサーフェスのパソコンを使っているのですが、！を出力した時のコードが若干違っていたり、GoogleChromeにファイルをコピーしても何も出てきません。
なぜなのでしょうか？
グーグルにとべただけだけど、なんか感動した
エミットをした時の感動感w
Buen video
いつもわかりやすい動画ありがとうございます！
スクールでHTML、erb、HAMLを学びまして、私はHAMLばかり書いていたのですが、
実際のフロントエンドエンジニアの皆さんはメインでどの言語を使用されているのでしょうか。
今回の動画をみて、ステップとしては基本のHTMLからもう一回やった方がいいかもな、、と思っていますが、
しまぶーさんもHTMLから紹介しているあたりやはりそこからやってくのがオススメと理解していいでしょうか。
ご教示頂けますと幸いです。
質問ありがとうございます！
実際のフロントエンドの現場では、ReactやVueといったJavaScriptのフレームワークを使うことが多いです。ReactではJSXと呼ばれるHTMLみたいな構文、VueもHTMLライクな独自の構文でマークアップしていきます。ベースとなっているのはどちらもHTMLなので、HTMLを理解しておくことは重要かと思います。私はJavaScript講座もやっていて将来的にReactまで扱う予定ですが、そのときにJSX等の説明の講座も作ります。
erbはRubyで使っているかと思いますが、Rubyでフロントエンド面まで構築することはドンドン少なくなってきていますね。RubyでAPI作成（DBのデータをフロントエンドに返す処理）までで、フロントエンドはJavaScriptに任せるというのが一般的になっています。またHamlも最近はめっきり聞かなくなりましたね。今後も使われることはないかと思います。erb、Hamlともに勉強する必要はないかと思います。
ちょっと長くなりましたが以上です。参考になれば幸いです😊
しまぶーさん、ご丁寧にありがとうございます！
スクールに通っているのですが、実際の現場がどうなっているか知りたくて今回の質問をさせていただきました。
HAML、そんな感じなんですね。。ちょっと残念ですがこの時点で知ることができてよかったです。
ぶっちゃけ、HAMLがいけてる言語のように刷り込まれてました・・。
改めて、HTMLをしっかり勉強していきたいと思います。
また、Rubyのこともありがとうございます。
私の通っているスクールはRubyがメインだったので、その過程でerbを学習したのだなと理解しました。
しまぶーさんのJS動画すべて見ました。
めっちゃわかりやすかったです＾＾
また、ドットインストール有料版も遅ればせながら始めまして、JSを基礎から学んでいます。
しまぶーさんの動画は現場で実践的な考え方、テクニックを紹介されているように感じますので眼から鱗なことがたくさんです。
続きも楽しみにしています！
@@GASSY-hr4xk いえいえ、学んだことは決して無駄にはならないと思いますよ。
そういうHamlのようなアーキテクチャ（alt HTML）を知れたことは十分に大きいことかと思います。
Rubyの学習過程でerbを学ぶのも当たり前ですし、ReactなどのJSフレームワークが流行る前は一般的に使われてきた技術なので、そこも学んだことは無駄ではないです。
そういう過去の資産を知ることで、今の技術の本当の価値が分かると思っています。
私の動画では過去の技術までは触れる時間がなく紹介できないので。。。
JSも見てくださり、また高い評価をくださってありがとうございます！
今後も有益なテクニック、実践スキルを紹介していきますので、ぜひご視聴ください！
またお気軽に何でも相談くださいね😊
しまぶーさん、暖かいお言葉ありがとうございます＾＾
そうですね、無駄なものはないと思います。ただ、個人的に本業ありながらの学習なので限られた時間の中で効率は求めながらやっていきたいなとも思います！
いずれにせよ、今はHTMLとJavaScriptしっかり頑張ります！
@@GASSY-hr4xk たしかに本業がある状態だと勉強時間が限られるので効率は大事ですね。効率良くするための方法もまとめていずれ動画にしたいと思います。はい、ぜひぜひHTMLとJavaScriptを学んでいってください。講座で今後少しでもお手伝いできたらと思っています！一緒に頑張りましょう(^O^)
文系三年がんばります。
独学で勉強からYahoo就職まではどのくらいの期間を要しましたか？
とても分かりやすい説明ありがとうございます。
私もこの方法でchrome反映させて見ましたがコードが(！の変換したもの)そのまま反映されてしまいます。
このような場合どのようなエラーが予想されますか？
ちなみにATOMの方でもこのようにうまくchromeに反映されなくて困っています。もし時間があれば対応してほしいです(..)
おろ...ちなみにWindowsでしょうかMacでしょうか。Windowsの場合、私の手元にないため、教えられることに限りがありそうです。🙏
また私の方法では「Copy」や「Copy Relative Path」ではなく「Copy Path」になります。今一度ご確認いただけると幸いです。またどのような方法でブラウザで反映させても開発において違いはないので、最悪この動画で紹介している方法に限る必要はありません。例えば、index.htmlファイルをドラッグ・アンド・ドロップでブラウザに持っていっても反映されますので、そちらもお試しください！
一度試してみます。
ご対応ありがとうございます。
バカな間違いでした。
ファイルの保存の時index.htmlじゃなしにhtml.indexとしていたためHTMLファイルではないとの認識をパソコンがしてしまっていたためうまく反映されていませんでした。
すみませんでした笑
@@user-bt1rw7yk2e あらら笑
そういう小さいミスはよくありますよね。
私も最近 description と discription （iとe間違い）でミスりました笑
とりあえず解決できたようで良かったです！😂
はじめまして！
今、スクールで勉強中ですがスクールのDVDより説明がストレートで分かり易いです！
復習を兼ねてcssも拝見してます。
プログラミング未経験で今後の為にも勉強を始めようと思うんですが何から始めたら良いかわかりません、、
よかったらアドバイス頂きたいです！
Chromeとスタジオコード そんな画面にするにはどうしたら良いのか？
すみません、! マークを押しても最初の一行だけしか表示されず展開されません。
何故でしょうか？
おろ・・・うまくいきませんか・・・
そしたらまず下記2つをまずはご確認いただきたいです。
①VS Codeを使われていますか？
②！マークは全角文字になっていないですか？
それでも駄目な場合は再度教えて頂けると幸いです😊👍
1:29の保存してとはどうゆうことですか？
vs2019でhtmlって書けますか？
Visual Studioのことですかね。おそらくVisual Studioでもいけるかとは思いますが、やはりVS Codeの方が向いているように思います。あちらはIDEで重いかつ高機能なので、フロントエンドの軽い処理には向いていないように思います・・・が私もガッツリ使った経験があるわけじゃないので、詳しいところまでは分かりません(^O^;
こんにちは😃
今、パソコンを買い替えたいと思っておりますが、中古のMacBookを見てますが、2016年は古すぎますか？
HTMLと関係なくて草
イケメン＆可愛い＆真面目
………？て感じやけど
がんばって勉強します（笑）
学校では、メモ帳を使ってやってて、タグから終了タグ打ち込むのクソめんどかったけど、困難があるのか。でもマック持ってないからなぁ。
Visual Studio codeならwindowsでもつかえるよ。
横にGoogle Chromeってどうやって出すんですか？
htmlの勉強より先にWindowsPCの勉強をしたほうがいいですね。
設定でemmitをonにしてるのにtabで雛形以外の補完が出来ない人向け
右下がdjango HTMLになってると思うのでHTMLに変更してください
ありがとうございます！！
ウェブフロントエンドってなんですか？簡単に教えて欲しいです
ユーザー側とサーバー側の、ユーザー側の事？
最初のブラウザに持って行っても何も表示されません！どなたか原因がわかる方はいますか？
コマンドはどこにありますでしょうか?
Macなら⌘
WindowsならCtrl
動画の頻度上げてもらえると大変ありがたいです😭😭
ありがとうございます！
なるべく頻繁にアップできるように頑張ります🔥
最近のweb制作ではhtml cssよりJavaScriptと聞きますが、どうお考えですか？
JavaScriptは確実に必要になってきます！ReactやVueしかり、今はJavaScriptの技術でマークアップまでする時代ですからね・・・！
文学部で完全に初心者なのですが、初めて見るのはこちらの動画で良いのでしょうか？？
なぜか最初にhtmlファイルの保存ができない
70歳です。その前の基礎がわからないので追いていけまでんでした。
リファレンスは知らなかった。
VSCode自体が深いです。いじりまくりたくなります(笑)
1週目。
メタ要素・メタデータ・メタ情報：いわゆる「付帯情報」のこと
データ本体ではなく、そのデータの説明書きのこと
URLを貼ることは出来るのに、testと言う文字が出てきません💦
保存してからじゃないと表示されないよ。
WindowsならCtrlとS
Macなら⌘とS
@@user-gc7qx5jw1c 助かりました。ずっとtestが出なくて。挫折気味でした💦
@@jinyoungjang6073 PCって自分の思った通りに動きませんものね。
困ったらいつでも聞いてくださいね。
@@user-gc7qx5jw1c 🙇優しい方ですね。有難う御座います。助けて頂ければ恩返し致します。
僕も画像が出てきて表示されませんな😢
VS cordってappが沢山出てきたんですけど、どれをインストールすれば良いのですか？ 勉強し始めたばかりで何が何やら分からない状態なので、教えて頂けるとありがたいです。
こちらのStable Buildを押せばダウンロードが始まるかと思います！そちらです！
code.visualstudio.com/
パソコンはやはりMacBookですか？
はい、そうです！ちなみに私のスペックは下記です！
- MacBook Air (Retina, 13-inch, 2018)
- プロセッサ 1.6 GHz デュアルコアIntel Core i5
- メモリ 16 GB 2133 MHz LPDDR3
- ストレージ 256GB
そのまま話を続けちゃいますが、、、AirかProかは人によりますね。性能に関しては大は小を兼ねるのでProに軍配が上がります。私は外で作業することが多く、Webの開発用途だとAirで足りることが多いのでAirにしている感じですね。iOS, Androidのアプリ開発も視野にいれるのであれば、最初からProが良いかと思います。
カスタマイズに関しては、私はプロセッサとメモリを最大までカスタマイズして、ストレージは最小にするタイプです。ストレージは代替できるのであまり求めないでもいいと私は考えています。長くなりましたが、参考になれば幸いです！
しまぶーのIT大学 ご丁寧にありがとうございます😊
私もです。素人ですみません。testの表示が出ません。お願いします。
おや、、、ブラウザにドラッグアンドドロップしても出ないでしょうか・・・？
そしたらファイル（index.html）を右クリックすると「Copy Path」と出るはずなので、それを押してください。
するとコピーができるので、それをブラウザのURLのところで貼り付けてエンターしてみてください。
そしたらおそらく表示されるかと思います！✨
11:20あたりのタグ書換えのときにはじめと終わりが両方書換られるのはVisual Studio上の設定でしょうか
差し支えなければどなたかご教示いただけますと幸いです。
Command + D で同じテキストに同時にカーソルを当てることができます！
その仕組みを利用してショートカットしている感じですね✌✨
@@shimabu_it できました！わざわざご丁寧に返信を下さりありがとうございます！
@@k4s4a3 いえいえ〜また困ったらいつでも😁
ブラウザって何ですか
開くってどうすればいいの？
ブラウザはWebに接続するためのものです。
分かってる人用の説明。文系だから説明が理解しにくいのか、文系なら説明が丁寧ならＧＯＯＤ
オススメのパソコンを教えて下さい。
来月M2のMacbookが出るという噂なので、今はそれを待つのが良いかもです。もし発売されなかったらM1のMacbook Airですかねー！
言語を習得する時は、参考書を見ながら勉強した方が、宜しいですか？
0.75倍速で見るとちょうどいいですよ
RUclipsの再生速度を変更できる機能は控え目にいって神ですよね😇
しまぶーのIT大学 遠回しに言って早いって言ってんだよ気づいて。
わたぼう
自分の理解力が足りないぞ
俺は1、75
あらた はいはいつよいつよい
@@zako_death_yo577 頭悪そう
高校生ですが結構為になります＜(_ _)＞
結構！？
「とても」になるように精進します！😁笑
エディター…？ 検索してきます笑
testって書いて保存の仕方がわかりません
キーボードの
Ctrl s または
⌘ s
ブラウザとVSCODEを同時に画面に表示させる方法がわかりません、教えてください。
1:34 testって出ないです(´ﾉω；`)
どうやったら出るのか教えてください🙏
おや、、、ブラウザにドラッグアンドドロップしても出ないでしょうか・・・？
そしたらファイル（index.html）を右クリックすると「Copy Path」と出るはずなので、それを押してください。
するとコピーができるので、それをブラウザのURLのところで貼り付けてエンターしてみてください。
そしたらおそらく表示されるかと思います！✨
@@shimabu_it URLは貼られている状態なんですけど、TESTって文字が出ないんですよねぇ( ﾉД`)
むむ〜あと2点確認お願いします！
・index.htmlで打ち間違いはないですか？
・ちゃんとbodyタグの中にtestって書かれていますか？
お願いします🙏
@@shimabu_it 確認したところそれもできていたのですが反映されません...
これってtestから例えば「あいうえお」に変えた場合、必要は作業はあるのでしょうか？
@@KKK-dh9qp んーーー原因が不明ですね・・・
ちなみに必要な作業ファイルを保存するのとブラウザでリロードだけです。
例えばドットインストールのHTMLの無料のレッスンとかを見てもらって、そこでドットインストールと同じような方法でやって、見れないかどうか試してみると原因が分かるかも知れません。すみません、力になれず・・・(/_;)
ブラウザの方にtestと出ません
初心者の私には難しく感じました💦
低評価0すげえ、
わかりやすいしいいね！
有料コンテツン並み！！！
たしかに・・・！
嬉しいですね。今後も有料コンテンツ並の講座を無料で出していきますね😊
よく見たら「有料コンテツン」ってなってて笑いました・・・
ズブの素人には全くわからない内容でした。
基礎ではない。実践編って感じ
やろうと思ったけどデザインセンスが壊滅的過ぎてやめた。
わかんない(இдஇ; )
どこが分からないとかありますか？
できる限り教えますよ😊