世界一わかりやすいHTML講座！ #初心者向け #HTML入門 #プログラミング

0:00 書いてあげてねやっていきたいと思います 今回のテーマは h 2 ml これ1本で完全基礎終了 コードでございますとゆーわけですねまー すちゃん車 html 講座あのねぇあれ ですね探したんですけど意外と html 教えている講座っていうのはそんなに多く ないなってことに気づきましたのでじゃあ やってやろうかいうことでございますはい 時でまずねこの動画の視聴者のターゲット さんからいきたいんですけどもまずこり あえてプログラミング館ためつでいいから やりたいっていう形ですねそれから web サイトとか web アプリケーションを 作りたい方フロントエンドへ自然になり 体調初学者さんそれがですねまぁ スマホアプリとかサーバーサイドとかなん だかの別分野で園児に行ってるんだけども web の音フロントエンドまあ一度苦手 なんだよっていう方こういった方にですね ぜひこの動画ぜひ見ていただきたいなと

0:46 思いますこのがですねメリットがあります まずその1最速でコスパよく学べます私 です一 ohta と css まあまあ 詳しくてですねちょっと前にソフトバンク クリエイティブだというね出版社から事実 上を出しているくらいなんですけどもその 経験から口を離しさせていたと html って使用結構多い結構多い割にはじゃあ 実際実務でどれぐらい使うかというとまあ ほとんど使わないんですよねなんか めちゃくちゃ頑張って覚えたものいっぱい あるんですけどでも実際に使うのはまあ中 主ぼさんぐらいとかなんですよなのでね この動画ではもうそういった余計なところ を省いて本当に必要なところだけ解説して いきますそれから2点目のメリットなん ですけれども超初心者さんにすごく優しく

1:32 てありますプログラミングなんすかそれ っていうレベルからもでも1てみるがそれ なら書けるぐらいまで目指していきたいな と思っていますそれから a してみる バージョン5.1サポートしますといった までそんな2号店して別に新しいわけでは なくても昔からあるやつなんですけどでも あ一応最新版ということになっております この辺の技術をちゃんと前提にやりますの で古すぎる技術を教えてことはないです 実際ねこれの発展で業務に直結するような あの動画になってますのでその辺はご安心 してくださいこの動画のゴールなんです けど数 html の基礎をマスターして ですね既存サービスのソースコードに ちょっとぐらいの修正だったら加えられる でで言って運命がします例えばですねよく あるのがコーディー員ができないんだけど もまぁ wordpress とか ウィックスとかそういうですね簡単に no

2:17 code だろうコードツールで ウェブサイトがブログ作れるサービスある と思うんですけどあれで作ってみたものの 何かこの辺の色とかレイヤーとちょっと気 に食わないから自分でいじりたいなぁと 思っても一部とぶっ壊れちゃったよねそう いう心配がもないように依存のソース コードと既存のサービスを使ってでも ちょっとくらいだったで自分でもアレンジ が加えられるレベルっていうのをまずは 目指そうそれからですねブートストラップ とかできることある方はいらっしゃるかも しれませんま8ねプログラムピグちょっと 行ったことある人向けの話になりますけど あそういったフレームワークを用いての コーディングであれば難なくできるグラ それぞれのレベルですねそれを効果この 動画で行ってきたと思うんですけどまず 施設を知らない人ぜひですね施設を勉強し ていただきたいのでその金融問答がもう 現在作成中です html はそれだけ 簡潔ことでほぼないんですね少なくとま1

3:05 t 8 ca してセットでや るっていうのがオーソドックさんやり方に なっていますのでぜひね今のうちに チャンネル登録してそちらのどうか完成 待ってくださいこの動画ので公開 タイミングとこの視聴者さんが見てくれて いるタイミング次第では遅い公開されて いるかもしれないですけど ca 雪の 動画もありますそれから関連動画として javascript 入門講座これ すでにもう公開されているのがで何本か ありますのでぜひですねこの htl と java 助けると組み合わせている影響 していただくてもいい子茶なんでぜひです ねそちらの方もやってくださいさらにです ねいやそんな習性でベルじゃあちょっと まずいかねーよと下呂市でそれぞれの ウェブサイト1個作り消えるようになり たいという方ですねそのための html css 講座焼身者から中級者レベルに 行こうっていうとかこれも現在作成中です 視聴者彼方によってはもしかしても公開さ

3:51 れているかもしれませんなのでね チャンネル登録して待っておいて いただけると幸いですで次の章から具体的 に htl とは何ぞやというところから やっていきたいと思いますので本体の方に まいりましょう性だぞ 現在弊社ではエンジニアリングに関する 各種お仕事を承っておりますまた line とメルマガでは youtube で発信 しきれていない1ない技術や業界に関する 情報発信 無料キャリア相談それからだいぶ配信や イベントがあるときのお知らせを発信して ますよろしければ概要欄をチェックして ください まずですね html の c 雪の名も わかんねーよって方もために簡単に紹介し ていきたいと思いますまず htn とは そもそも何なのかというと hypertext markup 1 ゲージということで正確には

4:37 プログラミング言語とはいいのでまぁ kapu けいって言ったりしますみな さんがブラウザ例えばグーグルクローム ですとかサーファーにとか internet explorer と かあると思うんですけど it web ブラウザで見えるサイトいっぱいあります ねこの youtube もウェブサイト ありますしググるとかと企業のホーム ページとかいっぱいあると思うんですけど 開いた web ページの構造を作るな htm ですなのでブラウザで閲覧できる ページつのすべて絶対に愛知低迷が関わっ ていますで css の話をするとこの css は見た目を装飾するものです html が本来であれば ca 生産 肉付けみたいな感じですね css の ことはパス程度スタイルすシーツと言い ましてこれもねプログラミング言語では なくてした lc とキングって言ったり するんですけれどもこんな感じで html で骨作って ca せ肉付けしするって

5:22 いうような感覚 web ページのミール部分を作る言語な んですねあとで実際に具体手を出すんです けどもそんな感じで web サイト web アプリケーションを作るための 現行なのでも式ですねやつじゃんって ゲームを作りたいとかスマホアプリを作り たいと思ったらまあ別の言語を選んだ方が いいと思いますで html なんです けどバージョンがありまして現在最新は ですね501というふうに言われています その6柏ですね html 4とか xhtml と呼ばれるバージョンがあり ました css の場合は ps 3が 最初なんです css 2とか一番とかと いうのが古いバージョンなんですけども この動画では1てメール5.1で今度ね 紹介する予定の css の動画だし設備 をサポートするんですけど皆さんもこうの 動画以外でまぁウェブサイトでググり

6:09 ながらですね勉強するってなった場合は この演じてみるバージョンとシーサーの 場所5.1とさあこれを競ったり参考にし てください古いバージョン参考にしちゃう と情報がカーディで昔なんですよそこだけ 気をつけて学習の際にはネットに置いて おいていただけるといいんじゃないかなと 思いますではですね実際に web サイト を見てですね参考例を出したいと思うん ですけどこちらですねアップルの ウェブサイトですねこれをですねえぇまぁ ちょっとソースコードを見ようって言う こういったツールがあるんですけどもこれ で見るとこんななんかわけわかんない高等 学校うじゃうじゃと書いてあると思います コレペティ理解しなくてだ視力です見る だけなんで今回はねこれが htms 9 個の0分2るって書いてあると思うけど この in 道の上に書いてあるがこれ

6:55 全部 html なんですね消したに書い てあるのがこの css こんな感じです 愛知テールったこんな感じで市有施設たら こんな感じの高度になってますね今まで 普通ってこのアップルのウェブサイト あ綺麗だなというふうに見えると思うん ですけどこれは今愛知てみと施設で両方向 を実装されている状態ですでこれをじゃあ ca 4です外してみましょうか 外してみるとですねはい こんな感じでめちゃくちゃ猛威まあ レイアウト崩れていると思うんですけど これは今 css を外してみた状態です html だけなんですねなぜ html だけだとこんな感じでテキスト画像だけ ある骨ですね完璧骨組みだけなんですよ これにし清掃ステイ加えてあげるとといっ た形でちゃんとメカフォントとか画像が

