div は基本は装飾用のタグですね。MDNリファレンス developer.mozilla.org/ja/docs/Web/HTML/Element/div > class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。 たまに国際化対応のため、という感じですが、ほぼ100%スタイル付け用途かと思われます。 SEOもまた深いんですよね。実はSEOもめちゃくちゃ強いので、その講座もやりたい・・・けど当分はJavaScript講座でできません・・・(^O^;)
めちゃくちゃ初心者やけど、言うとおりにそのまま進めてたらちゃんと出来た
感動
自分で作業しながら出来るのええわ〜
情報学部生です。これから頑張りたいと思っていたのでありがたいです。とてもわかりやすくて今後の動画も楽しみです！
一番初めに動画見た時は速すぎて何言ってるかわからなかったけど、ドットインストールで学習してから見るとめっちゃすんなり理解できる。
分かりやすすぎて話し方も声も聞きやすくてとってもありがたいです☺️これからオープン系全体的に学習させていただきます。
起業してお忙しい中ありがたい。
素晴らしい動画です。
私の未来に光が見えました。
感謝いたします。
大手のオンライン授業で習ってますが、全然意味もわからず説明も下手くそで困っていました。しまぶーさんの教え方が上手すぎてこっちで勉強させていただきます。ありがとうございます。
ctrl+sで保存ができる。ページに反映するには保存することが必要。
プログラミングを始めようと思っている大学生です。
ドットインストールの代わりに使おうと思います！
素晴らしい動画を
ありがとうございます！！
ドットインストールでHTMLの基本文法を軽く学習してからこれを見るとかなり定着しそう！
これが、無料！？本当に感謝です。これからもたくさん見て活用させてください！
最近始めたばかりでとても分かりやすくて助かってます！！
分かりやすいご説明有難うございます。
ドットインストールで一度学習してからこちらの動画を見るとスムーズに内容が入ってきました。
別の動画も見させていただきます！
めちゃくちゃ面白いです！！
勉強させていただきます
私はHTML→CSS→JavaScriptの順番をオススメしています！
一緒に勉強していきましょー！！🤝
物凄く分かりやすくて震えました！
口をあけてポケーと聞いているだけでも理解できるので物凄く楽でした！有難うございます！
マークアップの意味を理解してなかったので、なるほどなるほどと楽しかったです！ありがとうございます！
最近転職してフロント系の仕事を始めたので、とても参考になりました。
転職おめでとうございます！！🎉
参考にしてくださったようで私もたいへん嬉しいです！
フロントエンド系で少しでもお役に立てるような動画を出していきますね。
ぜひぜひお時間のあるときに興味がある動画があればご覧ください✌✨
プログラミング初心者です。
とてもわかり易かったです。ありがとうございました。
おかげで楽しみな気分で勉強できています。ありがとうございます。
htmlもjavascriptも仕事で使うのですが基礎がなっていないのでとりあえず検索するからはじめていましたが何から手をつけていいかわからない状態でした。ですがこの動画をみてとても説明がわかりやすくてまずはこの動画を頭に叩き込みます！ありがとうございます！
説明が上手すぎる。
コロナで週5休みになったので、ポジティブにプログラミング始めました！UA-camで100時間勉強blogをやります！
最近SEOについて勉強してたら
HTMLタグの構造がめっちゃ大切やって思った。
SEOを勉強する前は全部でよくねって思ってた頃の自分に教えてあげたいくらい。
ってあくまで装飾用のタグなんよね？
div は基本は装飾用のタグですね。MDNリファレンス
developer.mozilla.org/ja/docs/Web/HTML/Element/div
> class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
たまに国際化対応のため、という感じですが、ほぼ100%スタイル付け用途かと思われます。
SEOもまた深いんですよね。実はSEOもめちゃくちゃ強いので、その講座もやりたい・・・けど当分はJavaScript講座でできません・・・(^O^;)
でよくね←凄い分かる。
神コンテンツ。ホントにありがとうございます！
めっちゃ分かりやすし、めっちゃイケメンですね☺️また楽しみにしてます❗️
情報ありがとうございます😸
あんなにいっぱい
言語あるんだー😳
テックアカデミーのフロントエンドコースで速攻つまづいていたので、助かります！ありがとうございます！
感謝です😌
ものすごく分かりやすい！
ありがとうございます😆
毎度お世話になります！
こちらこそ見てくださって嬉しいです😊
ありがとうございます。
分かりやすい。ありがとうございます
そう言ってくださって嬉しいです。ありがとうございます😆
ありがとう！！ こんな講座動画を待っていました。すごくシンプルで知りたいところが知ることができる。小学生の子供に教えたいので、私がまず覚えたい、というか、昔はflashとかドリームウエーバーとか使って仕事している時があったので、タグの書き方とかやりたいな、と思って。
少しだけ分かりました、もっと勉強します
頑張ります。感謝
質問させてください。1分50秒くらいで「保存をして」と言ってますが、どのように保存するんですか?
Google Chromeのタブに移しても「test」が反映されなくて困ってます
内容については、文句ないのですが・・・ どの再生リスト(言語？）から始めるのがオススメか？の「しまぶーのIT大学」の全体地図みたいなのが欲しいですね。
現在ドットインストールがDos攻撃受けたとかでアクセスできない中、こんな有益な動画ありがたいです！
おお、そんなことが・・・
今見たら復旧していたようで一安心😄
グーグルにとべただけだけど、なんか感動した
最初にtestと出ないどころかタイトルがindex.htmlと表示され白紙状態にしかなりません。Google Chrome、visual studio code 2を使用してます
Thanks for this video
勉強になります。
70歳です。その前の基礎がわからないので追いていけまでんでした。
イケメン＆可愛い＆真面目
しまぶーさんのhtml学習サイトのおすすめ教えて！！
いつもわかりやすい動画ありがとうございます！
スクールでHTML、erb、HAMLを学びまして、私はHAMLばかり書いていたのですが、
実際のフロントエンドエンジニアの皆さんはメインでどの言語を使用されているのでしょうか。
今回の動画をみて、ステップとしては基本のHTMLからもう一回やった方がいいかもな、、と思っていますが、
しまぶーさんもHTMLから紹介しているあたりやはりそこからやってくのがオススメと理解していいでしょうか。
ご教示頂けますと幸いです。
質問ありがとうございます！
実際のフロントエンドの現場では、ReactやVueといったJavaScriptのフレームワークを使うことが多いです。ReactではJSXと呼ばれるHTMLみたいな構文、VueもHTMLライクな独自の構文でマークアップしていきます。ベースとなっているのはどちらもHTMLなので、HTMLを理解しておくことは重要かと思います。私はJavaScript講座もやっていて将来的にReactまで扱う予定ですが、そのときにJSX等の説明の講座も作ります。
erbはRubyで使っているかと思いますが、Rubyでフロントエンド面まで構築することはドンドン少なくなってきていますね。RubyでAPI作成（DBのデータをフロントエンドに返す処理）までで、フロントエンドはJavaScriptに任せるというのが一般的になっています。またHamlも最近はめっきり聞かなくなりましたね。今後も使われることはないかと思います。erb、Hamlともに勉強する必要はないかと思います。
ちょっと長くなりましたが以上です。参考になれば幸いです😊
しまぶーさん、ご丁寧にありがとうございます！
スクールに通っているのですが、実際の現場がどうなっているか知りたくて今回の質問をさせていただきました。
HAML、そんな感じなんですね。。ちょっと残念ですがこの時点で知ることができてよかったです。
ぶっちゃけ、HAMLがいけてる言語のように刷り込まれてました・・。
改めて、HTMLをしっかり勉強していきたいと思います。
また、Rubyのこともありがとうございます。
私の通っているスクールはRubyがメインだったので、その過程でerbを学習したのだなと理解しました。
しまぶーさんのJS動画すべて見ました。
めっちゃわかりやすかったです＾＾
また、ドットインストール有料版も遅ればせながら始めまして、JSを基礎から学んでいます。
しまぶーさんの動画は現場で実践的な考え方、テクニックを紹介されているように感じますので眼から鱗なことがたくさんです。
続きも楽しみにしています！
@@GASSY-hr4xk いえいえ、学んだことは決して無駄にはならないと思いますよ。
そういうHamlのようなアーキテクチャ（alt HTML）を知れたことは十分に大きいことかと思います。
Rubyの学習過程でerbを学ぶのも当たり前ですし、ReactなどのJSフレームワークが流行る前は一般的に使われてきた技術なので、そこも学んだことは無駄ではないです。
そういう過去の資産を知ることで、今の技術の本当の価値が分かると思っています。
私の動画では過去の技術までは触れる時間がなく紹介できないので。。。
JSも見てくださり、また高い評価をくださってありがとうございます！
今後も有益なテクニック、実践スキルを紹介していきますので、ぜひご視聴ください！
またお気軽に何でも相談くださいね😊
しまぶーさん、暖かいお言葉ありがとうございます＾＾
そうですね、無駄なものはないと思います。ただ、個人的に本業ありながらの学習なので限られた時間の中で効率は求めながらやっていきたいなとも思います！
いずれにせよ、今はHTMLとJavaScriptしっかり頑張ります！
@@GASSY-hr4xk たしかに本業がある状態だと勉強時間が限られるので効率は大事ですね。効率良くするための方法もまとめていずれ動画にしたいと思います。はい、ぜひぜひHTMLとJavaScriptを学んでいってください。講座で今後少しでもお手伝いできたらと思っています！一緒に頑張りましょう(^O^)
とても分かりやすい説明ありがとうございます。
私もこの方法でchrome反映させて見ましたがコードが(！の変換したもの)そのまま反映されてしまいます。
このような場合どのようなエラーが予想されますか？
ちなみにATOMの方でもこのようにうまくchromeに反映されなくて困っています。もし時間があれば対応してほしいです(..)
おろ...ちなみにWindowsでしょうかMacでしょうか。Windowsの場合、私の手元にないため、教えられることに限りがありそうです。🙏
また私の方法では「Copy」や「Copy Relative Path」ではなく「Copy Path」になります。今一度ご確認いただけると幸いです。またどのような方法でブラウザで反映させても開発において違いはないので、最悪この動画で紹介している方法に限る必要はありません。例えば、index.htmlファイルをドラッグ・アンド・ドロップでブラウザに持っていっても反映されますので、そちらもお試しください！
一度試してみます。
ご対応ありがとうございます。
バカな間違いでした。
ファイルの保存の時index.htmlじゃなしにhtml.indexとしていたためHTMLファイルではないとの認識をパソコンがしてしまっていたためうまく反映されていませんでした。
すみませんでした笑
@@どんぐりチャンネル-q2h あらら笑
そういう小さいミスはよくありますよね。
私も最近 description と discription （iとe間違い）でミスりました笑
とりあえず解決できたようで良かったです！😂
はじめまして！
今、スクールで勉強中ですがスクールのDVDより説明がストレートで分かり易いです！
復習を兼ねてcssも拝見してます。
転職でヤフーを目指していますが、やっておいた方が良いこととかありましたら教えてください！プログラミングはしたことがなく、しまぶーさんのIT大学で勉強している段階です。JSで苦戦中です😭
全体像が分かりました。
検索エンジンに何が書いてあるのか知らせるためにタグを使う。
見た目はCSSであくまでやる。
次の講座も楽しみにしています。
URLを貼ることは出来るのに、testと言う文字が出てきません💦
保存してからじゃないと表示されないよ。
WindowsならCtrlとS
Macなら⌘とS
@@家庭教師謎の 助かりました。ずっとtestが出なくて。挫折気味でした💦
@@jinyoungjang6073 PCって自分の思った通りに動きませんものね。
困ったらいつでも聞いてくださいね。
@@家庭教師謎の 🙇優しい方ですね。有難う御座います。助けて頂ければ恩返し致します。
僕も画像が出てきて表示されませんな😢
すごくわかりやすい
とてもわかりやすくて助かります。どうもありがとうございます。
質問です。11分20秒辺りで、開始タグと終了タグをまとめて選択し、修正されていますが、そういうショートカットがあるのでしょうか？option+Dとも違うのかなと思っています。
設定でemmitをonにしてるのにtabで雛形以外の補完が出来ない人向け
右下がdjango HTMLになってると思うのでHTMLに変更してください
ありがとうございます！！
1:29の保存してとはどうゆうことですか？
こんにちは😃
今、パソコンを買い替えたいと思っておりますが、中古のMacBookを見てますが、2016年は古すぎますか？
HTMLと関係なくて草
エミットをした時の感動感w
文系三年がんばります。
独学で勉強からYahoo就職まではどのくらいの期間を要しましたか？
学校では、メモ帳を使ってやってて、タグから終了タグ打ち込むのクソめんどかったけど、困難があるのか。でもマック持ってないからなぁ。
Visual Studio codeならwindowsでもつかえるよ。
パソコンはやはりMacBookですか？
はい、そうです！ちなみに私のスペックは下記です！
- MacBook Air (Retina, 13-inch, 2018)
- プロセッサ 1.6 GHz デュアルコアIntel Core i5
- メモリ 16 GB 2133 MHz LPDDR3
- ストレージ 256GB
そのまま話を続けちゃいますが、、、AirかProかは人によりますね。性能に関しては大は小を兼ねるのでProに軍配が上がります。私は外で作業することが多く、Webの開発用途だとAirで足りることが多いのでAirにしている感じですね。iOS, Androidのアプリ開発も視野にいれるのであれば、最初からProが良いかと思います。
カスタマイズに関しては、私はプロセッサとメモリを最大までカスタマイズして、ストレージは最小にするタイプです。ストレージは代替できるのであまり求めないでもいいと私は考えています。長くなりましたが、参考になれば幸いです！
しまぶーのIT大学 ご丁寧にありがとうございます😊
エディタはEclipseでも良いのですか？
Eclipseとvscodeはどう違いますか？
初心者ですが、ブラウザとエディターはどうやって動画のように並べて表示するのですか？
質問です。ゲストブラウザーでブラウジング中という画面にはどうやってアクセスするのでしょうか？
Buen video
11:20あたりのタグ書換えのときにはじめと終わりが両方書換られるのはVisual Studio上の設定でしょうか
差し支えなければどなたかご教示いただけますと幸いです。
Command + D で同じテキストに同時にカーソルを当てることができます！
その仕組みを利用してショートカットしている感じですね✌✨
@@shimabu_it できました！わざわざご丁寧に返信を下さりありがとうございます！
@@k4s4a3 いえいえ〜また困ったらいつでも😁
リファレンスは知らなかった。
VSCode自体が深いです。いじりまくりたくなります(笑)
0.75倍速で見るとちょうどいいですよ
UA-camの再生速度を変更できる機能は控え目にいって神ですよね😇
しまぶーのIT大学 遠回しに言って早いって言ってんだよ気づいて。
わたぼう
自分の理解力が足りないぞ
俺は1、75
あらた はいはいつよいつよい
@@zako_death_yo577 頭悪そう
ウェブフロントエンドってなんですか？簡単に教えて欲しいです
ユーザー側とサーバー側の、ユーザー側の事？
オススメのパソコンを教えて下さい。
来月M2のMacbookが出るという噂なので、今はそれを待つのが良いかもです。もし発売されなかったらM1のMacbook Airですかねー！
言語を習得する時は、参考書を見ながら勉強した方が、宜しいですか？
1週目。
私もです。素人ですみません。testの表示が出ません。お願いします。
おや、、、ブラウザにドラッグアンドドロップしても出ないでしょうか・・・？
そしたらファイル（index.html）を右クリックすると「Copy Path」と出るはずなので、それを押してください。
するとコピーができるので、それをブラウザのURLのところで貼り付けてエンターしてみてください。
そしたらおそらく表示されるかと思います！✨
ウィンドウズ11のサーフェスのパソコンを使っているのですが、！を出力した時のコードが若干違っていたり、GoogleChromeにファイルをコピーしても何も出てきません。
なぜなのでしょうか？
Chromeとスタジオコード そんな画面にするにはどうしたら良いのか？
分かってる人用の説明。文系だから説明が理解しにくいのか、文系なら説明が丁寧ならＧＯＯＤ
1:34 testって出ないです(´ﾉω；`)
どうやったら出るのか教えてください🙏
おや、、、ブラウザにドラッグアンドドロップしても出ないでしょうか・・・？
そしたらファイル（index.html）を右クリックすると「Copy Path」と出るはずなので、それを押してください。
するとコピーができるので、それをブラウザのURLのところで貼り付けてエンターしてみてください。
そしたらおそらく表示されるかと思います！✨
@@shimabu_it URLは貼られている状態なんですけど、TESTって文字が出ないんですよねぇ( ﾉД`)
むむ〜あと2点確認お願いします！
・index.htmlで打ち間違いはないですか？
・ちゃんとbodyタグの中にtestって書かれていますか？
お願いします🙏
@@shimabu_it 確認したところそれもできていたのですが反映されません...
これってtestから例えば「あいうえお」に変えた場合、必要は作業はあるのでしょうか？
@@KKK-dh9qp んーーー原因が不明ですね・・・
ちなみに必要な作業ファイルを保存するのとブラウザでリロードだけです。
例えばドットインストールのHTMLの無料のレッスンとかを見てもらって、そこでドットインストールと同じような方法でやって、見れないかどうか試してみると原因が分かるかも知れません。すみません、力になれず・・・(/_;)
なぜか最初にhtmlファイルの保存ができない
動画の頻度上げてもらえると大変ありがたいです😭😭
ありがとうございます！
なるべく頻繁にアップできるように頑張ります🔥
プログラミング未経験で今後の為にも勉強を始めようと思うんですが何から始めたら良いかわかりません、、
よかったらアドバイス頂きたいです！
コマンドはどこにありますでしょうか?
Macなら⌘
WindowsならCtrl
ブラウザって何ですか
開くってどうすればいいの？
ブラウザはWebに接続するためのものです。
vs2019でhtmlって書けますか？
Visual Studioのことですかね。おそらくVisual Studioでもいけるかとは思いますが、やはりVS Codeの方が向いているように思います。あちらはIDEで重いかつ高機能なので、フロントエンドの軽い処理には向いていないように思います・・・が私もガッツリ使った経験があるわけじゃないので、詳しいところまでは分かりません(^O^;
すみません、! マークを押しても最初の一行だけしか表示されず展開されません。
何故でしょうか？
おろ・・・うまくいきませんか・・・
そしたらまず下記2つをまずはご確認いただきたいです。
①VS Codeを使われていますか？
②！マークは全角文字になっていないですか？
それでも駄目な場合は再度教えて頂けると幸いです😊👍
最初のブラウザに持って行っても何も表示されません！どなたか原因がわかる方はいますか？
………？て感じやけど
がんばって勉強します（笑）
エディター…？ 検索してきます笑
文学部で完全に初心者なのですが、初めて見るのはこちらの動画で良いのでしょうか？？
testって書いて保存の仕方がわかりません
キーボードの
Ctrl s または
⌘ s
VS cordってappが沢山出てきたんですけど、どれをインストールすれば良いのですか？ 勉強し始めたばかりで何が何やら分からない状態なので、教えて頂けるとありがたいです。
こちらのStable Buildを押せばダウンロードが始まるかと思います！そちらです！
code.visualstudio.com/
ブラウザの方にtestと出ません
初心者の私には難しく感じました💦
低評価0すげえ、
わかりやすいしいいね！
有料コンテツン並み！！！
たしかに・・・！
嬉しいですね。今後も有料コンテンツ並の講座を無料で出していきますね😊
よく見たら「有料コンテツン」ってなってて笑いました・・・
高校生ですが結構為になります＜(_ _)＞
結構！？
「とても」になるように精進します！😁笑
ブラウザとVSCODEを同時に画面に表示させる方法がわかりません、教えてください。
ズブの素人には全くわからない内容でした。
基礎ではない。実践編って感じ
やろうと思ったけどデザインセンスが壊滅的過ぎてやめた。
とても早口なので、分かりにくいです。初心者向けではなくある程度HTMLやCSSを経験したことがある人には初歩的な事だと思われますが。これなら何らかの参考書を買ってじっくりやりたいなと感じる動画ですね。
1言目からわからんのやが
わかんない(இдஇ; )
どこが分からないとかありますか？
できる限り教えますよ😊
メタ要素・メタデータ・メタ情報：いわゆる「付帯情報」のこと
データ本体ではなく、そのデータの説明書きのこと