【プログラミング講座】HTML、CSS，JavaScriptの関係性を解説！エンジニア初心者や入門者にオススメ！

Подписаться 118 тыс.

Просмотров 145 тыс.

50% 1

文系プログラミング未経験 → 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

Хобби

Опубликовано:

15 янв 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 126

@shimabu_it 4 года назад

プログラミング講座は初めてで不慣れなところが多くてすみません。まず文字が小さすぎました。次回から直します。あと簡単に解説したつもりでしたが動画で見返すと意外と分かりにくいですね。こちらも気をつけます。だんだんと改善していきますので最初は温かい目で見ていただけると幸いです。

@user-fo8bt9ql6d 4 года назад

webデザインの勉強をしようと考えています、大学生です。 HTML CSSを使わなくてもwebを作ることができるととある人から言われたのですが本当ですか？

@shimabu_it 4 года назад

@@user-fo8bt9ql6d 返信に気づかず遅れてしまいました。ごめんなさい。さっそく回答します。 html, cssがなくてもホームページレベルは作れます。例えばwixなどを使えばhtml, cssの知識がほぼなくても作れるかと思います。ただし、エンジニアを目指す上ではhtml, cssは必要な知識になります。 wixを使ったらどんなデザインでもできるというわけではなく、細かいことをしようとすると難しかったり、また実際のサービス運用という点では向いていません。wix系のツールが得意なのはホームページ作成レベルで、基本的にサービス開発では使えません。例えばYahoo、食べログ、ホットペッパーなども、htmlとcssの知識が必ず使われています。なので、html, cssはサービス開発ではほぼ必須、ということになります！

@NY-li6jp 4 года назад

他の動画も全部わかりやすかったです。聞き取りやすいしホワイトボードの使い方もとてもいいと思いました。絶対伸びるチャンネルだと思うので頑張ってください！応援してます。

@user-xe3rm4bs3m 4 года назад

ありがとうございます😊 それぞれの関係性がしっくりきてわかりやすかったです。

@Getsu_Ka_Sui_Moku_Kim_Jong-Un 3 года назад

めっちゃ分かりやすかったです！

@user-pz1sf8tv3h 4 года назад

いつも拝見してます！わかりやすいです！

@00uru49 4 года назад

わかりやすいですね！

@C4nsha 4 года назад

いや分かりやすすぎ！

@user-lz3tc7lx6v 4 года назад

わかりやすいです

@peanutsroom555 3 года назад

めちゃくちゃ分かり易いです👏

@user-il5vn5sc5i 3 года назад

海外からいつも拝見して勉強させて頂いております。最高のチャンネルです、ありがとうございます。

@user-jj8up3nk9s 3 года назад

説明も丁寧でとてもわかりやすかったです。

@neetchannel12 2 года назад

しまぶーさんの動画は本当に解りやすくて助かります。今後もよろしくお願いします。

@wake767 4 года назад

vscのショートカット紹介はとても嬉しいです。本格的な講座に入ってからも便利な使い方を繰り返し教えて頂けると助かりますー♪

@casettejp 3 года назад

これ本当に無料で良いのかと思う程に素晴らしい講座ですね。HTMLとJavaScriptの昔の知識を最新のものにブラッシュアップするために見始めたのですが、完全独学でやるよりも100倍速く習得出来そうです。

@georgetakemori681 3 года назад

全然わかります！コードって難しそうに思いますが、このように動画で見ると理解しやすくて面白いですね。

@user-hh9mt5xi8f 4 года назад

今日からプログラミング講座の視聴始めました。とてもわかりやすいので今後も更新楽しみにしてます！

@izunokimi5348 3 года назад

HTMLとCSSの次に何を学ぶべきか分からなかったので、この動画にたどり着けて良かったです😊とても分かりやすくて勉強になりました🙌✨

@user-he4si5fj1g 3 года назад

HTML、CSS、JSのファイルを分けるところが意外と盲点だったので助かりました！

@user-ji1kp2nd5e 4 года назад

プロゲートで勉強していたほぼ初心者です！プロゲートだけをやってても勉強でいるのですが、なかなか自分で実際に作るとなるとイメージが湧かず、行き詰まってたところでしまぶーさんに出会いました。こういう実習系はなかなかなく、説明もめちゃくちゃわかりやすいです。今後も体に気をつけて投稿頑張ってください！楽しみにしてます。

@editedbyyui 2 года назад