7:41 綺麗にを廃止されて web サイトとし て見た目がぁまあよくなっ行くとこんな 感じでですね html と css って いうのは切っても切り離せない存在と言い ますかセットで使われることが多いのです ね今回1てるだけの話しますけれどもぜひ 施設も合わせて勉強をしてみてくださいと いうことです html 御礼組 ca スター装飾てもっとですね javascript って言うもあるん ですけどこれを使うとまぁアニメーション を付けたりとかサーバーと連携してより 高度ななんか色々具にあるで動いたりとか ですねデータをやりとりするみたいなこと ができますさらに php とかルービー 言うとかですねサーバーサイド言語と呼ば れるものなんですけどこういったものを 使うとさらに難しいことたとえばログイン をしユーザー情報をデータベースで保存し

8:27 て持っておくとかですねそういったより 幅広いことができるようになります javascript を勉強している方 は是非ですねじゃあますけれど動画常に 上がってそちらを見て頂きたいですし でもこの辺の全貌そもそも web の 仕組み全部ページてみて何ができるのかと ページ p で何ができるのかというの 全部知りたいという方ですね yt を 27銭っていう動画だしてますのでそちら へ来ていただけど全部わかるかなと思い ます今いろいろしゃべっちゃったんです けどとりあえず簡単なもうあの ウェブサイト1ページ作るだけであれば html と css だけでもまでき ないことはないことですね あその辺の話を中心に効果やっていきたい とおもいますちなみに今回の動画で紹介 するここドっていうのはマーケットハブと いうサービスを通じで僕のそう速度全部 公開しますそれはですね概要欄に url を貼っておきますのでタイピングミスを 回避できたりとか自分の書いたコードと

9:14 比べて何が間違ってるんだろうっていうと かねいやあこういう風に書くんだとあって もより分かりやすくなるかなと思いますの でぜひそちらを参考にしてみてください もし切符羽生なあかんと思っている方がい たらですねぜひあのスターボタンっていう のね教えて頂けるとモチベーションにも なりますのでよろしくお願いしますもし 動画の通りやってもうまくいかない場合な んですけどエラーの解決方法について解説 している動画もありますので困ったらです ね是非こちら見てください案外タイピング ミスだったりとかこうすると解決しやすい とかそういうここがに乗ってますそれでも 分からなければコメントで質問頂ければと 思いますよろしくお願いします ではですね行動実際に各位前に開発環境の 構築というのをやっていきたいと思います まずはですね google 検索で vs コードと入力してみてください奏すると

10:02 ですね visual studio コー ドっていうページはへ真上から1番下には が出てくると思うんですけどこのね code .ビジュアルスタディオと ところこの ur ですこれをクリックし てくださいそうするとねこんな画面に行き ます僕は今マックでアクセスしているので ここダウンロードマックユニバーサルって 言うに書いてあるんですけど windows の方が高犬童ずになっ てると思うんでこのボタンをクリックして くださいそうすると何かの使い方のページ にリダイレクトされるんですけどここ読ま なくていいので行った戻りますね ダウンロードがもうすでに会されており ますデコレなにかというとプログラミング をするためのソフトウェアですそれをね あのプログラミングのプロの縁寿 プログラムの6音をコーディングって呼ぶ んで僕はコーディングとこれからやって いきたいと思うんですけどレコーディング をする上で必要なアプリケーションこと エディターっていうんですねエディターは

10:48 研修する人編集するものっていうまあね 英語の意味ですけどそういった プログラミングコーディングの素スコート これを編集したり書いたりすることが できるソフトウェアです でさらにその上位号館で ide という ものがありますintegrated デー ブルペンでバーネットというねものなん ですけどこれは行動各兵種する以外にも多 機能にいろんなことができるソフトウェア でこの visual studio コードは id に位置するソフトウェア でございます連邦でねマイクロソフトが 開発しているんですけど部上で使えるので 皆さんのお財布の心配はせずに使うことが できますしロンをねかなり御用達の ソフトウェアなんて安心して使うことが できますでは皆さん他にねすでにあのお 使いのソフトウェアがあれば全然それ使っ ていただいてもいいんですけどあの日客数 いう行動がまあ一番ソフトウェアとして

11:34 言えば優秀かなと個人的に思いますしこの 動画ではこれ中心に進めていくので特に 抵抗なければぜひですね yes 豊子 使ってみてください者ですダウンロード 完了したみたいなところで回答していき ましょうでマックの方の場合はこれ ビジネスでコードこれを アプリケーションズポリターナ書へ ドラッグ&ドロップします windows の人の場合はね w クリックでボイスとらーが動いたりとか すると思うんですけど他の アプリケーション同様にインストールの 仕方をね進めて頂ければと思います visual studio こんだけ 特有に何かこれをしなきゃいけないという 特にないので a 問題なく出来るかなと 思います visual studio コード起動したいと思うんですけど ビジネスでコロコロですねクリックします とmac の人が設定によってはですね 行った高セキュリティがブロックしてくる

12:20 ことがあるかもしれませんけどもウイルス とかじゃないかと思うんだ4つって普通に オープンできると思いますこんな感じです ねそうそうこういう画面が出てくるかなー と思いますこれ画面をですねまぁ今ダーク もう撮ってしてるんですけどもうちょっと いろいろ書いてきたティム ok です これね今日作法あんたんにも説明したいと 思うんですけどもうけどサンプルの プロジェクトちょっと開いて操作方法を 紹介したいと思いますまずファイルオーブ フォルダっていうのはクリックしますで ここから兄のプロジェクトを開きますよと いうことで仮にじゃあこのディレクトリー をですねまぁ開きましょうか本当に開いて 大丈夫か見たいなーあとは出ますけど たまにねセキュリティでも問題なく ok ですこれもね大丈夫かすごいなら心配して くるんですけど問題ないと i と r 蔵王すっていうことで焼いてもらいます

13:06 食べると者ですねそうするとですねまぁ こういったサンプルのパイルがここにある んですけどもうこれちょっと画面を説明し たいと思いますちょっとで描くしますね これは問題でちょもうにしちゃいましょう かまず右側のウィンドウこれがコード書く 部分ですね今ぼく試しに2つファイル開い てんだけどこの中でタブで描くことができ ますでさらにこれをねクリックすると画面 を超えては継母のあります超上げすぎだっ たけど複数のファイルを粋に編集した時が これ使うといいかなぁと思いますて持って 左側これを左側ですねさっきフォルダこと を開いたんですけどこの htncs チュートリアルというフォルダーを開いた んですけどそうするとそのフォルダにある ファイルは一覧ガートでできますこんな 感じで好きなファイルを左側においてパッ

13:52 と開くことができるのでフォルダごとに 開いておくのをおすすめしますでもって ですねこの左側のさらに左側これが今の 一番上一番上の音エクスプローラーって 書いてありますけどこれがクリックされた 状態だとフォルダーが開かれた状態なん ですけどまぁこれ閉じると全画面になり ます で他のメニューに関してはまっさーちサー チってやると今のフォルダ猫のフォルダ内 で検索したいワードと打ち込むと検索で ヒットするようになりますので例えばで メジャーとを買っておけたこそ今この インデックス1て見える中にメタっていう ワードが入っているので高ヒットしました けどこんな感じでファイル内検索したい ときはこれを使ってくださいとであとは ですねソースコントローラー1回使わない ですでこのランドでバクこれもべつかい ません最後このいくステーションズって

14:39 やつなんですけどこれはの vs 行動に 行くステン所でも拡張機能ですねだして いくことでよりリッチなエディタにする ことができますなんですけど今回は html とか css とかまぁ簡単な ものを書くだけなのでまぁ使う必要がない かなと思います visual studio コードねエッグ成長でつけ なくても 最初から周りとデフォルトでいろいろ リッチな機能が搭載されているので今回 おり使わないんですけどもしですね皆さん 来たて python やりたいと思った 場合そのイクステンションをインストール しておくと例えば中コードが簡単にまあ 補完機能がついたりとかですねまぁそう いう風になるのでまあよ後々入れておくと いいことだと思うんですけども今回は使わ ないでおきますあとはでですねなるべく ですでショートカットキーを使いながら 作業を進めてことをお勧めしますちょうど カット型パソコンに慣れてない人は

