【超入門】HTML・CSSってなに？学習の始め方解説 2021年最新版【未経験・初心者向け】
Вставка
- Опубліковано 25 лип 2024
- HTML・CSSの勉強をこれから始める皆さんを全力応援！
HTMLやCSSってそもそも何？学習の準備ってどうすればいいの？などの疑問にお答えします。
※過去にアップした動画のリニューアル版、2021年最新版です！
【超入門】知らなきゃマズイ！HTML・CSS 基本の「き」【HTML・CSS コーディング】
• 【超入門】知らなきゃマズイ！HTML・CSS...
〈目次〉
・オープニング 0:00
・はじめに 1:04
・HTML/CSSって何？ 1:28
・学習の始め方 2:59
・HTMLの基本的な構造 6:08
・CSSの基本的な構造 13:15
・最後のまとめ 20:40
=== 次の学習にオススメ！関連動画はこちら ===
【超入門】たった20分でまるわかり！HTMLをはじめてみよう【HTML・CSS コーディング】
• 【超入門】たった20分でまるわかり！HTML...
【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（前編）【HTML・CSS コーディング】
• 【超入門】初心者あるあるのつまづき回避！CS...
【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（後編）【HTML・CSS コーディング】
• 【超入門】初心者あるあるのつまづき回避！CS...
- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/ ★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ... プレビュー
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★ - Навчання та стиль
0:00 動画概要説明
1:28 HTML/CSSって何？
3:00 学習の始め方
5:58 HTMLの基本構造
13:15 CSSの基本的な構造
20:40 終わりの挨拶@ピヨピヨタイム
目次ありがとうございます！✨
固定させていただきました🙇♀️
やっと理解することができました。
とってもわかりやすく丁寧でした。
ありがとうございます。
ご視聴ありがとうございます！！🙇♀️
めっちゃ分かりやすくて良かったです！
ありがとうございます😭
ご視聴ありがとうございます！！🙇♀️🙇♀️
美人でわかりやすく助かりました。
ありがとうございます😊
文系学生ですがプログラミングに興味があるので参考にさせていただきます！
わかりやすくありがとうございます！
めっちゃわかりやすいです！！VScodeをつかって頑張っていきます！
コメントありがとうございます🙇♀️
学習応援しております！！
有料講義サイトよりも分かりやすすぎる！
まさに神様！
動画漁ります！
嬉しいお言葉ありがとうございます🙇♀️🙇♀️
とても参考にさせてもらってます。
ゼロからウェブサイトになるまでの動画はありますか？パソコン自体も初心者には難しいですか?
ためになります！ 爪かわいい!!
ありがとうございます！😂
めっちゃわかりやすいです！
コメントありがとうございます🙇♀️🙇♀️
今日から真剣に学んでみたいと思います
ご視聴ありがとうございます！
応援しております🙏
美味しそう❤️焼き鳥が食べたくなりましたぴよぷよ！
焼かないでください…😂
めっちゃくちゃ分かりやすいです。
ありがとうございます！🙇♀️
こちらも見させて頂きました！
ありがとうございます！☺️
"そもそも"につまづく場合を考慮してるのはとてもいいと思います！
僕はよく"そもそも"につまづいてしまうので
コメントありがとうございます！！
私自身がつまづいた体験ももとに制作しているので、そう言っていただけると嬉しい限りです🙇♀️🙇♀️
css本当にどうやってhtmlとできるのかわからなくてでできるのしれて本当に助かりました
お役にたててよかったです！！✨
こんにちは☺なつこさんはCSS設計は普段何で書かれていますか(BEMやFLOCSS..etc)
dｗを動画教材を使って学習中です。
reset.css common.cssでコーディングにつまづいています
教材の視聴期限もどんどん進んでいき 課題の締め切りは迫ってくる
深く考えすぎなのか全く前に進めなくなってしまいました。
この動画であ～そうなんだと感じることがたくさんあります
コメントありがとうございます！
時には一瞬深く考えて、すんなり理解してしまった方が効率がいいこともありますが、どうしても納得いかない部分などは心を殺して（？）丸暗記してしまうのが1番の方法かなと思います。意味を考えず、語呂で算数の公式などを覚えてしまうようなイメージです。
そうすればいずれ、すべてがスッと腑に落ちる、体に染みつく時がくると思います🙇♀️
今回もとてもよく理解できました！！
そろそろCSSの勉強に入りたいと思います＾＾
コメントありがとうございます！
応援してます！！☺️
HTML CSSの学習を終えたのでポートフォリオを作りたいのですが、デザインセンスが無いのでどんなページを作ったら良いのかが浮かびません。こんなサイトを参考にするのがおすすめとかあったら教えて下さい。なかなか前に進めません。
ぴよぴよ笑いました🤣次はなつこせんせいの踊りもみたいです！笑 ピロリちゃんねるみたいな感じでよろしくです！にこ
コメントありがとうございます！
踊りですか！？😂
とっても分かりやすい💕入会金15万払って「未経験からwebデザイナーとしてお仕事できるようになれますよ」って謳ってるスキルスクールに入りましたが、こういう肝心な部分はすっ飛ばされていて絶望しています。本当のズブの素人が最初に必要な知識ってこういうことなんですよね！！！チャンネル登録しました、これから動画一気見します😍
ご視聴ありがとうございます！
そう言っていただけると、動画を作った甲斐があります！✨
今後もお役に立てるような動画を更新してまいりますので、どうぞよろしくお願いします🙇♀️
学習応援しております！！
初心者として視聴しました。どれ位でマスターしますか？自社HP、自社ECの制作はどのレベル位ですかね？
かわいい♡からあげくん食べたくなりました(笑)
コメントありがとうございます！
まさかの！😂
progateのhtmlとcssの初級を
2週してある程度基礎はわかったん
ですけど次はなにをしたらいいですか？😂😂
コメントありがとうございます！Progateは初心者向けに、周辺知識がなくても進められるように、すごく限定的な内容で作られている講座だと感じます。個人的に、Progateの次はドットインストール（有料版）の動画講座を一通り進めながら、自力でコードを書きつつ学ぶのがおすすめです！今まで知らなかった知識が山ほど出てくると思います。
@@webgodweb 返信ありがとうございます。勉強頑張ります！
本教科書と動画一本でプログラミング知識を征服する。
俺にはプログラマー運がある。ハローワ―クの人生相談が懐かしい。
現役で仕事されてる方は、実務でどう効率よくコーディングされてるか知りたいです。
コメントありがとうございます！
効率化の方法をまとめた動画など、今後のテーマとして検討させていただきますね☺️
かわいい！ぴよぴ🐤
ご視聴ありがとうございます🐣
ど素人の私にとってすごくわかりやすく、無駄のないご説明でした。チャンネル登録しましたので今後ともよろしくお願いいたします。ありがとうございましたm(__)m
ありがとうございます！！
今後ともお役に立てるよう頑張ります🙇♀️🙇♀️
HTML.CSSエディターを入手したいのですがどうすれば良いのですか？
下記の動画も参考に、「Visual Studio Code」をダウンロードしてみてください！
ua-cam.com/video/pQ7tmTx5Zbk/v-deo.html
Visual Studio Code
code.visualstudio.com/
head などの要素は一文字一文字打ち込むのですか？
すみません始めたばっかで
ご返信遅くなりすみません！
はい、学習初めのうちは、いずれは見ないでも打ち込めるように暗記、練習したほうがよいです。
記述の仕方も暗記できて、それぞれの意味や役割を理解したあとであれば、スニペット登録などで一発で呼び出したりコピペしたりできるようにして、時短して良いです🙏
@@webgodweb ありがとうございます！
面白いお姉さんだ。
phpファイルでもhtmlとcssかけますか？
書けますよ！PHPの記述はタグで囲むようにして、HTMLのコードに埋め込んで書くことができます。拡張子は.phpのファイルだけど、中身は普通にHTMLを書けば良いイメージです。
@@webgodwebご丁寧にありがとうございます、助かります
尊いです！(*´ω｀*)
コメントありがとうございます😂🐣
65歳男性でまるっきりの初心者ですが、今から初めてもマスター出来るでしょうか？
ご視聴ありがとうございます😊様々な方がいらっしゃいますので、マスターされる方はいらっしゃると思います。
実際に学習してみないと、向き不向きも見えて来ないと思いますので、学習を進めてみることをお勧め致します☘️
@@webgodweb やっと my Typing レベルFです。
65歳爺です。まずはタイピングと言うことで毎日１時間、練習してますが ,上達しません。
ミスを少なくするにはゆっくり間違えずに打った方がいいでのしょうか？
ミスを少なくともいうことであれば、おっしゃる通り少し速度を下げた状態で練習される方が良いと思います。
最初は疲れるかどう思いますが、タイピングの練習時間を朝晩45分づつにする等、練習時間を増やしてみていってください。
毎回、打ち込み練習する文章を変えるのではなく、同じ文章を何度もミスなく打ち込めるように練習するのも一つの方法としてオススメです。
かわいい
コメントありがとうございます😂🐥
被り物は何かの罰ゲーム?w
😂😂
わざわざドンキに買いに行きました🐥
冒頭のピヨピヨ笑いましたｗ
笑っていただけてよかったです😂ピヨピヨ…🐣
佐賀大出身ですか？
すみません、違います😂
atomじゃないんかい
以前は私もAtomを使っていましたが、今は断然VS Codeがお勧めですね…！
🐣🐣。ぴよぴよ。🙇♂言いたかっただけです。ぴよぴよ。ってっ、恥ずかしいですよねっ。すいません。冗談で。
たくさん言ってください！ぴよぴよ！！！🐣🐣
単語を知ってるだけですお恥ずかしい
コメントありがとうございます！
是非これから学習をはじめてみてはいかがでしょうか！☺️
歯の黒ずみ綺麗になってるやん
ちょっと解らんですわ、あほでごめんよ。
最初はチンプンカンプンでも、コードに触れているとだんだん慣れていただけるのではないかと思います…🐥🐥
ガチの初心者です。
最初はどのように勉強されましたか？
動画を見ていて、cssを読み込むコード書いたときにrelやhrefなどありますがこれは意味を理解するより、暗記するものなのでしょうか？
分からないことを調べるのが難しいです。。
コメントありがとうございます！まさに、学習を始めたばかりのうちは特に、意味を理解するより「こういうものなんだ」と覚えてしまった方が早いことがかなり多いです。数学の公式に近いと思います！とりあえずは無心で覚えてしまって、意味がわからずでも使えるようになっておくと、後々理解が追いついてくることが多かったと思います！