【プログラミング講座】HTML、CSS，JavaScriptの関係性を解説！エンジニア初心者や入門者にオススメ！
HTML-код
- Опубликовано: 15 янв 2020
- 文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
🚀 今日のひとこと
ついにコードを書きます！
プログラミング講座の第一弾は
HTML, CSS, JavaScriptの関係を教えます！
プログラミング学習したての初心者・入門者にオススメ！
VSCodeとGoogle Chromeを用意して実際にコーディングしてみよう！
🔥この動画だけは見よ！
プログラミング言語のオススメはJavaScript！
初心者にも易しい難易度で将来性も抜群！入門向き！
• プログラミング言語のオススメはJava...
エディタのオススメはVisual Studio Code！
プログラミング初心者やフロントエンドエンジニアはVSCode一択！
• エディタのオススメはVSCode！プログラ...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#プログラミング講座 #HTML #JavaScript 
Хобби
プログラミング講座は初めてで不慣れなところが多くてすみません。まず文字が小さすぎました。次回から直します。あと簡単に解説したつもりでしたが動画で見返すと意外と分かりにくいですね。こちらも気をつけます。だんだんと改善していきますので最初は温かい目で見ていただけると幸いです。
webデザインの勉強をしようと考えています、大学生です。
HTML CSSを使わなくてもwebを作ることができるととある人から言われたのですが本当ですか？
@@user-fo8bt9ql6d 返信に気づかず遅れてしまいました。ごめんなさい。さっそく回答します。
html, cssがなくてもホームページレベルは作れます。例えばwixなどを使えばhtml, cssの知識がほぼなくても作れるかと思います。ただし、エンジニアを目指す上ではhtml, cssは必要な知識になります。
wixを使ったらどんなデザインでもできるというわけではなく、細かいことをしようとすると難しかったり、また実際のサービス運用という点では向いていません。wix系のツールが得意なのはホームページ作成レベルで、基本的にサービス開発では使えません。例えばYahoo、食べログ、ホットペッパーなども、htmlとcssの知識が必ず使われています。なので、html, cssはサービス開発ではほぼ必須、ということになります！
これ本当に無料で良いのかと思う程に素晴らしい講座ですね。HTMLとJavaScriptの昔の知識を最新のものにブラッシュアップするために見始めたのですが、完全独学でやるよりも100倍速く習得出来そうです。
他の動画も全部わかりやすかったです。聞き取りやすいしホワイトボードの使い方もとてもいいと思いました。絶対伸びるチャンネルだと思うので頑張ってください！応援してます。
ありがとうございます😊
それぞれの関係性がしっくりきてわかりやすかったです。
vscのショートカット紹介はとても嬉しいです。本格的な講座に入ってからも便利な使い方を繰り返し教えて頂けると助かりますー♪
全然わかります！コードって難しそうに思いますが、このように動画で見ると理解しやすくて面白いですね。
しまぶーさんの動画は本当に解りやすくて助かります。今後もよろしくお願いします。
海外からいつも拝見して勉強させて頂いております。最高のチャンネルです、ありがとうございます。
説明も丁寧でとてもわかりやすかったです。
わかりやすいですね！
いつも拝見してます！わかりやすいです！
めっちゃ分かりやすかったです！
今日からプログラミング講座の視聴始めました。
とてもわかりやすいので今後も更新楽しみにしてます！
わかりやすいです
いや分かりやすすぎ！
めちゃくちゃ分かり易いです👏
ネットのプログラミング講師の中では一番わかりやすく聞きやすいのではないでしょうか。もっと伸びてほしいですね。
うおお、高い評価をいただけて光栄です😂
現状に満足せず、もっと分かりやすくしていきますよー！！🔥
HTMLとCSSの次に何を学ぶべきか分からなかったので、この動画にたどり着けて良かったです😊とても分かりやすくて勉強になりました🙌✨
プログラミングを学び始めた初心者です。他の動画で学んでいましたが、理解ができなくなりついてゆけなくなっていたところしまぶーさんにたどり着きました。噛み砕いた説明がとてもわかりやすいです。専門的な内容は理解できないことが多々ありますが、これからも視聴させていただきます。
情報がぎゅっと詰まっていて、かつ大変わかりやすく、初心者の私でも楽しく拝見することができました！チャンネル登録させていただきます。他の動画も見て勉強してきます！貴重な動画をありがとうございます！
HTML、CSS、JSのファイルを分けるところが意外と盲点だったので助かりました！
デジタルマーケティングの仕事をしており、LP、メルマガ、記事などのコーディングが完全にWEBデザイナー委託ではないので書籍を片手に悪戦苦闘していましたが、こちらのチャンネルに出会ったおかげで格段に学習が早まり、かつ今までやっていた部分の理解は深まっています。本当にありがとうございます！
最近プログラミングを始めたものです。
とてもわかりやすく、やはり人の説明を聞きながらだと頭に入ってきます！
しまぶーさんのドットインストールの勉強法をもとに、勉強を進めています！
今回の動画はその復習にもなり、とても良かったです。ありがとうございます！！
ありがとうございますー！今後もたくさん学びになる講座を出していくので一緒に学んでいきましょうね！😊
プロゲートで勉強していたほぼ初心者です！
プロゲートだけをやってても勉強でいるのですが、なかなか自分で実際に作るとなるとイメージが湧かず、行き詰まってたところでしまぶーさんに出会いました。
こういう実習系はなかなかなく、説明もめちゃくちゃわかりやすいです。
今後も体に気をつけて投稿頑張ってください！楽しみにしてます。
フロントエンドが苦手なエンジニアさんって結構いらっしゃるので、こういった分かりやすい解説動画はとても助かりますね！！！😊
いつもありがとうございます✨
いつも寝る前に見て勉強させて頂いてます。自分はパソコン作業が好きなので、しまぶーさんみたいにYahooなどの大手のプログラマーになりたいと思ってます。いつもわかりやすい配信ありがとうございます。
嬉しいコメントありがとうございます。視聴者さんがIT大手に就職できたり、副業で稼げるようになったり、リモートワークで好きな働き方ができるようになることが最初の目標です。そのために、今後も質の高い動画を出せるように頑張ります😆
VS codeでJSがHTMLに取り込めなくて泣きそうでしたが(headに～と入れていた）、この動画を見て解決できました！ありがとうございます！
関係性がとっても良く分かりました。
今、HTMLとCSSをざっくりと学び終わったので、JavaScriptに進んでいきたいと思います。
HTML CSSはどのくらいの期間勉強しましたか？
初見ですが、いろいろな小技を交えながら学ぶことができました。大学から始めた自分にとってはすごく良い動画でした。登録したのでこれからもお世話になります。✌✌
良かったですー！
ぜひぜひこれから学んでいってください😊
M2MacBook買いましたー。
フロント、バック両方とも使えるエンジニアに頑張ります！
チャンネル登録しました。
これから私も勉強していきたいと思います。
とんでもないチャンネルに出会ってしまった😂
こういう解説付きのコーディング動画を見れることを夢見てた
今どんな感じですか^ ^
とても勉強させていただいています！！
動画の途中でdiv id= というタグ？があるのですが、div class= にする場合となにか違いがあるのでしょうか？
プロゲートやっていると、div class=が多くて、どっちにすればいいのでしょうか、、🤔
今日からプログラミング講座の動画で勉強を再開しましたが、ビックリするくらい分かりやすかったです。Emmetやショートカット入力などの補足説明もあり、とても有益な情報でした。ありがとうございます!!
ありがとうございます！もっと有益な情報を届けられるよう今後もプログラミング講座の動画もたくさん作る予定ですので、お楽しみに！😊
うん、とてもよかった
説明が大変上手で、一度みたら忘れないレベルでした。登録者が多い理由がよくわかります。
「しまぶーのIT大学」さんに入学のため、チャンネル登録させていただきました。これからもいい講義期待致します。ありがとうございました。
Awesome!!!
しまぶーのIT大学に、入学させていただきました。笑
とても為になる動画をアップしていただきありがとう
ございます。素晴らしい出会いに感謝しております。
日本ではWEBエンジニアを目指し、学習しようとしても
年齢で切られる悲しい傾向がある事は否めません。
それを言い訳にせず、チャレンジ精神あるのみです！
しまぶーさんのママ世代ですが、よろしくお願いします。
正直、有料でも見る価値のある動画ですね
ありがたいです
プログラミング自習したい社会人です。
本当にありがたいです。
そう言ってくださって嬉しいです。
こちらこそコメントありがとうございます！🙏
プログラミングの勉強を始めようと思い、色々な動画を見ましたが、しまぷーさんの動画で学ぶことを決めました。とてもわかりやすいです。
HTML,CSS,Javascriptをまず見て実践させていただきます。
私はSalesforceをメインで利用していますので、もし知識がありましたら、Apex、Visualforce、LWCの動画も出していただけると幸いです。ただこれらは上記のプログラミング言語に似ているとされているようなので、まずはこちらから勉強させていただきます。
1000人達成おめでとうございます！
ありがとうございます！50,000人が今年の目標なので、それに向かって今後も動画出していきますー！！
しまぶーのIT大学 たった3ヶ月で1000人は良い方ですよ。この調子なら本当に5万人行けるかもです
自分でもビックリしています。今後もより一層頑張ります💪
すごく分かりやすくて、使いこなし方も丁寧にご説明されているので、ありがたいです(^^)今から動画を全部見ていこうと思いました！
ありがとうございました😊
独学なのでprogateだけでしたが、しまぶーさんのおかげでプログラミングらしくなってきて、とてもうれしい。しまぶー大学は希望の光です。プログラミング講座楽しみにしています。
ありがとうございます！
ただ1点だけ、しまぶー大学ではなくIT大学です🤣笑
、
分かりやす過ぎて、一緒に勉強している友人たちに教えてしまいました！！
javascriptについて、一つお伺いしたいのですが、WEBデザインの場合、フレームワークなどがあるため素のjavascriptは書くことがなく、さらっと構文等を覚えておけば良いと聞きました。
javascriptについては、構文と要素を取得でき、その要素に対して、どのようなイベントがあれば、どう動くかを命令できると覚えておけば良いですか？
いつも楽しく見させていただいております。
ゴリゴリにカスタマイズしたVSCodeのプラグインや設定が見てみたいのですが、別の動画でやったりしないでしょうか？
ありがとうございます！VSCodeの使い方はまた別途解説したいと思っているので、そのときにあわせて紹介しようと思います。ただ今見たらそんなにゴリゴリかっていうと、めちゃくちゃゴリゴリじゃない気もしてきました・・・😅（一応、20個以上プラグインを入れていますが）
教え方うまい！
個人的に思ったのがドットインストールの田口さんより教え方うまいかも！？
まあ田口さんはプログラミングの超人やけどね。
ショートカットの補足なども多くて、とてもためになります！
一つ、些細なことなんですけど気になることがありまして、
「〜を教えていきます。」よりも、「〜を説明していきます。」の方が、
聴き手からして、「印象が良くなるのでは？」と感じました！
たしかに...！ご指摘ありがとうございます！もっと印象良く話せるように改善させていきます！
動画では分かりづらいかもしれませんが、毎回発表時にテンパってて言葉遣いまで意識できていないことが多いです。もっと余裕を持って、丁寧な解説ができるように頑張りますね😊
わかりやすい…すごい笑
最近プログラミング学習を始めました。いつも、しまぶーさんの動画で復習をしています(^^♪
分かりやすく説明してくれて、ありがとうございます☆
Pythonを勉強してて、フロントエンドもそろそろやりたいなと思っているところで観ました！
導入にはベストな動画でした^_^
動画とても分かりやすくて助かっています！
質問したいのですが、
このコードはbodyタグのどこか1箇所にさえ書けばいいんでしょうか。
これ、わたしも知りたいです！
しまぶーのIT大学１年生（60歳代）です。
エディターを atom からしまぶーちゃんおすすめの物に変えました。
皆さんのようにIT業界を目指してるわけではないですが頑張りますッ。
しまぶーのIT大学はわかりやすくて聞きやすく、また誠実さも好感度たかいです(笑)。
応援してます！
コメントありがとうございます！😊
VS Codeの開発元であるMicrosoftが、atomの開発元のGitHubを買収したので、atomは今後どうなるのかなーと個人的に気になっています！
プログラミングは勉学としてもオススメですし、学びが深まれば何か作れるようになるのも良いですよね。令和の日曜大工です！😆笑
今後も学びになる動画を出していきます👍✨
バックの夜景きれいですね
声が聞きやすい。です
しまぶーさんの影響で，ドットインストールの勉強を始めました！
フロントエンジニアを目指したいと思います．
しまぶーさんのプログラミング動画もこれからたくさん見させていただきますm(_ _)m
おーーそれは嬉しいです！🤝
フロントエンドエンジニアになれるような講座を出していこうと思っているのでピッタリですね！今後もぜひ見に来てください！(￣ー￣)
いつも、学ばせて頂いております。
何がすごいかというとおこがましいですがビジネスセンスに驚きました。
きちんと海外のRUclipsもマーケティングなさっていますね。
海外のマークアップの有名チュートリアルの日本語版という感じです。
さらに日本人のデザインに合うようきっちりとしたデザインと解説で行っていただき勉強になります。
海外は結果重視の事が多いですからね（僕はラテラルでよいと思っています）
これからも拝見させて頂きます。
いつもありがとうございます。
わかり易いご説明ありがとうございます。私はこれからプログラミングを勉強していきたいと思っていましたので、この動画がとても参考になりました。
初心者な質問で申し訳ないのですが、一点教えていただきたくご質問させてください。
style.cssファイルのリンクはheadタグに入力されていますが、index.jsファイルのリンクはbodyのbuttonタグの下に入力されていて、リンクさせるだけなら最初のstyle.cssのリンクのとこの下に入力した方がファイルのリンクがまとまっていてわかり易いと思ったのですが、buttonのようなイベントを発生させたいタグの下に記載するのが一般的なのでしょうか？
動画のご視聴、そしてご質問ありがとうございます！scriptタグをheadタグ内などに置かない理由は下記2点です。
1. JavaScriptの読み込みはHTMLの描画をストップするため、headタグ内で読み込ませるとページの表示が遅くなってしまいます。
2. JavaScriptでHTML要素（DOMといいます）にイベントを紐付ける場合、そのDOMが読み込まれる前にJavaScriptを実行してしまうと、DOMが存在していないためエラーが発生する可能性があります。
なので、なるべくHTMLが読み終わる直後（すなわちbodyの終了タグの直前）に置くのがベストプラクティスとされています。以上の回答で伝わったでしょうか？また分からなければ教えてください！そして今後の動画でも分からないことが出てきたら遠慮なくご質問くださいね！😁
ご親切にご回答していただきありがとうございます！とてもわかり易い説明でした。これからしまぶーさんの他の動画も見させていただき、勉強させていただきますね。これからも頑張ってください。
しまぶーさんはいつからパソコンの知識を持とうと思ったんですか？
大学4年の10月頃ですよ！🙂
とても分かり易いけど、お年寄りにもついていけるようゆっくりして下さると嬉しいのですが、、、応援します〜！
12:22
ではfont-sizeを上の行に移動させていますが、どのような操作を用いて行いましたか？
Macの場合はoptionボタンを押しながら↑でできます😊
お世話になります。とても分かりやすい動画をありがとうございます。前のものなので、返信は難しい期待できないかと思いますが、一つ質問です。
14行目のfunctionの()に中身を内容を書かず、｛｝内で書くのは何故なのでしょうか。
JavaScriptの関数の仕様ですねー
よかったらJavaScriptの講座もご覧ください😊✨
とても分かり易いけど、お年寄りにもついて行けるよう（2分の1倍速）お願い致します。応援します〜❗
RUclipsの機能で0.5倍速もできるのでよかったらそちらもお試しください😊
ファイルの保存はコントロールキー+s
で出来ますよ(Windows)
殆んどの人が知ってるか…w
だいぶ前の動画にすいません。
HTML/CSSやJavaScript などを使って開発をするにはWindowsよりMacの方がいいのでしょうか？
私はMacをオススメしていて、理由としては①使っている人が多く教える際に環境差異が起きにくいから②ドキュメントがMac前提のものも多いから③Apple系の開発をしたい場合はMacしかできないから、です。
ただ正直、Windowsでも学習には支障はないレベルではあります。なのでMacを準備するのが難しいようでしたらWindowsで学ぶのもありかと思いますよ！
しまぶーのIT大学 そうなんですね。夜遅くにありがとうございます。まずは、Windowsで動画見ながら学習していこうと思います。これからもよろしくお願いします。
これってサイトを公開する方法ってありますか？
チャンネル登録しました すごい参考になりました、ありがとうございます
VercelかGitHub Pagesを使ったりするのが楽です。過去にGitHub Pagesの講座は出していますが、日にちが経ってるのでもしかしたら少し古い可能性もあります。
ruclips.net/video/kftqAritHyc/видео.html
Next.jsをVercelに公開する方法は解説していますが、普通のHTMLとかはまだ無いですね。いずれ機会があれば...(；・∀・)
ruclips.net/video/hL6bDTNQhAc/видео.html
イケメン
クロームってどこのをダウンロードすれば良いのですか？？？
このページにあるやつですね！
www.google.com/intl/ja_jp/chrome/
しまブーさんは自動保存を使っていますか？
使っています👍
保存の仕方ってどうするんですか？
保存というのはファイルの保存ですか？
それでしたら「Command + S」でも保存できますし、
上部メニューのFile（ファイル）から保存することもできますよ！
Udemy にもビデオ アップロードしてありますか？最初から最後までのビデオ。
Udemyは使っていません😭
分かりました。
これお金払ってでも受けたいです
testとbodyの中に入力して保存ってどうすればいいですか？しょぼい質問ですみません。
Control + S でできますよ！
MacだとCommand + S かな？
@@ky3150 ありがとうございます
代理返答ありがとうございます😭
勉強中の方が教え合う、私にとって理想の図でした🙌
19:00
19:00に何かありますか！？
13:50
なぜRUclipsには元何々エンジニアが多いんでしょうか? 現役はあまり見かけ無いんですがどうしてでしょう。
良いね しましたが早くてわかりにくいです。リメイクをお願いします。
Twitterやってないんですか？？
Twitterやっております！🐦
twitter.com/shimabu_it
しまぶーのIT大学 朝に紹介させて頂きました🙇♂️🙇♂️
これからもためになる動画待ってます！！
foo bar あたりから？？？って感じ。
はい。字がちっさくてみにくかったです。超初心者なので想像できないから、みやすくしてほしいです。拡大したら、これまたみにくかったです。よろしくお願いします。
why am I here?
I don't know either 😂
文字小さいし、ぶっちゃけ
初心者ですが動画の内容？？？だった
「イベントを作る」という言い方は正確じゃないですね。イベント発生時にJavaScriptのコードを実行する、とかイベントにJavaScriptコードをバインドする、みたいな言い方がいいかと。