15:25 ちょっとまだこれからいっぱい覚えないと なって思うかもしれないですけどば使い 慣れている方はですねまぁだいたい僕の ソフトウェアで使われるようなショート カットキーが visual studio ことでも使えるようになってますのでそれ を試してみてくださいやったよ前真っ暗猫 & n 新規ファイルを作成することが できますとかあとコマンドオープンである とファイルを開くっていうのがねまあ できるようになったりとかあとは そぉですねまたぽマンとピーってやると すぐに猫からのファイルを開くことができ ますこのすでに入れているフォルダーです ねフォルダもあると思いますけど国家ら ファイルを開くことができます まあですねスタイル css とかって 言うとこの中にある css てパッド パッドねいることができますコマンド p ですねとかっていう風に色々やれることが あります他にもですねショートカット家 知りたい人ですねまぁ vs 行動

16:11 ショートカットキーとかで検索すればね あの聞いたの記事なんかあるんですけど こんなアリですね ああこれかいてくれて今日はね いらっしゃるんでこの辺を駆使すると作業 がかなり速くなるんじゃないかなと思い ます敗2分けでここまで開発環境を説明を してきました次の章からいよいよコードを 書いていきたいとおもいますああ はいでは良いよ html を書いていき たいとおもいますまずはですねフォルダを 作って頂きたいんですけども学区の形で あればマ古木英語版なんでドキュメントと 書いてありますけど書類とかって書いて あると思います日本語版の方はここに フォルダ作るのがオススメですで windows の形であればローカル ディスク d ですねそこに作るのをお すすめしますはどこでもいいんですけど ここだと一番の容量的にあそこに負担が ない部分かなと思いますねこの辺に作って

16:57 いきたいとおもいますでフォルダをですね まぁなんでもいいんですけども今回じゃあ html の音話など html テスト という風にしておきましょうかでフォルダ 作っておきますで vs コードに戻って ですねファイルからオープン4がこれで 先ほど作ったですね1て目ですとこれを オープンっていうふうにしますそうして ですねはいえまあこれまたこんなフィート を出てくると思うんですけど毎回これは もうねチェックもコスイベやってもいい ですでイエスとラストってトラストすると もこのディレクトリーは完全に信用してい ますからもうこのメッセージは二度とし ませんよみたいなねことができますで今 特にねあのファイルも特にないのでこんな 状態ですけどもまぁ一応エッジてみる テストというねフォルダーがこの vs コードには認識されてプロジェクトとして 存在しているという状況です左側ですね

17:44 html ファイルを作りたいんですけど ここにねボタンがあります new file ですねこのファイル から new file 行ってもいいし コマンド m でねファイル作ってもいい んですけどもこれをね押していただくと ファイルを作ろうというのがあるんでここ に良いんで薄ふと htm ですね index . htm というふうに やってみればスイス振るとプレイ時て メールファイルが作られましたここで 大丈夫でしょうパティスタートところ なんか最初の何もないただのタブなんて これはいらないといけしちゃいますって ちょっと拡大しましょうかね見やすくなっ たんじゃないでしょうかねインデックス html という場合が出来ましたこれで ここからようやくですネチってみる書ける ようになります て続いてですね ht のタグについて 紹介したいと思いますまあそもそもまず html ってどういうものかというと

18:29 ですねます1個 サンプルを書いてみましょう こんな感じで レディースさ チャーふとちなみずで今これ入力した時に パブの右側にしろまるがこう出てくると 思うんですけどこれはですね今編集中と いう状態ですマックの形であればコマンド s windows の場合は コントロール s からでをしていただく とこれであの保存できるので構造し労災 随時ですこの白丸があるときは保存れて ない編集中だよっていうね状態なんでこれ 必ずあの保存するようにつ物をして くださいこれが html の基本です dc the 多分っていうね書いたん ですけども html タグ山格好でタブ の名前を囲ってでさらにその中にテキスト なりなんなりを入れて閉じてあげるとこれ

19:16 が返しタグこれが閉じたグって言ったり するんですけど 開始タグは山過去とタグの名前今回は h 1タグっていうねまぁ一応という名前は タグを入れさせてもらったんですけどこれ をつけるんでいいんですけど後ろを閉じる ときはこのスラッシュが必要になります このスラッシュがここで閉じたよっていう ね意味合いなどでこれをね意識して くださいこれで一応当てるちなみですね 見出しのタグっていうねいうふうに言い ますでまぁちょっとねのちほどタグについ て詳しく説明するんですけどもまぁこんな 感じの中山格好で囲って閉じるって言う これがたくさん出てきてその集合体では ウェブサイトては作られるわけなんですね で大餅でも一応動くんですけど小文字で やりましょうこれでも一応問題ないんです けど仕様上はただ今まで思い出地てメール をね書いてる人でもほとんど僕見たことが ないと小文字で書くのが一般的かなと思い

20:03 ますんでね大文字で書かないようにお願い しますあとはですねこれ11有力するの 大変だと思うんですけどベースコートを 使っているそうです簡単に打ってください 小山格好 h 1や真地とかではなくても ですね今かて自動て来てましたけど h 版で tab キーを押すとって勝手 に出てくれますまあこれねあの vs コードに標準で搭載されているエネとって いうまあ機能なんですけどもこのエメット を使うとですねタグ簡単に訪韓して入力し てくれやすいですなので例えば壱番蛸使う ときは he were で tab キー を押してその中にまあ this しずっ 多分って感じで入力してもらうと比較的 アパートねコーナーかけるじゃないかなと 思いますってちょっとうだねスペースが

20:49 てぃしちゃいましょうって殺す2えっとね 視聴者さんの中にはも早速ね会でもこれ ブラウザーでどう見えるか試したいという 方いるかと思いますでその場合はですねお 使いのブラウザに1てみるファイルを ドラッグ&ドロップしてみてくださいこれ ですねデグーグローム開いてこの インデックス html をドラッグ& ドロップでブラウザに表 dust そうするとこんな感じで一応で表示されて いるかと思いますただもう一つはあの使う 環境によってはちゃんと号正確に表示され てないかも知れませんでなんでかっていう と後で説明するんですけどもこれだけだと ht 右手不十分なんですね他にもですね いっぱい書かなきゃいけないことは前提 条件がってまあとりあえず今は分かり やすくするためにこの一行だけ書いてます けど本当はねブラウザで htmlファイル

21:36 を認識させるためにはちょっと書かなきゃ いけないことは他にもあるんですけど後々 あの紹介しますのでいたも待ちください 最近の web ブラウザ優秀なので とりあえずで人に書いても仲良しなに解釈 して好評術できちゃうんですけどだから もしくはねもうちょっといろいろ書か なきゃいけないことがありますその話は後 後に詳しく説明していきたいと思います ああ って続いてですね今 h 1タグってね タグの話をしたんですけどタグにはですね 色んな種類があります全部で正確な数は ですねちょっとわからないです110とか 120個ぐらいかな全部であるんですね ただの110本たく全部覚える必要はない 主の今回の動画ではねその中の主要なもの だけ抜粋するでまぁちょっとビビリないで 大丈夫ですまずはぜ一番と言うね見出しの タグでしたレディースなんてもうちょっと

22:22 太字になってちょっと文字もでかく見え てると思うんですけど見出しのためでした 他にもねちょっとたご紹介したいと思うん ですけど例えばどんなタグがあると思い ますか皆さんちょっと想像してみて くださいこれ問題です 性格でも行動が見てくれてるので ただねあの冒頭入っちゃってるよりは てぃもらうとより理解度が高まるかなと 思ってちょっと問題だしてみたいと思うん ですけどどんなというあると思います かぁー here ですね一番があるって 事はこういったかあるんじゃないかって いうね1個ぐらいねぇ直径 i 怒っで ショッカーちょっとじゃああーしたいと 思うんですけど生大岩根簡単に言うと h 2とかあります dc ざーざーずとはいさらに age スーリーというのもあります 入力その神のそれコピペしますねで a 1

23:10 a 4てのもあります ag 5て登り ます h 6と思いますっげ全部見出しの タグでまぁ満たしの大見出し中見出し コミ出しソロさらに小見出しみたいな感じ ですねで実際こう表示するとこんな感じで 単純にょわかりやすくもうちょっと大きさ で表現がされてますけど3だしのタグって いうのは全部で一から打つまであるんです ねまたですね14行こうって何も使わない んですけどね1と2と3だけでも可決ん じゃないかなというのほとんどなんです けど一応数度がありますで他にもうどんな タグがあるかというと例えば te タ グっていうのがありますこれはですね パラグラフの p ですいすゞ タールとかっていうふうにももうちょっと ですね まあこれも特に表示変わらずかなと思うん ですけど切っシスター