情報がぎゅっと詰まっていて、かつ大変わかりやすく、初心者の私でも楽しく拝見することができました！チャンネル登録させていただきます。他の動画も見て勉強してきます！貴重な動画をありがとうございます！

@RK-vi5yz 3 года назад

デジタルマーケティングの仕事をしており、LP、メルマガ、記事などのコーディングが完全にWEBデザイナー委託ではないので書籍を片手に悪戦苦闘していましたが、こちらのチャンネルに出会ったおかげで格段に学習が早まり、かつ今までやっていた部分の理解は深まっています。本当にありがとうございます！

@tech-quest 2 года назад

フロントエンドが苦手なエンジニアさんって結構いらっしゃるので、こういった分かりやすい解説動画はとても助かりますね！！！😊 いつもありがとうございます✨

@hor9184 4 года назад

最近プログラミングを始めたものです。とてもわかりやすく、やはり人の説明を聞きながらだと頭に入ってきます！

@nekohaha6036 3 года назад

プログラミングを学び始めた初心者です。他の動画で学んでいましたが、理解ができなくなりついてゆけなくなっていたところしまぶーさんにたどり着きました。噛み砕いた説明がとてもわかりやすいです。専門的な内容は理解できないことが多々ありますが、これからも視聴させていただきます。

@tomorrow1563 4 года назад

ネットのプログラミング講師の中では一番わかりやすく聞きやすいのではないでしょうか。もっと伸びてほしいですね。

@shimabu_it 4 года назад

うおお、高い評価をいただけて光栄です😂 現状に満足せず、もっと分かりやすくしていきますよー！！🔥

@yurukei20 4 года назад

しまぶーさんのドットインストールの勉強法をもとに、勉強を進めています！今回の動画はその復習にもなり、とても良かったです。ありがとうございます！！

@shimabu_it 4 года назад

ありがとうございますー！今後もたくさん学びになる講座を出していくので一緒に学んでいきましょうね！😊

@user-eq7bn7cf3s Год назад

うん、とてもよかった

@hiromisakurai7569 4 года назад

Awesome!!!

@user-lx5uf1vr7q 4 года назад

いつも寝る前に見て勉強させて頂いてます。自分はパソコン作業が好きなので、しまぶーさんみたいにYahooなどの大手のプログラマーになりたいと思ってます。いつもわかりやすい配信ありがとうございます。

@shimabu_it 4 года назад

嬉しいコメントありがとうございます。視聴者さんがIT大手に就職できたり、副業で稼げるようになったり、リモートワークで好きな働き方ができるようになることが最初の目標です。そのために、今後も質の高い動画を出せるように頑張ります😆

@peanutsroom555 2 года назад

