世界一わかりやすいHTML講座！
Вставка
- Опубліковано 25 лип 2024
- 👩💻セイトが運営するプログラミングスクール・研修事業「SiiD」
bug-fix.org/siid
👨💻セイトによるエンジニア専用・転職キャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
✅ LINEで配信・イベント情報・無料キャリア相談やってます
lin.ee/eR6BXOD
◎お仕事のお問い合わせはこちらからお願いします
bug-fix.org
------------------------------------------------------------------
プログラミングを学習したい初心者さん、エンジニア転職を目指している方、Web制作したい方であれば序盤で抑えておきたいのがHTMLです。
フロントエンドエンジニアなら必須！バックエンドエンジニアでも確実に触れる機会はあるので最低限抑えておきましょう。(HTML Living Standard対応）
------------------------------------------------------------------
ニッチな情報やライブ配信のお知らせをしています。
メルマガ：my131p.com/p/r/Ym43EzoZ
LINE：lin.ee/eR6BXOD
------------------------------
・今回紹介したコード
github.com/seito-developer/ht...
・Visual Studio Code公式
code.visualstudio.com/
🔽目次
00:00 はじめに
04:24 HTML/CSSとは
09:50 環境構築
16:31 ディレクトリ・ファイルを作成
18:22 タグについて
21:58 タグの種類
28:02 ネスト（入れ子）
32:27 最重要タグの雛形
41:08 ブロックレベル要素・インライン要素, 例外パターン
58:11 属性
01:04:09 さいごに
🔽Special Thanks
動画編集：ぽぴぃ氏 Twitter ▷@poppy0p0
画像素材：いらすとや さん
#プログラミングスクール・転職キャリア相談・公式LINEやってます - Навчання та стиль
↓こちらもよければチェックしてみてください〜
👩💻ゼミ形式で学ぶプログラミング研修「SiiD」
ua-cam.com/video/WYU2Git8dRg/v-deo.html
👨💻エンジニアによるキャリア相談「EEE転職」
ua-cam.com/video/MNTzNFGgmYI/v-deo.html
勉強になりました。有難うございます。
「痒い所に手が届く」そんな動画でした；ありがとうございますｍ
本当に初心者にやさしい解説でとても為になりました。こんな有料級の動画を無料で配信してくださってありがとうございます！
昔、中学生パソコン講座で文字サイズと色、リンクだけ貼ったのが唯一のHTMLでした。
今になって興味が出てきたのですが本当に分かりやすかったです。
CSSに関してはさらに未知の領域ですがやるだけやってみようと思えました。ありがとうございます。
最近スクールで学び始めました。
じっくり学んだ後に見るとシンプルで良い復習になります！
大変勉強になりました！ありがとうございました。
他の動画も参考にさせて頂きます。
最近プロゲート始めたんですけど、本当にわかりやすい解説で感謝です！ ありがとうございました！
勉強になりました。大変分かりやすい動画ありがとうございます。
本当にわかりやすかったです！ありがとうございます🙇♂️
プログラミングの勉強を始めようと思います！丁寧に解説して頂きありがとうございます。セイト先生の動画でこれからも楽しく進めていきます！！
ものすごくわかりやすかったです！
ありがとうございます！
とても分かりやすくて助かりました。ありがとうございました。
動画欄におすすめとして出て来たので見てみたんですが、本当にとても参考になります！話すスピードも遅すぎず早すぎず、ちょうどいいです😊この講座を見て頑張ってみます！
感謝です！
学校であまり理解出来なかったのですが、あの事はこういう事だったんだと、理解が深まりました。
有難うございました😊
かなり参考になりました。ありがとうございます。
分かりやすくてすごく良かったです！
電車の中でも勉強できるので助かってます。
感謝！
プログラミングの専門学校に通おうと思っているので予習に大変役立ちました！ありがとうございます！
要点がまとまっており、概要を知りたかったので助かりました
説明が詳しくてわかりやすいです！
最高です！
これからも勉強させていただきます✨
ありがたやです！よろしくお願いいたします！
やっぱり動画で見ながら勉強するのが一番わかりやすい!
無駄のない話し方・内容でとても見やすかったです。
ありがとうございます！！
プログラミングに興味があるのにどれも入りから難しくて勉強を先送りにばかりしてましたが、この動画に出会えて理解もできてモチベーションも出ました。ありがとうございます！これからもセイト先生の動画で勉強させていただきます！
感謝！！
htmlに触れて1・２か月のものですが、
本当にわかりやすい説明でゆっくり進めてくれるので一回見ただけでも理解が深まりました！！何回も見直して勉強させていただきます！！
感謝！
こんな動画を作ってくださり、ありがとうございました！ id やclassの指定方法は特にバックエンドやサーバー側の知識があるプログラマーのセイト先生だからこそのわかりやすさがありました。CSS動画も楽しみにしてます！
恐縮です！ありがとうございます！
分かりやすかったです。
分かりやすすぎるーー
今日からプログラミングの学習を始めます。動画拝見して勉強させて頂きます！！！
冒頭で概要言ってくれるのめちゃ分かりやすいです。
チャンネル登録しました🙇
有料の大手オンラインスクール通ってますが、そちらよりこの動画の方が理解深まりました笑
ありがとうございます。
貴重な知識を教えて下さりありがとうございます！スクールでつまずいておりましたので大変助かりました😊
感謝です！
最後まで確認できた…！😂
素人でもできた😢
復習も頑張ります、これかららもお世話になると思うので、よろしくお願いします！🙏
めちゃくちゃタメになりました！
とても分かりやすかったです。
最後まで何度も止めながら見させていただきました。
感謝です！
素人の自分にもスーッと内容が入ります。
こんなにも分かりやすいのは感動です！
37歳ですが、これから頑張って覚えていこうと思えました。ありがとうございます☆
🙏🙏🙏
部活の引き継ぎ資料をまとめるのに今から見ます！
ありがとうございます 参考になりました
初心者です。この動画わかりやすいです！
ありがとうございます！
ウレシス！！
めっちゃ分かりやすいです！
これから続けてCSS観ます！
ありがとうございました！
あざます！なによりです！
@@webit7652
返信ありがとうございます！
もしもよろしければ、セイト先生のphp編も観たいです！！
基本サーバー側でフロントは雰囲気で触ってたから少し勉強になりました！
プログラミング始めようと思ってもどこから手をつけていいかわからなかったので、こういう動画があるのとても助かります😊頑張って挑戦してみます！
感謝！！
プロゲートのHTMLCSSを終えてからこの動画を拝見すると、更に理解が深まりました！！
ありがとうございます!!
感謝です！！
ありがとうございます😊
ありがとうございました！
これからweb業界を目指そうとしいるのですが、参考書でさっぱりだった専門用語も含めてとても分かりやすく解説してくださってて助かります！他の動画も含めて勉強させていただきます！
感謝です！
どの動画よりも分かりやすく、僕もついにプログラミングデビューです！
あざます！おめでとうございます🎉
やばっ本買います！勉強なります！
あざます！😂
本はもう発行日古いので買わなくてもいいですがw
まじわかりやすい
あざます！
見てる時は発狂しつつも
全部理解して見終えた後は
この動画に会えて良かったと思えました。他のシリーズも何とか喰らいついて行きます‥！有難う御座いました！
あざます！お疲れ様です！
動画を見ながら実際に作ってみました。すぐに役に立つのは感動的です！リンクで飛べた時とテキストの色が変わった時の「オー」を胸に刻みたいと思います。他の動画も楽しみにしております。ありがとうございます❣
うれしみ
すごく助かりました！スクールに通うのは少しハードルが高いので、基本でも動画で学べるのは嬉しいです。ありがとうございます！！
観てくれてありがとうございます！
理解した気になる動画
バックエンドの学習を終えてフロントエンドの勉強を始めたばかりで震えてましたが、こんなに楽しく学べる動画に出会えて凄く嬉しいです😆ありがとうございます😊
よかった！！！
お陰でプログラミングの取っ掛かりが出来ました！ありがとうございますm(_ _)m
スーパーあざます！！
ちょっと最近仕事に余裕出来たけどなんかスキル欲しいし今日からやってみよ
これからプログラミングの勉強を始めようと思ってます。
何も分からない初心者中の初心者ですが、この動画を見て
プログラミングって面白そう！
とワクワクしてます。
次はCSSの動画見てきますね！
たくさん勉強させて頂きます。
あざます！頑張ってくだしあ！
とってもわかりやすいです。キーボードをブラインドタッチ出来ると入力が楽ですね。
５７歳ですが、とても励みになります。次回もわかりやすい動画期待してます。
44歳プログラミング初心者ここから頑張ります！！ありがとうございます。
恐縮です！ありがたやです！
わたし38です。お互い頑張りましょう😊
私は35です！
頑張りましょう！
自分は30歳です。
最近始めました。
宜しくお願いします。
34歳迷ってますw
皆さんのように前に進みます！
プログラムの講座ってコーディングする人の為のものが殆どですが、コードを読書する、みたいな、何が書いてあるか？だけ解説する動画は面白いですね。
よか動画でした登録させていただきます。
ありがとうございます！！
初めて vs code をインストールする方は、一番最初にextensionのところへ[Japanese]と入力して日本語化をおすすめします！
ずっとメモ帳に書いていたので、こんな便利なものがあるとは！
これからHTMLの勉強をして出来ればweb関係の仕事に就こうと思っていたので、とてもありがたいです！
初級～中級編も見させていただきます！
がんばってくだしあ！
@@webit7652
時間がある時に意見をいただきたいのですが、うちの会社は新事業としてweb事業をしようとしています。しかし、有識者は一人もいません。
因みに作るサイトは主にランディングページや企業HPらしいです。
社長は2人の社員に「独学でHTML，CSS，JS，PHPの勉強をするように」と指示しています。
そして1人に一企業のHPを任せるのが目標みたいです。
これは結構無謀な気がしたのですが、どうでしょうか？
宜しくお願いします。
Progateでプログラミングがどんな感じか試しにやってみたら楽しかったので、一から環境構築してHTML &CSSからやろうと思います。（Python難しかった笑）
夜子供が寝てから動画みて地道に勉強がんばります。応援してます📣
大変かもですが、がんばってください！！
少しでも応援になればと思いコメントさせて頂きます。ありがとうございました。続編も楽しみにしております。
感謝です！！！！
わかりやすかったです。ありがとうございました。
プログラミングやりたくてはじめましたが、何から始めたらいいのかわからず、言語とかしかみてなく実践をしてこなかった人なので、また一段階勉強がたのしくなりました。26で若いといわれるのですが頭もよくないので、新たなこと挑戦するのが怖い部分もありますが、セイト先生の動画をこれから全部見ていき頑張ってエンジニアを目指せるよう挫折せず頑張ります。まずはＨＴＭＬ基礎学んだのでＣＳＳもお邪魔します、わかりやすい動画本当に助かります応援してます。
いい心意気ですね！
26なら全然なんとかなる歳です👍
わかりやすすぎる！ないすです
感謝！
まさしくこれから学ぶ、超初心者37歳です。
最新のfundamentalな内容、助かります！！
CSSも見たいけど、もう一回HTML！
よかったです！ぜひ！
ExcelVBAしか知らないレベルですが通勤中に音声だけ聴き流して、時間がある時に見返しています。
いつも有難うございます。
あざます！耳勉してください！
1つのタグ中に他のタグをわりこみさせる 入れ子（ネスト）
Pタグ 文章 タップでリンクに飛ばすテキスト
入れ子をする場合、締めに山カッコが2つ連続する
工業高校電子科の1年生です。この動画に出会えてほんとによかったです。これ見て同じクラスの人と差つけてやります。
感謝！！
何の気なしにUA-camを日々見てる中でセイト先生を拝見しました。
エンジニアになる気は当時全くなかったのですが気づけばめちゃくちゃ動画を見てました。
良いきっかけと思って今エンジニアになるために日々勉強中です！
フリーター23歳
がんばれ！
セイト先生の授業は優秀だ。
セイト先生が日本一の技術者youtuberだ。
セイト先生、中嶋と申します（４９歳）。新規事業を行うため、私は現在あるオンライン講座を受けている最中です。先週はやっとHTML/CSSの初期コースが終わったところです。オンライン講座で理解できない部分が沢山あって、先生が作ったこのプログラムで色んな疑問を解決することが出来ました。心より感謝しております。CSSの部分に関しては、とくにスタイリング等サイズの指定、揃いに理解できない部分が沢山ありますので早速先生が作成したCSS編を参考し、基礎を固めたいと思います。
熱いメッセージありがとうございます！
動画出した甲斐があります😇
動画いつも拝見させていただいております。
今回はじめの方に鳥貴族ないですね笑
別のネタをやってみたらゲロすべったので丸ごとカットになりました…
技術者がスターになって社会基盤を全員が支える人々を地上に人材創造する。
サクッと基本を確認できていいですね！
映像と音声による教材の方が、非常に頭に入りやすいです。
（文字テキストの教材を読んでいましたが、ストレスと眠気で挫折しそうになります＾＾；）
解説もわかりやすくて助かりました。
テキスト眠くなりますね😗
黙々と未来の人類をつくる。
52歳でプログラミング始めました。
よくわかります。
感謝です！
クソわかりやすい
遊び労働は人類愛で歩みを進める。
プログラミングを勉強しようと本を探してたら辿り着きました！
本要らなくない！？
この動画見て勉強します！
本いらないです😇笑
あざます！
覚えた知識はさっさと忘れる。着想と隣人愛愛は一生忘れない。知識人にはなっては金持ちにはなれない！
今からWebサイト制作に興味ある人にはおすすめ。HTMLだけに基礎(骨組み)のところを無料で教えてくれるので見たほうが良い！！
感謝☺️
コメント失礼します！ 24:49
aタグをファイルに保存して表示させようとしても出てこないのですが原因はなにかあるのでしょうか？？
ハイパーテキストマークアップラングエッジ
ヘッド
ボディ
タグ だいたい100種類
h＝ヘッドライン、ヘッディング
p＝パラグラフ
a＝アンカー
はいぱーてきすとりふぁれんす(属性)
見出し 段落 錨
動画の通りGoogleサイトに飛べるように書いたのですがGoogleにドラッグして開くと反映されません。
どうしたらよろしいでしょうか？
head で挟んだところは機械に状況設定を伝えるところ。bodyで挟んだところはweb上で人間が見れる内容を書き込むところ。って感じですよね？（伝われ、笑）
そのとーり！！
セイト先生は喋りのプロエンタ−テイナ―だ。
初めまして、HTML初心者です。
HTMLとCSSを使ってホームページを作ろうと思い動画を参考にさせてもらってます。
ひとつ質問なんですが、HTMLファイルをブラウザで開こうとしても開けないのですがどう対処したらいいでしょうか。
HTMLファイルをブラウザにドラッグ＆ドロップしましょう！
hタグ、一度に入力する方法があるんですね😮
どうなっているんですか？
12:51 のdevelopというフォルダもhtml-css-tutorialというファイルも無いのですがどこにあるのでしょうか？
ググッてもで出てきません
仮に、と発言してます！
仮にこういうフォルダがあったらこうやってVS Code操作するんですよ、という説明です。
環境構築序盤でもう分からないww ダウンロードしたけど…
意味不明のコンテンツが怖いもの無しならもう技術的優位性は間違いない。
本当に勉強になります。ありがとうございます😢
ごめんなさい。調べてもわからないので聞きたいです。
打ったプログラムを確認する時にワンクリックくらいでサッと確認のページに飛んでますがどこのキーを押すとサッと確認できますか??
どれのこと言ってますか？🥲
なにせだいぶ前に投稿した動画なので…
細かい情報ほしいっす
多分ウィンドウ切り替えのことだと思います。Windowsならalt+tab、MacOSならcommand+tabキーで出来ますよ！
島田紳助の大阪NSCの授業での漫才の意味論の変遷と好きな漫才師数組の紙上の分析と天才大塚博のコンピュータサイエンスの面白自己啓発はやり方が似ているが宛先は誰に向けてか？
21:01 お使いのHTMLファイルってどこにあるんですか？
15:21
ショートカットキーの説明で、『command+p』などの説明がありましたが、commandキーとはどれのことを指しているのでしょうか？
WindowsとMacの違いなのかな🧐
WinならCtrlかAlt！
プログラマーの遊び労働も結局は書いた夢コードを削っていく単純創作労働で答えは無限に存在する。
ブロックレベル要素
インライン要素が難しくて入ってきません😅
分かりやすくできないですか？