23:56 徐々には適当に打ちましたけどパラグラフ つまり段落を表示するためのタグです ちなみにさっきごめんと言わせたんです けどへ一番の h はヘディングとか ヘッドライン乱しているんですけどそれの 英字ですでこのパラグラフを作りたいとき にはこの p 多分ての使いますそれから ですねもう一個ぐらいじゃ例を出そうかな これでけどテキスト表示させてだけなん ですけど他にもですね a タグっていう のがあります a タブー ティース タグと はいこれはどういうタグなのかといいます とリンクなんですね今ちょっと特に設定し てないのであのをしても何も来ないです けどこれを押すと設定した別のページに 飛ぶっていそういうねことができるたく です後エヴァ google . com 僕も ur ちょっとコピーしましょうか

24:43 でへとこの1df =ダブルクォートって のがあると思うんですけどここに google の url ど 入れて保存します で保存しって戻ってリロードします コマンドあるリロードした状態で押すと google に飛びますねどんなのが 分かるかと思いますこんな感じでこの アンカーリングタグっていうねアンカーの a なんですけどアンカーリングタグって いうのは言われる設定することで他の紅 飛ぶことができるんですねで今ちょっと 紹介してこの hf これなんやねんと 思う方よと思うんですけど平気でふという の属性の一つです html にあですね 属性というまあ要素がありましてただ子 タグを今 h 1バ p とかって書く だけやと硬直性を付与してあげることで より強力にいろんな機能があの使えるよう

25:30 になったりしますっていうものです属性は ですねどんな宅につけられるあの属性も あるし hf とアンカーディックため ですねみたいにこのタグにこの属性しか つけられないよというものもありますなぜ この hdf はで例えばピーター具とか h 1とか2をつけてダメなんですよ アンカーリングタグにしかいじれば使え ないんですけどそんな感じでこのタグには この属性が使えるみたいながありますで これに感謝ですねこれもまた後々の セクションでもっと詳しく解説しますなの で今はねあの hr か p とか アンカーに行くとかで宅にいろんなタイプ がありますよって話をしたかっただけな目 で言ったここまでしたいと思いますちなみ にですねなぜタグにはいろんな種類がある のかというとこれですねまあ理由が2つ ありまして一つはまあタグによって いろんな役割があるからなんですね今の a ちゃんはみだし p タグあパラグラフを

26:15 作るとでアンカーリンクはアマリンクって いうふうにばこれをかなりあのちゃんと 使い分けがされて分かりやすいんですけど 115120個もあるとですねこのタグと このタフってなんかパッと見三度全然同じ な気がするなあとかでキャラ被ってんじゃ ねーかなーみたいな竹結構出てくるんです けどまぁなんとじゃあその役割がいっぱい ある悪いキャラ被ってるようなタグが いっぱい出てくるのかというとこれのもう 2個目の理由なんですけどブラウザつまり 機会に理解してもらうための仕様なんです ね例えばねこういうの見るじゃないですか ってこれわれわれ人間からするとあなんか これ見出しっぽいなぁとかこれなんか普通 のテキストなのかなとかこれリンクなのか なというふうにまあ見た目でなんとなく版 ができると思うんですけどコンピューター からするとこれの見た目の違いなんて わからないですよ人間みたいに歓声がない

27:00 からわかんないんですよねなのでこういっ たふうにタグっていう形で示してあげる ことでこのへ一番っていうタグで囲まれて いたそれは見出しの1という意味だし p タグで囲まれていたらこの要素は パラグラフ意味だし アンカーリンクでかこうやってたプラ リンクという意味だよっていうふうには 機会に分かりやすくするために声で囲っ てるんですねこういったですねデータの 持つ意味をコンピュータに理解させ処理 する技術のことセマンティックというふう にプログラミング会話では行ったりするん ですけど そういったセマティックなコーディングを するために愛知てみるわざわざですね 110分120個のタグが存在するわけな んですねでこんな風にですねまぁ例えば 見出しはこれだよとかパロなおこれやと いう風に言ってあげればですねブラウザの 方は味や見出しの方がパラグラフよりは

27:46 結構重要な情報そうだなんてことで情報に よってこう優先度をつけてくれたりですね することもできますのでそういったあの 細かくタグを使い終えてあげることが機械 振らずにとっては優しい行動になるという ことなんですね で続いてですねイレコ nest という ね概念を紹介していきたいと思いますば 一番気鋭タブというふうに3つほどご紹介 させてもらったんですけども html たーーーーがですね入れ子にすることが できますどういうことかと言いますと夜間 例えばですねこれじゃ p た後まず入力 したいと思いますレッツゴーと宮墓という 風にまあ的そっとしますってこのうちの google これにリンクを張るって ことができるんですねどここをカットして

28:32 はいえタグで google とでん子 ですねこいつをコピっちゃいましょう コピーでレースします でブラウザに戻ってやると配列冒頭 google まぁこんな感じはピーター 中に a タグで購入しましたこういう ことができるんですねそれからエイサーに 別の例とし here いただきたいですけどもじゃ スパイス相手と伝えて手で持ってさらに p

29:17 タグで official web 冷えうっでここにさんに a タグを設定 してあげると p 数どところとかなはいっ ってこれちょっとリロードしてみましょう かそうするとこんな感じでね出てきてまぁ 見た目じゃそんな変わんないんですけども こんな感じでですねまあ要は何が言いたい かというとあの入れ子にたくさんできます セクションっていうタグでまず上にあり ますけどその下にさらに一番た骨こんな2 pwt されさらにその中に a タグを 突っ込んでいるように html は出て こういったふうに今特に制限なくあの 入れ子に生き続けることができますこれは ですね持ち後役に立つんですけどこれで 情報まとまりをつくってあげることでこれ あのまず機械的にそう優しくなります 例えば チェックシャツに囲ってあげればですね

30:04 これで1個のまとまりなんだなっていう ふうにあの機械を解釈することができる わけです 今のこれねたくさん食べ書いてあります けどこれは関係しているでもこれとこい つぁは関係してないというふうにブラウザ は解釈することができるわけですねまぁ これはね人間からしたらソースコードを見 なくても画面でなんかデザインがされて いればなんとなぁかこの辺は関係あって こいつは関係ないのかなあっていうの わかると思うんですけどできたにね理解 しろっても無茶な話なんでこういった形で まとめてあげることでは機械によっては 優しくなりますあとですね今後 css の 構造をやりますけど c せ座っている際 に覚えてグルーピングすることでよりです ね css でデザインしやすくなります のでまあちょこちょここういった方までを 作るってのけど大事だったりしますですね

30:49 ここでへちょっと問題だしてみたいと思い ますせっかくなので皆さんもうちょっと 考えてやってみてください 見出しのタグの中にリンクタグをですとし てですねリンク付き見いだしこれを実装し てみてください先ほどね日タグパラグラフ のタグの中に a タグを入れまして リンクを持ったテキストのハラがぁこれを つくりましたけどこれの応用で今度は 見出しですね見出しの中にリンクを持たせ てみてくださいという問題ですテキスト レッツ go to google と いうことでレッツゴートゥー生み出し中に は永作怯えてですねこれの見出しばと作っ てみて下さい あいいでしょうか えーちょっと答え合わせしますね答えは ですねこいつで一番の

31:36 レッツゴーっ true でえっとこの中に a タグがあってこう ですね d url はこいつです って理論外講ですね見出しの中に google というリンクがあるという 状態ですでね今ぼく皆さんに分かりやすく するために終わりとなるべくコピペをせず にテキストでタイピングしながらにやって ますけど実際のコーディングの勉強におい てはパティはねある彼がしちゃって ください特にあの入浴間違えとかね初心者 の者起こりやすいのでそういうのがあの 行うないためにもなるべくですねまぁ入力 すべきとば入力するべきなんですけど今 みたいな例えばね url とかねこれ何 回も同じもう購入ルークス必要ないで コピペをなるべく使ってあげてください そちら方が勉強にとっては良いですそんな