VS codeでJSがHTMLに取り込めなくて泣きそうでしたが(headに～と入れていた）、この動画を見て解決できました！ありがとうございます！

@user-sw5nx5if9f 4 года назад

今日からプログラミング講座の動画で勉強を再開しましたが、ビックリするくらい分かりやすかったです。Emmetやショートカット入力などの補足説明もあり、とても有益な情報でした。ありがとうございます!!

@shimabu_it 4 года назад

ありがとうございます！もっと有益な情報を届けられるよう今後もプログラミング講座の動画もたくさん作る予定ですので、お楽しみに！😊

@tokumeiryo 3 года назад

関係性がとっても良く分かりました。今、HTMLとCSSをざっくりと学び終わったので、JavaScriptに進んでいきたいと思います。

@user-sc4pq1ss6r 3 года назад

HTML CSSはどのくらいの期間勉強しましたか？

@user-cq5ie3yj6v 4 года назад

わかりやすい…すごい笑

@TashinukiChannel 4 года назад

とても勉強させていただいています！！動画の途中でdiv id= というタグ？があるのですが、div class= にする場合となにか違いがあるのでしょうか？プロゲートやっていると、div class=が多くて、どっちにすればいいのでしょうか、、🤔

@user-ko4ws2ng1q Год назад

M2MacBook買いましたー。フロント、バック両方とも使えるエンジニアに頑張ります！

@masterj9461 3 года назад

とんでもないチャンネルに出会ってしまった😂 こういう解説付きのコーディング動画を見れることを夢見てた

@user-py4sj5qy5x 3 года назад

今どんな感じですか^ ^

@tomokoara6546 2 года назад

チャンネル登録しました。これから私も勉強していきたいと思います。

@mikansukidesu8482 2 года назад

初見ですが、いろいろな小技を交えながら学ぶことができました。大学から始めた自分にとってはすごく良い動画でした。登録したのでこれからもお世話になります。✌✌

@shimabu_it 2 года назад

良かったですー！ぜひぜひこれから学んでいってください😊

@harukame2971 2 года назад

すごく分かりやすくて、使いこなし方も丁寧にご説明されているので、ありがたいです(^^)今から動画を全部見ていこうと思いました！ありがとうございました😊

@twggnpho23 4 года назад

正直、有料でも見る価値のある動画ですねありがたいです

@user-dy6sx3tf6v 2 года назад

分かりやす過ぎて、一緒に勉強している友人たちに教えてしまいました！！ javascriptについて、一つお伺いしたいのですが、WEBデザインの場合、フレームワークなどがあるため素のjavascriptは書くことがなく、さらっと構文等を覚えておけば良いと聞きました。 javascriptについては、構文と要素を取得でき、その要素に対して、どのようなイベントがあれば、どう動くかを命令できると覚えておけば良いですか？

@krtn6580 4 года назад

1000人達成おめでとうございます！

@shimabu_it 4 года назад

ありがとうございます！50,000人が今年の目標なので、それに向かって今後も動画出していきますー！！

@user-rx2kc2of3u 4 года назад

しまぶーのIT大学たった3ヶ月で1000人は良い方ですよ。この調子なら本当に5万人行けるかもです

@shimabu_it 4 года назад

自分でもビックリしています。今後もより一層頑張ります💪

@pucca-yh5lu 4 года назад

しまぶーのIT大学に、入学させていただきました。笑とても為になる動画をアップしていただきありがとうございます。素晴らしい出会いに感謝しております。日本ではWEBエンジニアを目指し、学習しようとしても年齢で切られる悲しい傾向がある事は否めません。それを言い訳にせず、チャレンジ精神あるのみです！しまぶーさんのママ世代ですが、よろしくお願いします。

@ygai5697 4 года назад

最近プログラミング学習を始めました。いつも、しまぶーさんの動画で復習をしています(^^♪ 分かりやすく説明してくれて、ありがとうございます☆

@user-lv1pi2gd9u 4 года назад

独学なのでprogateだけでしたが、しまぶーさんのおかげでプログラミングらしくなってきて、とてもうれしい。しまぶー大学は希望の光です。プログラミング講座楽しみにしています。

@shimabu_it 4 года назад

ありがとうございます！ただ1点だけ、しまぶー大学ではなくIT大学です🤣笑

@user-hd2gw6jw9t 2 года назад

、

@noratest 3 года назад

プログラミング自習したい社会人です。本当にありがたいです。

@shimabu_it 3 года назад

そう言ってくださって嬉しいです。こちらこそコメントありがとうございます！🙏

@cty9849 2 года назад

プログラミングの勉強を始めようと思い、色々な動画を見ましたが、しまぷーさんの動画で学ぶことを決めました。とてもわかりやすいです。 HTML,CSS,Javascriptをまず見て実践させていただきます。私はSalesforceをメインで利用していますので、もし知識がありましたら、Apex、Visualforce、LWCの動画も出していただけると幸いです。ただこれらは上記のプログラミング言語に似ているとされているようなので、まずはこちらから勉強させていただきます。

@harumim4409 Год назад

説明が大変上手で、一度みたら忘れないレベルでした。登録者が多い理由がよくわかります。「しまぶーのIT大学」さんに入学のため、チャンネル登録させていただきました。これからもいい講義期待致します。ありがとうございました。

@victor_1519 4 года назад

バックの夜景きれいですね

@kazuya2481 3 года назад

Pythonを勉強してて、フロントエンドもそろそろやりたいなと思っているところで観ました！導入にはベストな動画でした^_^

@user-hh3bh8ur1p 4 года назад

いつも楽しく見させていただいております。ゴリゴリにカスタマイズしたVSCodeのプラグインや設定が見てみたいのですが、別の動画でやったりしないでしょうか？

@shimabu_it 4 года назад

ありがとうございます！VSCodeの使い方はまた別途解説したいと思っているので、そのときにあわせて紹介しようと思います。ただ今見たらそんなにゴリゴリかっていうと、めちゃくちゃゴリゴリじゃない気もしてきました・・・😅（一応、20個以上プラグインを入れていますが）

@dmcreatorjapan 4 года назад

教え方うまい！個人的に思ったのがドットインストールの田口さんより教え方うまいかも！？まあ田口さんはプログラミングの超人やけどね。

@user-zb3em5oz5o 3 года назад

動画とても分かりやすくて助かっています！質問したいのですが、このコードはbodyタグのどこか1箇所にさえ書けばいいんでしょうか。

@user-xq2xx2ht5w 3 года назад

これ、わたしも知りたいです！

@vstar8659 3 года назад

声が聞きやすい。です

@sakata9246 4 года назад

ショートカットの補足なども多くて、とてもためになります！一つ、些細なことなんですけど気になることがありまして、「〜を教えていきます。」よりも、「〜を説明していきます。」の方が、聴き手からして、「印象が良くなるのでは？」と感じました！

@shimabu_it 4 года назад

たしかに...！ご指摘ありがとうございます！もっと印象良く話せるように改善させていきます！動画では分かりづらいかもしれませんが、毎回発表時にテンパってて言葉遣いまで意識できていないことが多いです。もっと余裕を持って、丁寧な解説ができるように頑張りますね😊

@yoshinoriokino8352 4 года назад

しまぶーさんの影響で，ドットインストールの勉強を始めました！フロントエンジニアを目指したいと思います．しまぶーさんのプログラミング動画もこれからたくさん見させていただきますm(_ _)m

@shimabu_it 4 года назад

おーーそれは嬉しいです！🤝 フロントエンドエンジニアになれるような講座を出していこうと思っているのでピッタリですね！今後もぜひ見に来てください！(￣ー￣)

@takeoogu 4 года назад

しまぶーのIT大学１年生（60歳代）です。エディターを　atom　からしまぶーちゃんおすすめの物に変えました。皆さんのようにIT業界を目指してるわけではないですが頑張りますッ。しまぶーのIT大学はわかりやすくて聞きやすく、また誠実さも好感度たかいです(笑)。応援してます！

@shimabu_it 4 года назад

コメントありがとうございます！😊 VS Codeの開発元であるMicrosoftが、atomの開発元のGitHubを買収したので、atomは今後どうなるのかなーと個人的に気になっています！プログラミングは勉学としてもオススメですし、学びが深まれば何か作れるようになるのも良いですよね。令和の日曜大工です！😆笑今後も学びになる動画を出していきます👍✨

@a_kira9235 4 года назад

わかり易いご説明ありがとうございます。私はこれからプログラミングを勉強していきたいと思っていましたので、この動画がとても参考になりました。初心者な質問で申し訳ないのですが、一点教えていただきたくご質問させてください。 style.cssファイルのリンクはheadタグに入力されていますが、index.jsファイルのリンクはbodyのbuttonタグの下に入力されていて、リンクさせるだけなら最初のstyle.cssのリンクのとこの下に入力した方がファイルのリンクがまとまっていてわかり易いと思ったのですが、buttonのようなイベントを発生させたいタグの下に記載するのが一般的なのでしょうか？

@shimabu_it 4 года назад

動画のご視聴、そしてご質問ありがとうございます！scriptタグをheadタグ内などに置かない理由は下記2点です。 1. JavaScriptの読み込みはHTMLの描画をストップするため、headタグ内で読み込ませるとページの表示が遅くなってしまいます。 2. JavaScriptでHTML要素（DOMといいます）にイベントを紐付ける場合、そのDOMが読み込まれる前にJavaScriptを実行してしまうと、DOMが存在していないためエラーが発生する可能性があります。なので、なるべくHTMLが読み終わる直後（すなわちbodyの終了タグの直前）に置くのがベストプラクティスとされています。以上の回答で伝わったでしょうか？また分からなければ教えてください！そして今後の動画でも分からないことが出てきたら遠慮なくご質問くださいね！😁

@a_kira9235 4 года назад

ご親切にご回答していただきありがとうございます！とてもわかり易い説明でした。これからしまぶーさんの他の動画も見させていただき、勉強させていただきますね。これからも頑張ってください。

@user-lx5uf1vr7q 4 года назад

しまぶーさんはいつからパソコンの知識を持とうと思ったんですか？

@shimabu_it 4 года назад

大学4年の10月頃ですよ！🙂

@user-xd9wv7ff4e 4 года назад

12:22 ではfont-sizeを上の行に移動させていますが、どのような操作を用いて行いましたか？

@shimabu_it 4 года назад

Macの場合はoptionボタンを押しながら↑でできます😊

@kenken-EL 3 года назад

いつも、学ばせて頂いております。何がすごいかというとおこがましいですがビジネスセンスに驚きました。きちんと海外のRU-vidもマーケティングなさっていますね。海外のマークアップの有名チュートリアルの日本語版という感じです。さらに日本人のデザインに合うようきっちりとしたデザインと解説で行っていただき勉強になります。海外は結果重視の事が多いですからね（僕はラテラルでよいと思っています）これからも拝見させて頂きます。いつもありがとうございます。

@sea983 3 года назад

ファイルの保存はコントロールキー+s で出来ますよ(Windows) 殆んどの人が知ってるか…w

@user-zv5iu8jb8k Год назад

とても分かり易いけど、お年寄りにもついていけるようゆっくりして下さると嬉しいのですが、、、応援します〜！

@sugurusato4485 4 года назад

イケメン

@user-yi9fo7sd7r 4 года назад

だいぶ前の動画にすいません。 HTML/CSSやJavaScript などを使って開発をするにはWindowsよりMacの方がいいのでしょうか？

@shimabu_it 4 года назад

私はMacをオススメしていて、理由としては①使っている人が多く教える際に環境差異が起きにくいから②ドキュメントがMac前提のものも多いから③Apple系の開発をしたい場合はMacしかできないから、です。ただ正直、Windowsでも学習には支障はないレベルではあります。なのでMacを準備するのが難しいようでしたらWindowsで学ぶのもありかと思いますよ！

@user-yi9fo7sd7r 4 года назад

しまぶーのIT大学そうなんですね。夜遅くにありがとうございます。まずは、Windowsで動画見ながら学習していこうと思います。これからもよろしくお願いします。

@スプラトゥーン6 Год назад

13:50

@akihitoiyoku1572 2 года назад

お世話になります。とても分かりやすい動画をありがとうございます。前のものなので、返信は難しい期待できないかと思いますが、一つ質問です。 14行目のfunctionの()に中身を内容を書かず、｛｝内で書くのは何故なのでしょうか。

@shimabu_it 2 года назад

JavaScriptの関数の仕様ですねーよかったらJavaScriptの講座もご覧ください😊✨

@ram.dev7 3 года назад

Udemy にもビデオアップロードしてありますか？最初から最後までのビデオ。

@shimabu_it 3 года назад

Udemyは使っていません😭

@ram.dev7 3 года назад

分かりました。

@tubechanel4399 4 года назад

クロームってどこのをダウンロードすれば良いのですか？？？

@shimabu_it 4 года назад

このページにあるやつですね！ www.google.com/intl/ja_jp/chrome/

@user-zv5iu8jb8k Год назад

とても分かり易いけど、お年寄りにもついて行けるよう（2分の1倍速）お願い致します。応援します〜❗

@shimabu_it Год назад

RU-vidの機能で0.5倍速もできるのでよかったらそちらもお試しください😊

@KANOeNe1015 4 года назад

19:00

@shimabu_it 4 года назад

19:00に何かありますか！？

@user-eo4kz9gp3f 4 года назад

testとbodyの中に入力して保存ってどうすればいいですか？しょぼい質問ですみません。

@ky3150 4 года назад

Control + S でできますよ！ MacだとCommand + S かな？

@user-eo4kz9gp3f 4 года назад

@@ky3150 ありがとうございます

@shimabu_it 4 года назад

代理返答ありがとうございます😭 勉強中の方が教え合う、私にとって理想の図でした🙌

@user-gu3jl1fe7j 2 года назад

しまブーさんは自動保存を使っていますか？

@shimabu_it 2 года назад

使っています👍

@clarify9283 4 года назад

保存の仕方ってどうするんですか？

@shimabu_it 4 года назад

保存というのはファイルの保存ですか？それでしたら「Command + S」でも保存できますし、上部メニューのFile（ファイル）から保存することもできますよ！

@sea983 3 года назад

これってサイトを公開する方法ってありますか？チャンネル登録しました　すごい参考になりました、ありがとうございます

@shimabu_it 3 года назад

VercelかGitHub Pagesを使ったりするのが楽です。過去にGitHub Pagesの講座は出していますが、日にちが経ってるのでもしかしたら少し古い可能性もあります。 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kftqAritHyc.html Next.jsをVercelに公開する方法は解説していますが、普通のHTMLとかはまだ無いですね。いずれ機会があれば...(；・∀・) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hL6bDTNQhAc.html