【HTML入門】21個のタグを紹介！わかりやすくHTMLの基本を解説します〜初心者向け〜
Ғылым және технология
Pythonプログラミングに関する情報を発信しているサプーです！
この動画はHTMLの基本について解説しています。
・HTMLとは？
・基本的なタグの使い方
これらについて説明しています💙
実際に実演しているので、最後まで見てもらえたら嬉しいです😊
💙 メンバーシップ 💙
説明動画 ▶︎ • 【ご報告】本日からメンバーシップ開始します！...
登録 ▶︎ / @pythonvtuber9917
iPhoneの方はこらから ▶︎ PythonSuppl/statu...
🏷 タグ一覧 🏷
1. html ▶︎ htmlテキスト全体を括る
2. head ▶︎ meta情報・設定やを書く(Web画面に表示されない)
3. meta ▶︎ meta情報 (文字コードなど)
4. title ▶︎ Webページタイトル(Webタブに表示される)
5. body ▶︎ Webコンテンツを記載
6. main ▶︎ Webページのメイン部分
7. header ▶︎ Webページの上部ヘッダー部分(ロゴやメニューなど)
8. footer ▶︎ Webページの下部フッター部分(利用規約やお問い合わせ先)
9. h1~h6 ▶︎ 見出し
10. p ▶︎ 段落
11. img ▶︎ 画像
12. video ▶︎ 動画
13. a ▶︎ リンク
14. ul / li ▶︎ リスト
15. table / tr / th / td ▶︎ テーブル
16. div ▶︎ 複数の要素をまとめてブロックに
17. span ▶︎ インライン要素(スタイル適用時に使用)
18. label ▶︎ ラベル
19. input ▶︎ インプット関連(テキストボックス、チェックボックス、ボタン等)
20. select / option ▶︎ セレクトボックス
全部で20個でした!! (21だと思ってた...)
💻 動作環境 💻
Windows 10
Python 3.9.0
⭐️ チャプター ⭐️
0:00 今日のテーマ「HTMLの基本について」
0:25 HTMLとは？
3:22 HTMLの基本的な書き方
6:59 header/main/footerタグ
8:37 h1タグ
9:47 pタグ
10:35 imgタグ
11:42 videoタグ
13:01 aタグ
14:32 ul/liタグ
15:08 table/tr/th/tdタグ
16:45 divタグ
17:16 spanタグ
17:55 inputタグ
20:22 select/optionタグ
20:52 ボタン
21:13 エンディング
💜 チャンネル説明 💜
Pythonプログラミングについて解説するVtuber サプーです✨
初心者でも分かりやすく、Pythonを体系的に学習できるような動画をアップロードしていきます！
みんなが少しでもPythonが好きになってくれたら嬉しいな💕
Twitterとブログをやってるので、フォローお願いします！
Twitter ▶︎ / pythonsuppl
メール ▶︎ python.supu.vtuber@gmail.com
#HTML
#Web画面
#Web制作
#学習
#勉強
#初心者
#入門
#エンジニア
#基本
#PythonVTuberサプー
Пікірлер: 82
めちゃくちゃいい動画に出会えました！即チャンネル登録させていただきました！！ すっごく分かりやすいし、テンポも良い！！ すんなり頭に入ってきます！ HTML初心者には本当にありがたい動画です！
とても勉強📖になりました🥹 ありがとうございます😊
いま自分が一番知りたかった内容がわかりやすくまとまっていて有難い神動画でした！ サプーさんありがとう！これからも勉強させていただきます。
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます！ Pythonが中心ですが、eb関連の動画を今後も出していく予定なので、ぜひ気になるトピックがあれば見てもらえたら嬉しいです😊
1番無駄無く解説しているチャンネルだと思いストレス無く学べています!
丁寧でテンポもよくすんなり頭に入る説明。お金とれますよこれ、素晴らしい動画をありがとうございます
凄ーくわかりやすい動画です。コード書いた後にどのように表示されるか見せてくれるのでとてもイメージしやすいです。 ありがとうございます。
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます😊 HTMLはタグと見た目が一致すると、イメージつきやすいですよね！HTMLの理解にお役に立ててたら嬉しいです！
初めて動画拝見しました！分かりやすすぎて保存しました✨✨こういう動画探してました！ありがとうございます🥰
@pythonvtuber9917
Жыл бұрын
ご視聴いただきありがとうございます！！分かりやすさを重視して動画を作っているので、そう言っていただけて嬉しいです😊
わかりやすいです！！！！！！
とても理解しやすくてありがたいです🙏 いろいろ学ばせて頂きます！
@pythonvtuber9917
Жыл бұрын
理解のお役に立てていたら嬉しいです😊
改めて勉強し直してるけどめちゃくちゃわかりやすい。声も聞きやすい
@pythonvtuber9917
Жыл бұрын
ありがとうございます！！そう言っていただけて嬉しいです！
今まで見たHTMLの解説動画の中でも1番わかりやすいです✨ コード記載の後直ぐに動作を見せてくれるからかな？ 動画の作成ありがとうございます☺
@pythonvtuber9917
2 жыл бұрын
ご視聴いただき、ありがとうございます😊 分かりやすさを重視して動画を作成しているので、そう言ってもらえるのがとても嬉しいです！！
わかりやすいっす。いつもありがとうございます。
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます😊 そう言ってもらえて嬉しいです！！
助かります😂
とてもわかり易かったです
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！そう言っていただけて、嬉しいです😊
勉強になります！
@pythonvtuber9917
2 жыл бұрын
この動画がHTMLの勉強のお役に立てていたら、嬉しいです😊
無駄がなく、すごく分かりやすくて覚えやすいです。何て才能豊かな方なんだろう。なんたって、綺麗で明瞭な言葉がいいんだよねー。
@pythonvtuber9917
Жыл бұрын
何を説明して、何を説明しないか？など動画がコンパクトに収まるように意識しています！！
相変わらず教え方上手いですよね。htmlの解説は溢れてるのに・・・分かりやすく疲れないので不思議。aタグはアンカーの略だったんですね！
@pythonvtuber9917
2 жыл бұрын
理解のしやすさを重視して動画作りをしているので、そう言ってもらえて、とても嬉しいです😊 タグ名は略されすぎてるものがあるので、何の略かわからないですよね😂
いつも拝見させてもらっています！ 最近、プログラミングを学び始めました。 内容がとても分かりやすいので自分の学習ペースに合っています！ ぜひ、CSSについても解説を頂けると幸いです！
@pythonvtuber9917
Жыл бұрын
ご視聴いただきありがとうございます！ CSSですね、検討してみます！
実演を交えての解説、とても分かりやすく参考になりました。超初心者にとって、とてもありがたく拝聴できました。ありがとうございます。何度も見て、HTMLを自分のものにしたいです。お願いですが、ぜひともCCSについても、このような解説動画を配信していただけたら幸いです。よろしくお願いいたします。
@pythonvtuber9917
Жыл бұрын
ご視聴いただきありがとうございます！CSSについても検討してみますね😉
色々あるHTMLの説明動画の中で一番分かりやすくてビックリ！とてもタメになりました！ こんなに分かりやすくて素敵な動画だもの、是非もっとHTMLやCSSの説明動画が欲しいです！^^
@pythonvtuber9917
2 ай бұрын
ありがとうございます！ CSSについても検討してみますね！
はじめまして！ すごくイメージしやすい解説動画でした✨ サプーさんの動画、Pythonの復習にも活用させていただきます！ HTML/CSSを独学でやるか、授業受けるか悩んでいるのですが、独学だと厳しいのでしょうか？ ※現在大学2年生で、Java・Python・C言語の基礎は習っています。また、秋からJavaScriptをやるので、そこに向けて学習したいというのがあります。 授業も検討しているのですが、それ以外の授業の時間割が地獄で既に参っていまして…💦 なので、独学で出来るかお聞きしたいです…
動画を参考に勉強させて頂いてます！
@pythonvtuber9917
Жыл бұрын
少しでもこちらの動画がお役に立てていたら嬉しいです！
@keik.1790
Жыл бұрын
モロパクリぐらいにエディター書いてるのTwitterなど飛んだらすみません
@keik.1790
Жыл бұрын
ちなみにCSSの動画も作ってほしいです
どのチャンネルより丁寧だわ
@pythonvtuber9917
Жыл бұрын
ありがとうございます！！
いまちょうどHTML5を習っております。とてもとても参考になりますし、わかりやすいです。 もう一編くらいHTMLに関するものをだしてくださるとありがたいです。 この動画は毎晩寝るときに繰り返し聞いて学んでいる孫ふたりの年寄り です。
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます😊 HTMLの続編のご要望ですかね！検討してみますね😉
プログラミング初めて２週間ですが、めっちゃ分かりやすかったです。Progateではcssとセットですが、htmlでもこれだけのものが作れるって事に驚きました。チャンネル登録させてもらいますね(^_^)
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます😊 HTMLも動画を出しているのですが、チャンネルとしてはメインがPython動画になっているので、ぜひPython動画も見てもらえたら嬉しいです！
@user-kr7cx6kd2u
2 жыл бұрын
@@pythonvtuber9917 早速返事ありがとうございます！さっきまでProgateやってたんですけど、BGMとして【まじっくあわ〜】のサプーさんがゲストの動画を流しながら勉強していました(^_^)初学者は最初はhtmlから…って聞いていたので。
学校の授業で授業と言っていいのかすら怪しいほどわかりづらかったのが嘘のようにわかりましたありがとうございます😭今の先生と変わって欲しいほどです
@pythonvtuber9917
Жыл бұрын
授業みたいに体系的に一気に細かい説明までされると逆に理解しにくいとかあるかもですね。勉強のお役に立てていたら嬉しいです！
歓喜( ；∀；) HTMLがきたって事は次回はドキドキ💓
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます😊 あ...次回はHTMLとは全く関係ないので、ご期待に添えなさそうです...😵
めっちゃ分かりやすかったｗ CSSについても解説してほしい
@pythonvtuber9917
2 ай бұрын
ありがとうございます！！ CSS解説動画も検討してみますね！
@Exsanc
2 ай бұрын
@@pythonvtuber9917 あざす
ＨＴＭＬの事、詳しく教えて下さって有難うございます 可愛い女の子から教わってなんか頭に入ってきやすくて良かったです😀
なるほど一回見ただけでだいたい分かったよ
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます😊
とても勉強になりました。 質問ですがbrタグはという時に使うのですよか？
@pythonvtuber9917
Жыл бұрын
改行したい時にbrタグを使います！
最高でした、ぜひCSSもお願いいたします。 既にあったらすみません
@pythonvtuber9917
Жыл бұрын
ご要望ありがとうございます！検討してみますね！
高１です 今からHTMLを学習しようと考えているのですがおすすめのソフトありますか？お金がないのでできれば無料のがいいです！Windowsです！
@pythonvtuber9917
Жыл бұрын
ソフトというのはエディタのことでしょうか？VSCodeとかはいかがですか？
現在ツールなどでHTMLを覚える必要がない気がするのですがどう思いますか？
@keik.1790
Жыл бұрын
そうなんですか？初心者でやってるので無知ですみません
@pythonvtuber9917
Жыл бұрын
忘れたらググればOKですね！エディタのサジェスト機能もありますし。
@keik.1790
Жыл бұрын
ありがとうございます
登録しました! わからないところがあったら質問していいですか？
@pythonvtuber9917
2 жыл бұрын
チャンネル登録ありがとうございます😊 はい、質問がありましたら、コメント欄に記載いただけたら、答えられる範囲で回答します！
@144m_hyperion
2 жыл бұрын
@@pythonvtuber9917 自分は、PCにPythonを入れた頃から見てます。 環境は、OS:Windows10,エディター:Visual studio Code,Pythonのバージョンは、3.9.6です。 質問なんですが、動画を見ながらやると、赤い謎の下線がでるんですよね。何が問題なんですかね?
@pythonvtuber9917
2 жыл бұрын
その赤い下線が引かれている部分は、具体的にどのようなコードでしょうか？可能でしたら、その前後のコードも含めてHTMLを貼り付けてもらえたら、もう少し明確に回答できるかもしれません。 念の為、確認ですが、HTMLファイルは「.html」という拡張子になっていますかね？
@144m_hyperion
2 жыл бұрын
@@pythonvtuber9917Pythonの.pyという拡張子です。編集中に出ます
@pythonvtuber9917
2 жыл бұрын
この動画の1:09の部分でも説明しているようにファイルの拡張子を「.html」にしてください😉 .pyだとブラウザで開いてもWeb画面として認識されずに、画面が出ないと思います！ 動画の冒頭でも説明しているように、この動画はPythonの動画ではなくて、HTMLの動画になります！
あれ？Python以外も教えてくれるんですか？？
@pythonvtuber9917
2 жыл бұрын
PythonでWebアプリを作る時に使用する技術は、ちょこちょこUPしてます！Git・SQL・HTMLなど😉
Python VTuberとは何とニッチなw
センス問われる言語だぁ・・・
@pythonvtuber9917
2 жыл бұрын
私はセンスがないので、辛いですね😂
@pandapandas774
2 жыл бұрын
@@pythonvtuber9917 あたしもですよーCSS使っても使ってもダサダサよ
これ、KZreadの動画でいいのか？ちゃんとお金取れるぞ