32:22 感じでネストのお話でしたああ って続いてですね最重要度のひな形という 説明をしたいと思いますでこれがですね 何かと言いますと html にはですね これだけは絶対に書いておかなきゃいけ ない格というものがいくつかありますこれ が最初の方でお話ししたやつですねまあ今 ちょっと適当に書いてなぜかブラウザが こう表示されているんだけど本当はどう技 に html を解釈させるにはや他にも いた時に掲げていけないタクってのはいく つもあるんですよっていうねお話をしたん ですけどここでねご紹介したいと思います まずせていった方向まで書いたものは消し ちゃいますマーズドッグタイプと言う にょマスカットう食べましたちょっとね 変わったタグなんですけども山過去ビック

33:08 リマーク毒タイプ半角スペース html yamaha こと地で a この閉じたグっていうのはないんですね この毒タイプ h てみるというのはこれ は必ず html 5の一番上1行目に 絶対書いてくださいこれはこのファイルが html 文書であることを示す目印 みたいなもんなんですねこれ html ファイルだよと間違って何か他の形式のか php とか javascript と か間違ってを解釈しないでこれ html ファイルだよっていうふうに示すための ものですってさらにその次これは html ですこれも2行目に絶対かけてください すべてのコンテンツを html タブで 囲うってこれはねもうお作法ですねただに head タグというものがありますって head タグはまあこの html 文書 の中であたわ頭っていう日ですねヘッドで

33:56 この中でまあいろいろコード書くんでけど ペッド内に欠いた行動っていうのは ユーザーから見えませんユーザーに見せる 必要がないんだけどもブラウザに web ページを表示させる上で重要な情報という のはここに書きます具体的に何を書か なきゃいけないかというと絶対書かなきゃ いけないのがまず下手タブのチャーセット あってちなみですでここでもうちょっと今 あのわざわざ丁寧に書いてるんですか後で パッドでもっと簡単にかける方法教えます ので今これ中泣けるだけで大丈夫です まずはねとりあえず見ておいてください メーターパー具でちゃんセット utf 8 ということですねめぇターン ご面倒くさいですけどもねビューポート ビューポート2 テントのウィズ でばい wii 2

34:42 なあ 22シアーズ 経営 l 1はいです頭デイズこれからまず書い とかなきゃなぁと思い方タイトルタイトル たんですね えカリーウェブページとショックでしょう かはいで保存しますこれ何かというとです ねまずえっとタグの中にある市松之上子 ですねこれ何かといっても冷たくっていう のはその head タグに出って書く ものでユーザーに見せる必要性はないんだ けども web ページを存在させて上で 重要な情報に汁吸ってためのタグですって めちゃティいろいろ属性学校あってですね これをセットすることでまぁいろんなこと をブラウザに伝えるんですけどまたこの utf 8っていうのは持ちコードと呼ば れる概念のたくさんあるうちの1つ他にも shift jis とかね色々あるん

35:28 ですけど中の utf 8っていう フォーマットがありますで文字コードこれ は何かというとですねまぁ詳しくはですね コンピュータサイエンスなどばとかでを 解説しているのでそっちを見ていただけれ ばいいなと思うんですけど簡単にいうと微 あの html ファイルは ut ルっ ていう形式に従っているよとシフト jis とか他の文字コードではなくて utf 8 でしたがってるよっていうのを示してい ます他にまでそのやっぱりなことにまあ僕 なが人間からした全部同じようにこう 見えるんですけど毒タイプとかで声ちって みるとか全部この自宅に見えるんですけど 音声が国は他の子の中には utf 8 ってフォーマットだったりシフト jis っていうのは人間には見えない感じでです ね 文字コードてが設定されています横の解釈 をブラウザが謝ると文字化けしちゃうん ですねなのでこの文章は utf 8だと いうふうに明示的に示さなきゃいけないと

36:15 でもう一つこのビューポートこれはですね いろんなデバイスあると思いますあぁ今 ぼくコード価格パソコンでやってますけど やユーザーさんはパソコンで見る人も言え ばスマホで見る人もいればタブレットで見 人もいるしそれぞれデバイスの大きさって のはバラバラですよねちょっとなる デバイスの形で見た時にどう映るかって 設定なんですけどこれはあのーもこの丸 暗記で ok ですこれ以外の設定を使う ことはほぼないと思うので心マラー切り ですけどこれは何かというとそれぞれの デバイスの大きさに合わせてウェブサイト 表示させますで印象ですけど最初のズーム の倍率は1ですいいものですこれをねあの 例えばまあ他の書き方でまぁデバイス盗ん だデバイスのサイズを必ずこのあのサイズ 感この比率で見せろっていうね命令とか 出来るんですけど二基本的なデバイスの

37:02 サイズに応じて絵馬柔軟に a 貸して くださいと有名ですでこのタイトルという タグはですねこれはのこっち見た方が安い かな ここが今変わったと思うんですけど燃える ページてタブのココですねここに出る者を です最後もう一個必要なのがメーターた腕 これのですね name d すリップ一緒だった今点灯があって ここに適当なテキストいればサンプル テキスト4かつてねとりあえず会議入力し ていますこれがなにかというとこの画面で はちょっとね見せられないんですけど米 google 検索で外のアジアさっきを べースクールっていう計測しましょうか この google 検索したときに タイトーに設定したこれですねこの文言は

37:50 ここ検索した時のここに表示されることが 結構の確率でありますこれは google のまあアルゴリズムよって100%公とは 限らないんだけど彼らはほぼほぼ確率的に はここに書いた方がここにてますでさらに ここですねこれはえーっとメタ ディスクリプションに設定されたメタ ディスクオプションのコンテントここに 書いたテキストがかなりの確率でここに ございますこれもね google の アルゴリズムによって場合によっては ちょっといじって最適化されて表示される とかいう場合もあるんですけど基本的には description のテキストが 反映されやすいですなので google 検索に路地される上でかなり重要な情報 ですで最後ですねボディたーーーはいこの 中に入力したテキストっていうのが ユーザーから見える領域になるんですね アイナメ罰不適当に書いてますけど俺で

38:35 表示させると今ね書いた本50ここに表示 されてますねこんな感じで body タグ ながらに書いたものはユーザーから見え ます head タグにペタもなユーザー から見えませ ブラウザにだけ認識してもらうためのもの っていうふうにこう別れますとってここ まで話して言ったんだですけどちょっと これ全部前解約のだるいじゃないですか ご安心くださいえっと visual studio 報道ではですねまずこの html というふうに入力してこれ1 ベルバージョン5ですねこれを得だけをし てもらうと一気に出てくるんですねさっき の奴がちょっと山 cad 若干違うのは してみるがこれらングっていうのをまあ今 園っていう風になってますけど 9言語設定を ja とかねこれと日本語 ですねこれをやることでは場合によっては

39:22 ですねまぁもし多言語対応している web サイトとかもう9ねラングっていう属性を 見て色々 web ページを操作したい 場合があるのです時使うんですけどまぁ多 言語対応してねページだったのでこの卵 食ってるぜあってもなくてどっちでもいい ような感じなんですけどちょい属性があり ます いうこととこのタグはねまぁあん別になく てもいいんだけど支部の古い internet explorer a プラウズあるんですけどね ウィンドウズのねあれで見た時にこのタグ を入れておくとあのー見え方をねちょっと 統一してありますよと internet explorer て古いバージョン いっぱいあるのでなんか11とか銃とか9 とか2倍あるんですけどいったんその全部 捕逸して一番最初のエッジですねエッジと まぁなるべく c を近づけよみたいな タグでまぁこれもね一応あった方がまあ 親切かなと思うんですけどまだキャリイ

40:07 いつかというとそんなにいないので雨 キースじゃないんですけどまあ別において 問題ないですでこの辺の a ビュー ポートもあの同じような記述が書いてあり ます唯一ですね visual studio ことで呼び出した時に見 すくりぷしょんだけちょっと出てこない ですよね coccoだけね自前で入力し なきゃいけないってちょっとめんどくささ はあるんですけどそれ以外はさっきみたい に html 努力してた武侠していただく だけでここまでバッってますってこの ボディところさっきのね行動ちょっと 火遊びと正しく表示されますって保存して 実際に見てみるとこんな感じですね出先は ブラウザがまぁねぇ適当にこう解釈して 吉田に表示されちゃったんですけどこれが 正式な地底れるのひな型に沿って書いた

40:54 場合の書き方です なんで皆さんね9ドクター f とか html ヘッドボディとかねこの辺を 抑えずつこの body タグの中にして みるを変えていきましょうということなん ですねああ 愛で続きましてですねブロックレベル要素 インライン要素例外パターンこのテーマで 話していたいと思いますこれ何かというと ですねこの html チャーグっていう のは実は大きく分けて2種類に分けること ができるんですねそれがブロックレベル 要素とインライン要素というものでござい ますこのブロックレベル同意ないでどう 違うかといいますとブロックレベル要素の ためはその中に他のブロックレベル要素 拓也インダン要素宅の両方をネスとして 含ませることができますインライン要素タ ブっていうのはその中に他のインライン

41:41 要素タグをネスとして含ませることは できるんですけどブロックレベル要素の タコ含ませることはできない っていうものなんですねちょっとこれを じゃあですね具体的に見ていきたいと思う んですけども例えばどれがどれかって話し ますねまずさっき出てきたセクションたく これどっちだと思います これはですねブロックレベル要素ですなの でこの中にさっきね散々レスとしているん ですけどこの中には h 1タグとか8 p タグと亜丁た打ってのをいることができ ますでさらにこのセクションジーターです ね方しますけどセクションハイスぺちょ まぁこんなこともで以上できます セクション他区長居西区車本宅入れたりと かなぜセクション他部5月の a ブロック うレベルも食べて書こうとすることもで できるわけなんですねこれがブロック レベル要素の特徴です寺院ないよその特徴

42:30 ですねいいない要素は院内をサティスとし て服務することできるんだけども逆に ブログだって気合い入ってこっちってこれ なんですけど例えばですねスパーンという タグがございますってこのスパンという タグはですねインライン要素なんですね h 1はあの見出しだったじゃないですか p はパラグラフで a タグはアンカー リングイエスパワー何かというと特に何の 意味もないタグです特に何も意味のないタ グっていうのがですねありましたちなみに ビブというた部分もあってブロックレベル 要素の何の意味もないタグなんですねして 今何もの意味もないた打ってなので存在 するかというと css をね勉強し始め てわかるんですけどもとりあえずなが別に 意味は持たせなくていいんだけどしセスを 使うためにここにタグ置いておきたいなと

43:17 かっていうシーンが結構に出てくるんです ねでそれと気にフィーネ意味があると逆に 置きづらいので装飾のためだけに とりあえずたく置いておきたいなってこと で意味がないタグディヴとかスパーンって のを期待しんが結構出てくるので数的使う んですけどもまぁこういったタグがあり ますまあそれは去って大きい 一旦とりあえずですこのスパンっていうの がのインライン要素だけですでこの中に 例えば同じスパンこれもいいんだよさんで こういうふうにねはいこういうのは ok です in 男優そタグながらいいんだよ タグ入れるのは ok です なんですけどもじゃ逆にこの中に セクションタグこれは ng これは ng なんですね怖いんだんよさにブロック要素 が入っちゃってくだらんです逆は ok ですせぷしょんタグの中に スパンが入っているはいここですねこの

44:03 パターンはば ok ですこんな感じで ブロックレベル要素の中にはブロックで ベルト員団要素と量を入れていい インラインをその中にはフィンラン装いで ていいんだけどブログデビュー過ぎちゃダ メっていうまあまず大枠のルールがあると いうことをお話ししておきますさらにです ねこのブロック要素はインライン要素の ほうソフトまた別にちょっと例外パター ンっていうのがありますでちょっと主要な 例外パターンてのいくつか紹介したいなと 思うんですけどもまず英知タグですね一番 水4戦部なんですけどこの h 1タグは ブロックレベル要素の食べですなんです けどこの中にブロックレベル要素を入れ ちゃダメなんですねこれはみだしっていう 特性子おうましょうがないことかなと思う んですけども見出し学校あったとしてまー これって見出しってほとんどこの h 1 タグってテキスト囲むんですよね中に

44:49 テキストが入っている状態でシーズ h 版テキストとかっていうふうには入力 者として見出しなので見出しの中にを買い 例えばセクションと金入って行くの おかしいじゃないですかそう言って見出し じゃなくねみたいな形になるのでこの中に ですねブログでブルース入れちゃいけない ですね でもさっきねあのの中にアンカーリング タグ設定したいと思うんですけどこんな 感じで一番の中に印弾装いで時の ok ですブロック要素が誰って感じですねて さらにですね別の話で言うと聞いたぐ パラグラフタグですねこれもブロック レベル要素です なんですけどこの中に他のブロックレベル 入れちゃった目ですでこれもですねまぁ からブラグというまあ意味を考えると 分かりやすいんですけどモダン楽なんです よね段落て来たテキストのまとまりですよ ねってことはテキストのまとまりが2入ら

45:35 なくないですかこの中にセクションとか 入ってたおかしくないですか立って セクションは症って文章とまたコンテンツ の塊じゃんですかそのパラグラフの中に その小学まですごいお菓子数の逆転現象を 着てますよねってことでパラグラフの中に はブロック予算排除いけないとただ今中に は他のインライン要素を入れることが できるわけですは span タグ テキストとかねこういうのは全然ありです 今はこのタグの中にこれ入れちゃいけな いっていうね ng を紹介したんです けど逆に ok レってのもあって アンカーに2分これはですね1丁イン ライン要素ってことにもなっているから こそこの p タグとか h 1タグ中に 入れることができますなんですけどこれ インライン要素なのにも関わらずこの中に は何でも切れて ok です a タグに 関してはこれは瑛太がそういう特殊なあの 食べでしてねこの中には8前11入れても

46:20 いいしぴダグ入れてもいいしセクション 入れてもいいこれをセクションタブで囲っ ても ok こういうことできちゃいますその代わり ですねこれはダメです h 1 これは hr 中に8があるだけだったん ですけどその中にこのさらに他のブロック 要素が入れちゃうこれはねあの h 1の ルールに反するのでこれは ng なん ですけどもセクションの中に a 類でと かねぇータグの中にこう風呂グッズを たくさん入れるとかねこのアイスパン 入れるとかこういうオッケーです後 a ザークの中に a タグ同士を入れちゃう これも ng ですこれ何こうなっている かと言うとリンクザグっていう特性上を ビンクをつけるって役割の食べなんですね これがコーディングねやってるとわかるん ですけども結構いろんなものにでいくって 付けたいんですよさっきテキストに シンプルにリンクを貼りましたけど何も

47:07 テキストだけじゃなくてですね中にはまあ 結構いろんなリンクを付けたい場合がある 例えばですね株式車い草の web ページ と言いましょうかこのページ見るとこう いっていうふうにまあ結構大きめの ブロックをクリックできるようになって ますねこんな感じでこれってタグを見ると ですねセクション他駆動で囲まれてると 思うんですけどディヴ日酔いだぐで囲まれ てさらに小長井 d 太がいっぱい入っ てるんですけどそんな感じでデザインに よっては大きめのリングにしたいと言う ワイは2校あるんですよね 俺もそうですねこの中にでかいリンク こんな感じで永沢っていうのはまあカナダ してもテキストだけじゃなくて規模で回か たまに森口つけたい場合っていうのが出て くるので a タグは周りと例外的にイン ライン要素なんだけどもなんでも入れ られるみたいな感じだったんですで正しい この永沢中にね同じ枝ぶりでちゃうと

47:53 リンク2つ存在しようじゃないですかこ れって矛盾だよねってことでこれは ng になってますお分かりいただけたでしょう かまぁこんな感じちょっと例外があります ってデーが痛くもう一個だけねちょっと 種類を紹介するとセットで使うタグって いうのがあります具体的にはですねいう エール li と痛くなりますちょっと 試しにですねこういう表情を見てもらった 方が早いかなと思うので見ていただき ましょう こんな感じでやるとこうですね黒丸が出て きたと思うんですけどもこれ様は hist タグと呼ばれるものです ul というの は an owner ドリスとの略で際 順調のないディストですね lit の リストアイテム項目って言うんですって この言えるも li もブロック要素の タグなので2の仕様から考える頭エロ絵の 中にはブロック要素入れて ok とか

48:40 院大要素入れて ok このルールが適用 されるはずなんですけど唯一ですね言える の次には li しか着ちゃダメっていう ルールがです何でこの次に例えば d 2 具とかでこういうのダメなんですね必ず li が来ないといけないということに なっているこれはねまあそもそも li タグこのリストをまとめておくためのた 具合いわゆるなのでこういった使い方をし たいしいってまぁほぼないんですけど us の次は li が来なきゃいけないただ この li この la の中には普通に 何入れても ok です例えばディーブを 入れたりとかスパーンと書いておけこの li のブロックをレベル要素これの中に 内包するべきはなんでも ok っていう ねあくまで言えると la の間にはあの 他に何もいれるなよっていうことなので それ以外は保険っていうね形になります 同様にですねオイル食べてないですこれは

49:26 オーダー取りストの略で さっきの ur に対して順序のある リストです試しにお願いをするとこんな 感じで12という番号つきましたつまり 順序のあるリストップ意味なんですけど これもねあの全く同じです ol と li の中には何も言っちゃダメとあただしこの 中にディヴとかスパートが入れるのはあの 税で ok ないとああいうものですね こんな感じですあーでちなみに今補足して 呼ぶとまぁちょっとねこれすとする際に インデントって言うんですけども左が ちょっとスペースが空いてますよねでこれ はですねあのなるべく意識しするようにお 願いしますこういうことで入れ子構造が すごい明確になりますよねこれ例えば今 ul たく中にエロいタグがデイライト ペン dv スパンがあるんですけど こいつらはこの一個前のエラーに囲まれて

50:13 いるんだなぁとさらにこの依頼はさらに その1個までユリカをマれてるんだなって いうのがねこのインデントがあることで金 直感的にわかりやすくなってこれがもし ですねなんかインデントがバラバでたが こんなことになってたりすると姉この li ターグのと自宅てどこにあんだっけとか わけわかんないことになるちゃんでこの インターネットはねだるべく歯を守り ましょう 基本的金 vs コードの中でと enter キーを押してたら勝手にです ね院でとって着くようにこうなっているの で特に意識しなくても勝手につくように あるんですけれどもこれはね意識して ください世界の閉じタグが無いのかねこの 状態でたいけないと正しく タグが動かなかったりするのでこれも注意 してください必ず閉じタグを設けるように ねお願いしますで html これまで 勉強した人の中には女性とパイスに入って いることちょっと間違ってないと思う方が

51:00 いるかもしれませんブロックレベルイン ライン要素とかってベジ tml 4とか して昔の話であって html 5今だと ちょっと違うんじゃないよっていう思った 方正しいですはい正解です正しいんです けどこれ今から話すの hp でちょっと 勉強している方向けの話になるんで知ら ない人はでで穴虫いたしててもらってもか もんですけどえっと html 5だと コンテンツも出るって言う概念が登場して ブロック要素とインライン要素っていう 考え方やめてそのコンテンツも出 るっていう枠組みで html タブを それぞれ勝手後ライスるっていうね仕様に なりました一応ねなんですけどこれボク 全部覚えてた時期あるんですよ11210 個あるタグのこのタブがコンテンツモデル のこれに所属しててこのタグはこの コンテンツもでもこれとこれに所属してる

51:46 みたいなのお勉強をしたこともあるしは それぞれ役割も勉強したんですけど正直 これでかなり複雑だし全く実務で役に立っ た曲いけないです残念ながら ので コンテンツモデルって学習してもほぼなん かあまりメリットがないんですねでじゃあ そのブロックレベル要素と員団装って じゃあ html 5で排出されたの かっていうと名護にちょっとあるんですよ ちょっとじゃないなまあまああるなかなり 残ってますなのでこのどちらかというと 今月モデルでタグをそれぞれ考えるよりも ブロックレベル要素インライン要素って いうふうにこのたかどっちかなっていう ふうに考えた方がぜんぜんわかりやすいと いうことで僕は1てみる5を勉強している 人もですねブロックレベル要素員らによっ て形でタグをそれぞれカテゴライズする方

52:32 がわかりやすいと思うし実用的だと思って いますてこようそしてますなんかボートで ねエチ程度の学習で覚えることたくさん あるけど実際使うのごく一部ですよと話し たと思うんですけどもこれがねその内の1 つなんですよねじゃあついてですね ブロックでるよといいんだよたくどっちか 2つにあの分類して見分けていきましょう って話これちょっと難しいんじゃないかな と思う方いらっしゃると思うんですけど友 フレ音は確かに例えばですね初見でこのね 覚えるタグとか li タグこれが ブロック要素でしょうかいいんだ要素 でしょうかって言う話をした個性難しいと 思いますタグだブロックレベル要素かイン ライン要素か知りたいときはまああの検索 でね覚えるまあタグ まあブロックと会員 line とかで 検索すればどっちかまだいてヒットする

53:19 はずですブロック要素と書いてありますね まぁこんな感じで検索性もある程度ヒット しますヒットするんですがもう一つの 見分け方としてちょっと雰囲気でつかむ っていう方法があります どういうことかっていうとたとえばブロッ クってもこれブログで固まりティビじゃ ないですかそれから院内んこれ院内生1 業況文章の一部っていいですよねなので えっとタグの意味考えてホどっちに入るか なぁと考えるとまあある程度ま雰囲気で いければ100全然100lb 全然ない んですけど雰囲気で覚えてやり方もあり ます例えばちょっと問題だしてみましょう か須藤ロングっていうタグがあります方が 文字を強調したいときに使うたのです 例えば平成テキスト入力して見てみ ましょうかブラウザ上でねはいそうすると 入っいうとねこれですねまたのテキスト

54:05 ですけども文字を強調した時に使うため ですこれはブロック員だにどっちでしょう か わかりましたでしょうか インラインです文字を強調したいときに寝 使うだけなんで固まりで猫の中に何か色々 ぶっこみ3時ないですよねでもう一個ヘッ ダーっヘッダーだけこれどっちでしょうか ヘッダータグっていうのはこれどういう とき使うかといいますとりぐさんの web ページもっかい行きますけどこれですね なんかあのよくウェブサイト別ついてくる と思うんですけど今何か着いてくるやつ俺 ヘッダーっていうんですけどこれどっちだ と思います 正解はですねブロックですそんな感じで ヘッダープロックっていうのがまあ今の見 た目から外わかったと思いますがこんな 感じで尿と雰囲気ではこれ院内ナポリ ブロックだなっていう考え方もできるので そういうやり方

54:51 1個ありますよってね検索してもいいし 雰囲気でこうやってね両方できますってね まあそういうあのやり方があるところだけ プレイしていきますこのブロックレベル 要素インラインの外でいう考え方はですね css を勉強する際も豚ブロック要素は インライン要素っていうのがあると後々 効いていきますのでこれを押さえておいて 頂きたいというものでございますってさ何 でもう一個あここまで聴いてですね ちょっと見分けられたかなと覚えられ ちょっと不安になっていらっしゃると思う んですけどもパティずっとの紹介したいと 思います validate ツールって 何かというとですね実際に針で第1 tl 5どっかで検索していただくと声ですね これこそ目指すしてみる5.針で行っ たーー度と a の言うという web サイトがあるんですけどテキスト フィールドっていうのがね選択できるんで これを入力してまたこういうのが出てくる

55:38 んですけどここに自分の書いた html をコピーさせ全センター具の枕した コマンド+デー windows だった コントロールいいですね全選択でコピーし てペーストしますと はいでバリデートでやるとかなどの書いた タグがエラーかどうかっていうのを判定し てくれますこれであのもしで例えばピザが 中にそのブロック s を入れちゃって エラーになってるとかなのか気づかなかっ たとしてこういった針ジェットツールを 使えば まあ機械的に構築して教えてくれるって 思うんですねvalidate っていう のがまあ検証とかねいう意味なんですけど そんな感じでカナダ人で切子頑張んなくて も自動的に教えてくれるって言うそういう ものですでこれビルトワーディングって いうのが出てきてるんですけども ワーディングは周りと無視して ok です このバディとするに関して言うと他にも

56:24 ツールアドので出るでこれに限らず使えた やつ使ってもらえればいいんですけどこれ は一応使いやすいでおすすめします例えば ピーター群の中に h 1部校で言い ましょうか h 保存してコピーしてペーストしてあると そうすると今エラー出ましたねはいの pl メットインスコープバッターぴーえんどた 薄いま要はなんか変なたよ混ざってるよっ ていうねことなんですけどもこんな感じで ライン3316行目の 部分が間違ってで抹茶ねこですねはいま h 1タグを入れたことによって何が正しく 認識されてないですねほんとピザ部が何で もそういったエラーが出てきてるんでは こんな感じでも完全にアウトだったら今 みたいにエラーで教えてくれるしまー ワーニングっていうのちょっと気をつけな よみたいなことがあるんですけどこれ何で

57:10 できているかと言うと例えばよく読むと ですねセクション音 ax へいティング 今すど友禅芸術 g 6 a ダメスパライアのセクション たくねあのから6セクションタグが阿部 30事業に子ですねセクションタグの中で はマーダル4組だした後入れたほうがいい よって言うねえ 遊舞蝶推奨お子様みたいなものです セクションて症なのでましょうて来た当然 コンテンツがあるけどその前に見出しある よねーっていうことではだいたい目指し 付けた方がいいんじゃないよっていう場合 がほとんどなんですけどまぁデザインに よってはですねまぁコア政府しょんだ気を 使ってるんだけど見出し入れたくないなっ てデザインもねああったりするのでこの パターンで必ずしも成立しないんですけど なのでまぁ推奨ってことですねまあ html タグ的にはあった方がいいけど もデザイン的に入れたくないんだったら

57:57 まあまあしょうがないよねぐらいの感覚な のでワインか基本的には無視しても後でも 大丈夫でエラーが出たら注意ですいうよう なところでこの針ペットツールを使うこと をお勧めいたしますああ で最後ですね属性ですね属性の話ししたい と思いますと さあ機ほど冒頭の方でですね例えば a タブには1レフっていうのがあって1レフ にリンクのはねこんなつけると by パーリーありベーターとねつけると これはリンクになりますよってこういった 属性っていうのをつけることでタグって いうのはより機能的にねうことができます よっていう話をしましたさっきの音叩くも そうですねメタタグもうお腹いっぱい永続 性がありますねっはそんなにこれこピュア

58:45 ノア規制じゃないんですけどでここから まで属性がいろいろありますでえっと ちょっと主要なやつだけはちょっと押しし たいなと思うんですけどまず永沢これね ターゲットっていう属性がなすターゲット で中にブランクこれセットで覚えて くださいターゲットアンダースコア ブランクこれ以外のものが登場すること ないのでふらんくってこれ入れておいて くださいこれをやると何が起きるかという とリンクが以前別タブで開くっていうもの ですねまあこれも結構あのよく使うものな ので一応ボイドでくださいってことですね でこれがなければ普通に同じタブ内で愛知 が切り替わるというものですでこれよりも 重要なのが2つあります それが何かというと id と class なんですね例えばですね p タグで行っ

59:32 たテキスト歌としてここに暮らすクラス 例えばじゃあテキストっていうふうにし ましょうかで皿にじゃあ 一番でえっライン3らしいですねここに id と d 同ラインというふうに呼び覚ましましょう ってこれは何かというと台風ニーマン名前 をつけてあげてるような感覚なんですけど 例えばその web サイト作ってと1 ページに p タグとか一応食べて めちゃくちゃ存在するんですよね何回も何 回も使えますそういう時にこのたび それぞれに名前をつけてあげることで判別 するんですって判別すると何が良いかって いうとocs とか javascript 使う際に有効ですということがで パティスパティ

1:00:19 もなんですけど id の パティここは css の話はまた別の 動画よ詳しくやりたいとこでここで あんまりね解説しないつもりなんですけど もこんなふうに ヘッドラインという id のタグに対し てからレットという施設を当てました やっぱりどうなるかといいますとリロード します赤くなりましたねこんな感じで国家 に燃えジャーナルであると思うんですけど こいつだけに否定して css は javascript 当てたいとこいつ だけ変化していた時にこの id ての 使いますで暮らすこれもねこいつですね こっちにも同様のことができますクラスの 場合は毒となんですけどとテキストでへ から儚て者ブルーにしましょうか今中北

1:01:05 しーっでタブとかっつってもう簡単にパ パっでこれも visual studio 行動も強みですちょっと入力したら保管し て用速写変換してくれるってね代物なん ですけど中でできますんでリードすると ちょっと見づらいですけど青くなってるの がわかるだと思います こんな感じでこのね聞いたグって他にも たくさんあるけどこいつだけにしてして 中谷たいという場合にこのクラスというの を使うところに機能するわけですねで id と class 後が何かっていうと id はそのページこのエンディング設置てメー ルっていうファイルこの中に1個しか同じ ヤツは存在できませんてクラスはいっ存在 しても ok ですなので例えば アーティスト peki ますねこれを ok だらに a 立てば aw

1:01:53 パティはいこれも ok です出なかった が者12たぐでーっで同ライン2とかって いう風にしてあげて暮らすとピストこれも ok ですこんな感じで暮らすっていうの はそのページにいくつ同じものが存在して も美味しい2ぐ変えて存在しても ok ですでもこの id は1個しか存在し ちゃダメなのでたとえば者 p タグいい タブでテキストという風にしてあげてここ にあid で全く同じ ヘッドラインがこれ ng です同じ奴は 駄目ですねこれねこのページにはこの id 一つしか存在しちゃダメだよって言うまあ 使用作ったことでより高速な処理をしたい ときに id ってのは有効になるシーン が多いです例えばですねだか javascript 使ってこのページ のメジャーヘッドラインという逆に対して

1:02:40 色を変えるっていうそうそうま java スクリプトでも実行したいという時に クラスだった場合って全部ビル西 javascript 上からバーって匠 てってドラインっていうクラスは江戸全部 で何個あるかなーって数えてって1個2個 3個4個か4個あったよ午前部にこの じゃあ javascript の命令を 実行しますとかってあるんですけど id のはは最初からこのページに1個しかな いっていうのはわかっているので1個 見つけたその時点で処理が終了するって いうことができますのでよりあのスマート に動くことができますということでは プログラミング的にですねまぁ一個しか ないというのはそれだけで高速に動くのが クラスだとまいくつも騒然していいけど いくつあるかわかんないから全部読み込ん で確実に実行しなきゃいけないってことで プログラムにとってちょっと負担なんです よねなのであの id と class っていうまあ2常田似たようなものがある

1:03:25 んですけどマーゲイ道土全然使うシーンが 違いますというもので誰だねちーセンサー ていれば相手もほぼ使わないんですねはい というのも javascript みたい にはいろいろねプログラミングで複雑な ことしたい場合は id と class で好パフォーマンス変わるんだけど css っていうのはまあ javascript よりも深まり高速に動くのでそんなに id と class でこう使い分けだところ でパフォーマンスにそんなに差がないって いうことと割とですね同じクラス同じ人が 複数の別使い回したいシーンが結構 css だとあるのテーマ ad 尾根積極的使う っていうのはあまり寝なかったりしますね 何のでどう java スケープ使うとき はなるべく it css 使うだけ なるべくクラス使うというふうに覚えて あげるともより良いんじゃないかなと思い ますああ 入って受けていかがだったでしょうか今回

1:04:12 の動画のですね一応 html の基礎的 な部分はできたんじゃないかと思います これはちょっとぐらいの修正とか javascript とのちょっと ぐらいの合わせはどうだったらいけるん じゃないかなと思います次回は css の 動画はそれから html と css の より実践的な内容の画面を出していくので 楽しみにしといてくださいはいという気で 以上になりますこの動画役に立った良かっ た方ぜひ高評価とコメントよろしくお願い します では次の動画でまたお会いしましょうバイ 現在弊社ではエンジニアリングに関する 各種お仕事を承っておりますまた line とメルマガでは youtube で発信 しきれていない1ない技術や業界に関する 情報発信 無料キャリア相談それからだいぶ配信や イベントがあるときのお知らせを発信して ますよろしければ概要欄をチェックして

1:04:58 ください ん ん ん ん [音楽]