HTMLを30分でマスターしよう！

こんにちは、エドベースの吉田です。今回は、初心者向けに「HTMLを30分で書けるようになろう」という内容でお届けします。HTMLをまだ書いたことがない方や、なんだか難しそうで手を出せていないという方のために、わかりやすく説明しますので、一緒に学んでいきましょう！

HTMLとは何か？

まずは、HTMLが何なのか簡単に説明しましょう。HTML（HyperText Markup Language）は、ウェブページを作成するための基本的な言語です。私たちがウェブサイトを見るとき、文字の大きさや色、見出しなどを目で認識しますが、コンピュータ（ロボット）はこれらを理解することができません。

そこで、HTMLでは「マークアップ」と呼ばれる方式で、タグを使って文章の構造や意味を示します。例えば、<h1>というタグで囲まれた部分は「大見出し」であることをコンピュータに伝え、<p>で囲まれた部分は「段落」であることを伝えます。このようにして、機械が文章を理解しやすくなり、検索エンジンにも適切に認識されるようになります。

なぜマークアップが重要か？

検索エンジン（例えばGoogle）は、ウェブページを機械的に解析してその内容を判断します。この時、適切にHTMLタグを使わないと、ページがただの文字の羅列として認識され、検索結果に正しく表示されないことがあります。HTMLを正しくマークアップすることで、ウェブページが検索エンジンにも認識されやすくなり、ユーザーに見つけてもらいやすくなります。

HTMLの基本構造

それでは、実際にHTMLを書いてみましょう。HTMLを書くには、テキストエディタを使用します。おすすめのテキストエディタは、Microsoftの「VS Code」か「Sublime Text」です。今回は、軽量で初心者にも使いやすい「Sublime Text」を使っていきます。

サブライムテキストの準備

Sublime Textをダウンロードしてインストールしたら、デスクトップに新しいフォルダを作成して、HTMLファイルを保存する場所を確保しましょう。ここでは「zoo」という名前のフォルダを作り、その中にHTMLファイルや画像を保存します。

まず、Sublime Textで新しいファイルを作成し、「index.html」という名前で保存します。そして、最初に「Hello」とだけ入力してみましょう。これを保存して、ブラウザで開くと「Hello」と表示されるはずです。

改行を指示するタグ

ブラウザでは、単純にテキストを改行しても画面上で反映されません。改行を表示させるためには、<br>というタグを使います。このタグを使用することで、ブラウザに対して「ここで改行する」という指示を与えることができます。

見出しや段落を作る

次に、見出しを作るために<h1>タグを使います。例えば「Hello」を大きな見出しにするためには、<h1>Hello</h1>と書きます。また、段落を作るには、<p>タグを使います。例えば、「これは段落です」と書きたい場合は、<p>これは段落です</p>とします。

HTMLの基本的なタグ

見出しタグ（<h1> 〜 <h6>）

見出しタグは、ウェブページの内容を構造的に示すために使われます。<h1>が最も重要な見出しで、<h6>が最も小さな見出しです。これにより、検索エンジンにもページの階層構造が正確に伝わります。

段落タグ（<p>）

段落タグは、文章を段落ごとに分けるために使います。通常のテキストは、この<p>タグで囲むことで、段落として表示されます。

画像タグ（<img>）

画像を表示するには、<img>タグを使います。例えば、「panda.jpg」という画像を表示するには、以下のように書きます。

<img src="panda.jpg" alt="パンダの画像">

ここで、src属性は画像のファイルパスを指定し、alt属性は画像が表示されないときに代替テキストを表示するために使います。

リンクタグ（<a>）

リンクを作成するには、<a>タグを使います。例えば、以下のように書くと「スキルハブへ」というテキストがリンクになり、クリックすると指定したURLに飛びます。

<a href="https://www.skillhub.jp">スキルハブへ</a>

コードを効率的に書くテクニック

HTMLを手書きで入力するのは面倒ですが、テキストエディタには補完機能があり、簡単にタグを挿入できます。例えば、htmlと入力してタブキーを押すと、HTMLの基本構造が自動的に生成されます。このような機能を活用すると、作業が効率化され、ミスも減ります。

まとめ

今回は、HTMLの基本を学びました。最初はシンプルな内容ですが、これをマスターすればウェブサイトを作成する基礎が身につきます。次回は、さらにCSSを使って色やレイアウトを変更する方法を紹介しますので、お楽しみに！

ぜひ、この機会に楽しみながらコーディングしてみてください。それでは、また次回お会いしましょう！

タイムスタンプ

0:01 皆さんこんにちはえエドベースの吉田です 0:05 えっとですね今日はあのhtmlをまあ 0:10 30分ぐらいですかねで書けるようにし 0:13 たいなと思います皆さんHTMLはねあの 0:16 書いたことない人がこのビデオを見てると 0:18 思うんですけれどもちょっと難しそうでね 0:21 とっつきづらいなとあのいろんなサイトと 0:24 か本見てるけれどもなんかやる気しないし 0:26 わかんないなと思ってる方ぜひ見てみて 0:28 くださいすごくにねあの説明したいなと 0:32 思いますんで今日この30分ま15分から 0:35 30分ぐらいなんですけどもで一緒に私と 0:39 一緒にHMLを書きながらえっとHMLの 0:43 書き方をねマスターしていきましょう 0:46 じゃあ行き 0:48 ましょうではまずですね書き方から始める 0:52 その前にどんなHMLとは一体何なのかと 0:58 いうことをねあの今日やってみたいなと 1:00 思いますまずはその少しだけ説明してこれ 1:03 あんま長くしないですからねあのま簡単に 1:07 ざっと説明してあとはでも渡せしますんで 1:11 でも見ながら一緒にやり方をこう学んで 1:13 いただくと一緒に僕の真似をしてですね 1:16 書いていただければいいかなと思い 1:18 ますじゃあまずHTMLとは一体何かと 1:23 いうのを説明しますねえっとHTML 1:26 例えばねあのこのビートルズのサイトが 1:29 あったとしますウキペディアみたい 1:31 でしょうかねでこれあの人間が見るとです 1:35 ねこの人間今このページ見てるじゃない 1:38 ですかあなるほどなるほどとこれが大見で 1:42 まその説明がここにありますねとで 1:45 デビューまでとかデビューまでの間に 1:48 いろんなエピソードがあったのま中見出し 1:50 込み出しになっていてで赤い文字があって 1:54 赤文字ってことはちょっとまあなんか強調 1:56 してるんだなと人間だったら分かるんです 1:58 よでもですねあのロボットというのはこれ 2:03 は一体何が書いてあるのかってのがね 2:05 さっぱりわかんないんですねあの 2:07 ビジュアルから見るのはあのわかんないま 2:11 だからえっと 2:14 HTMLでその文書の中にマークアップと 2:19 いうものをしてあげる必要があります 2:22 えっとここかことかこに挟まれたローマ字 2:25 がこうあるんですけれどもH1とかH2と 2:28 かねでこのザビートルズというこう大きい 2:32 文字はこれは実はH1だとこうかことかこ 2:37 で挟んであげることでこれはロボットに 2:42 とってあここは大見だしなんだなっていう 2:45 ことが分かるんですでここはPっていうね 2:49 卓があるんですけれどもこのP卓で挟んで 2:51 あげることでこれはあここは段落なんだな 2:54 と文字の羅列なんだなっていうことが 2:57 分かるでこれがH2でH3でさっきの赤い 3:01 文字は強調でストロングっていうねあのま 3:05 卓があるんですけど 3:07 もしてみるタグねこのかことかこに挟まれ 3:10 たローマチのことタグと言いますそのタグ 3:13 で囲んであげる 3:14 と初めて機械は理解してくれるということ 3:20 になりますじゃなんでねえっとまこの機械 3:24 が理解する必要あるんだと思うかもしれ 3:27 ませんよね実はですですねあの作った 3:32 ホームページ作ったHTMLのはねあの 3:35 人間も見てるんですけれどもロボット機械 3:39 もね見てるんですよこのGoogle 3:41 なんていうのがま代表的な例で 3:43 Googleのロボットはですね日や 3:46 インターネット上徘徊してでウェブページ 3:50 というウェブページウェブサイトという 3:52 ウェブサイトを見まくってるんですねで見 3:56 まくったものをGoogleの本社に持っ 3:59 て帰りますでGoogleの本社に持って 4:02 帰ってこれはどういう文章だったのかって 4:04 いうのをま機械的に分析するんですよで 4:08 その時にですねあのこのH1とかH2とか 4:13 このタグで囲まれてないとただの文字の 4:15 羅列でこれがどういう意味を持ってるの 4:18 かっていうのはGoogleには分かり 4:20 づらいんですよねなのでまGoogleの 4:23 ためというわけじゃないですけれどもこの 4:26 文章に対してマークアップと言いますね 4:30 この印をつけてあげることで機械でも処理 4:34 しやすくするようにしてあげるとそうする 4:38 とGoogleだけじゃなくて他のまあの 4:42 機械的な作業があるんですけどもその時に 4:44 非常に便利なんですねなのでえっと 4:48 HTMLっていうのはこの文章にマーク 4:50 アップをするというのが第1の目的という 4:53 ことを覚えておいて 4:55 くださいうんじゃあねえっと 4:59 まHTML再び話すと機械が自動処理 5:02 できるようにするためのHTMLはあって 5:04 Googleの検索エンジは内容タグで 5:06 理解しますタグに気をつけて書かないと 5:09 そう検索結果に引っかからないっていう 5:12 問題があるんですよね皆さんせっかく作っ 5:15 たね自分のサイトま検索結果出てきて 5:17 欲しいですよねえそうするためには必ず 5:21 ですね綺麗にマークアップをしてあげる 5:23 必要がありますそうちょっと面倒なんです 5:27 けどもま慣れれば非常に簡単ねポンポン 5:30 ポンポンとマークアップすることま全然く 5:32 じゃないんでそのやり方を後でちょっとお 5:36 見せしますねそうHTMLっていうのは 5:39 あのなんかプログラミング言語じゃなくて 5:41 ただマークアップするだけの言語ただ印を 5:44 つけてあげるための言語なんで誰でも書け 5:47 ますじゃあちょっと次から私がデモして 5:50 いきましょうはいじゃあ行ってみましょう 5:53 かえっとHTMLのね基本構造これから 5:57 やっていきますよでえっとえとツールで 6:01 htmlを書くためにはテキスト 6:03 エディターというものが必要なんです皆 6:05 さん何でもいいんですけどね本当あの 6:08 Windowsだったらこうメモ帳でも 6:10 いいんですけれども便利なツールテキスト 6:12 エディターがありますで2つおすめがあり 6:15 ましてで1つはビジュアルBSコードと 6:19 いうやつですねMicrosoftが出し 6:20 てるやつでもう1つはサブライムテキスト 6:22 ですで今回私が押すのはですねこの 6:26 サブライムテキストの方ですねこれは 6:29 すごく軽くてですねあの非常に使いやすい 6:33 vsコードはすごくいいんですけど私も 6:35 使ってるんですけどねえ例えばですね今 6:38 もう立ち上げて使ってこんな感じなんだ 6:41 けれども非常に高機能でですね 6:44 あのま初心者にはねとっつきづらいんです 6:48 なのでえっとこのvsコードではなくです 6:52 ねこれダウンロードのページですね 6:54 サブライテキストとえっと検索して 6:57 いただいてこちらをロードしてください 7:01 これはすごくですね本当シンプルでま1番 7:04 使いやすいかなと余計な機能がついてない 7:06 かなと思いますはいじゃあこれ 7:09 ダウウンロードしていただいたらえっと 7:13 アプリケーションWindowsの方もね 7:15 アプリケーションの中に多分この 7:17 サブライムテキストというものがあるはず 7:20 なので探していただいてこれダブル 7:22 クリックで開いてみますするとですねこう 7:26 いうカノができますねでからのができまし 7:31 てえっとこれですねここからじゃあ作って 7:36 いき 7:37 ますはいじゃあサブライムテキストねやっ 7:40 ていきましょうかではですねサブライ 7:42 テキストでHTMLコード書いていきます 7:45 よでその前に保存する場所を作らなければ 7:48 いけないのでデスクトップにですねまどこ 7:52 でもいいんですけどもあの新規フォルダー 7:54 を作ってください私はMac使ってるん 7:57 ですけどもWindowsの方もねどでも 7:59 いいですよでフォルダー名はズッパにし 8:03 ましょうかねズーロパっていう名前で保存 8:07 していただいてで画像も使えますので画像 8:10 ねあのこのパンダの写真をまダウンロード 8:13 してですね概要欄に貼っときますのであの 8:15 ダウウンロードしてこの自分のフォルダー 8:17 の中に入れておいてくださいはいそしたら 8:21 サブライテキストにこの出来上がった 8:23 フォルダーをドラッグアドロップしてはい 8:26 これで始めますえですかでここにですね 8:33 えっと新規ファイルを作りますよろしい 8:37 でしょうか新規ファイルの作り方はまここ 8:40 を右クリックして作ってもいいしえっと 8:43 こちこちらを右クリックしまニュー 8:45 ファイルでも作ってもいいですじゃあ私は 8:48 こっちでニューファイルを作りましてで 8:51 まず保存しますセイブねまず保存するん 8:56 ですね何も書いてないのにねでここは便利 9:00 機能を使うためなんですけどもじゃあね 9:03 INDEX. 9:06 HTMLという名前で保存をいたします 9:12 うんはいじゃあ保存できましたじゃここに 9:15 ですねあのHMLを書いていくんです 9:16 けれどもまずそのまちょっと文字だけ書い 9:20 てみますかハローてね書いてみますハロー 9:24 て書いてでファイルメニューからセーブし 9:27 ましてでこれをブラウザーでやりたい 9:31 ブラウザーで見たいブラウザで見る時は 9:34 こう右クリックしていいですかこオープン 9:38 イブラウザーというのがありますので 9:41 こちらをクリックしてくださいはいすると 9:44 ですねブラウザが開きましてハローと出 9:47 ましたね出た人はおめでとうございます 9:49 うんでこの 9:52 ハローじゃあこの左にサブライムテキスト 9:55 置いて右にこっちのブラウザーを置いて 9:59 これ比べながらやっていきましょういい 10:01 ですかハローの下にですねじゃバイとこう 10:06 さようならね書いてみますでこれを保存し 10:10 まし 10:11 てで今度はこっちブラウザーのですねこの 10:17 くるっと回ってる更新ボタンをね押し 10:19 ましょうするとはいバがね反映されました 10:24 今このブラウザっていうのはここの 10:27 INDEX.HTM値3しててますので 10:30 こっちとこっちはシンクロしてるんですね 10:33 でそれを反映させるためにはこの更新 10:36 ボタンを押さないといけないとうんいう 10:39 感じでもですねなんかちょっとおやと思っ 10:42 た方も多いと思いますこのハローとバイて 10:46 こっちで会議してるのにこっちではですね 10:49 繋がってしまっているんですねこれは実は 10:53 ブラウザーはあのこの会議を理解してない 10:57 ですなので業をしなさいよっっていうこう 11:01 指示をしてあげる必要があるんですよね 11:04 それ 11:04 はかこBRかこ閉じるって書いてある 11:09 あげるんですけどもこれをねかことかこに 11:13 挟まれたこの文字っていうのはacml 11:16 タグと言いますでこれ保存してブラウザを 11:20 更新してみるとはい開業されましたそうな 11:24 んですえっとブラウザはですねこの括弧と 11:27 かこに挟まれた文字っていうのをは表示し 11:30 ませんねここに出てないじゃないですかで 11:33 これはブラウザーは自分に対する指示だと 11:36 思うんですねああなんか書いてあるなと 11:38 PRって書いてあるからじゃあ会議を 11:40 しようてな感じでえっと表示方法を決めて 11:44 いきますうんなのでこのHMLタグという 11:49 のはですねこのブラウザに対する指示だと 11:53 思ってくださいまず1つ目ねじゃあ例えば 11:56 このハローていう文字これ今度はね大きい 11:58 文字にしてみたいなっていう時はまかこH 12:02 1と書くんですねこれをじゃあ大きい文字 12:05 にしますで保存するで慣れてくるとこれ 12:09 コマンドSとかねコントロSで保存しても 12:11 いいかもしれないですねでブラウザーの 12:13 更新ボタンを押しますお大きくなりました 12:17 でもですねなんかハローだけ大きくし 12:20 たかったのに倍も大きくなっちゃったん 12:21 じゃないかと思った方もいるかもしれませ 12:24 んでもう1つのブラウえHMLタグの特徴 12:27 の1つにこの終了タグというのがあります 12:31 かスH1こっからここまでだよってこの 12:35 範囲を決められるんですねでこれで保存し 12:38 てみてみるとこれは今度ハローだけが 12:41 大きい文字になりましたでそうHTML 12:46 タグま1つはえっとですねブラウザーに 12:50 対する指示で開始タグと終了タグがあるん 12:53 だよってことをここでは覚えておいて 12:56 くださいまこれからねもうちょっとこう 12:58 意味的なこととかいろんなこう使い方が 13:00 あるんですけれどもまずはこれが基本に 13:02 なりますのでここを覚えて自分でも 13:05 きっちりと表示できるようにし 13:10 ましょうはいじゃあですねえっとHTML 13:14 本格的なねま本格的と言ってもですね 13:18 ちょっともう少しちゃんとしたHMLをね 13:20 書いてみたいなと思いますいいですかじゃ 13:24 これまず消しましてねで保存ですかCSで 13:30 リロードすると何もなくなりましたうん 13:34 じゃあねHTML書く時必ず必要な構造 13:38 っていうのがあるのでちょっと書いてみ 13:40 ますねで 13:42 HTMLスHTMLおサブライムテキスト 13:45 保管してくれるんですねヘッスシュヘッで 13:51 タイトルでスラッシュタイトルでボディ 13:55 ボディのスボと 13:59 感これがですねえっとこのHTMLの構造 14:04 になりますいいですかここねHTMLって 14:09 こことここが挟まっていましてでヘッドが 14:14 あってでボディがあってまヘッドの中には 14:19 タイトルもあります 14:21 ねこんな構造になってるんですねでじゃあ 14:24 今ここまで書いてじゃ保存し 14:28 てブラウザーをリロードしてみましょうか 14:31 リロードうんこんだけ書いてもね全然白死 14:34 なんですよそうそうせっかくこもうこんな 14:37 に書いたのになんで何も出ないんだと思う 14:39 かもしれないですけどこれ全部かことかこ 14:41 に挟まれてるローマでしょねこれは 14:43 ブラウザーに対する指示っていうことを前 14:45 に言ってやったと思いますなので何も映ら 14:48 ないんですじゃタイトルの中ここじゃズ 14:52 ロッパと打ち込んでみますでズロッパで 14:56 えっとじゃリロードしてみますねね保存し 14:59 てリロードうんそうするとまだここには何 15:02 も出ませんでもですねよくよく見てみると 15:06 まこの中このタブにはズロッパと書かれて 15:09 いますそうですねタイトルと書かれた部分 15:13 にはこのブラウザのこのタブには反映さ 15:17 れるとじゃあこの白い部分に反映されるの 15:20 はどこかなと言うとこのボディという中に 15:24 書いていきますいいですかボディってのは 15:27 内容って意味ですよねねなのでここにその 15:32 内容を書いていきますね 15:35 ロッパでこれはじゃあH1タグで囲んで 15:38 あげましょうかH1でかこスシュH1うん 15:43 で保存してでブラウザーを更新うん0出 15:48 ましたじゃあ次にここはPタグPでえっと 15:54 ここはね角の動物園です 15:59 でかこスシュP閉じるうんこのPタグって 16:03 いうのは長い文字を入れる時には必ずこの 16:06 Pタグに入れますね文字列ま文字列を 16:10 入れる時は必ずこのPパラグラフの略あの 16:14 段落って意味ですよねで保存して見てみる 16:17 と架の動物園ですと出てきましたはいはい 16:22 じゃあ次にそうですねじゃあ画像を出して 16:25 みましょうか画像はですねこの同じ 16:30 フォルダーの中よく見るとこのパンダて 16:35 いう画像ファイルがありますこれを表示し 16:38 てみますねえっとタグはですねかこ 16:44 IMG 16:46 SRCIMGsceと言います 16:49 コダコーテーションここにファイル名を 16:53 入れてあげますPanda.jpgでかこ 16:58 閉じる 16:59 うんで保存します保存してリロードすると 17:03 もう画像が出てくれましたうんいいですね 17:08 皆さんもこう真似してやってみてください 17:10 ね今いくつかやってましたH1タグとP 17:14 タグとimgタグじゃもう1つやってみ 17:16 ましょうかえっとそうだなじゃリンクタグ 17:21 っていうのをねあのやってみますちょっと 17:23 めがないですけどまスキルハブにリンクを 17:25 貼ってみますねえっと 17:29 を学ぶ 17:32 なららスキルハブえうんでこの文字じゃ 17:40 保存し 17:41 てリロードするとまここになってますこれ 17:44 ねimgタグとこの文字列何もしないから 17:49 こう横に並んじゃうんですよねちょっと 17:52 このwebを学びながらスキルハブへって 17:54 いうのもじゃPタグで囲みましょうかP 17:58 タグかスシュPうん今これちょっとねタブ 18:04 キーを押して少し間を開けるんですよこの 18:08 ことインデントって言うんですけどそう 18:10 するとこのPとPの間に入ってるのは 18:13 ちょっとへこんでここだよって見やすく 18:15 なるんですよねこのインデントについては 18:18 もう少し書いていく時に説明しますからね 18:21 でじゃあえっとウボマブラスキルハブへ 18:26 保存してリロードうんこうなりました 18:28 じゃあこの文字列にリンクを貼ってみます 18:32 ねえじゃあWebのWの左にかっこかこっ 18:37 ても書いちゃいましょうかAの 18:41 hreうんイダコーテーション 18:45 えっと 18:46 https 18:50 c/kg 18:52 うんでここかこス 18:56 Aと書きますまこの文字列をこのAタグ 19:01 アンカータグって言うんですけどねリンク 19:03 タグのことアンカータグねでこれで挟んで 19:06 あげて保存してブラウザーを更新すると 19:11 うんここなってますでクリックするとはい 19:15 スキルハブに飛びまし 19:18 たですねなのでえっとこうやってあげると 19:23 どんなところにもリンクが貼れますよと 19:26 いうことですねじゃあ戻っ 19:29 てそうだなまこんなところですかねえっと 19:34 まHTMLっていうのはこういう風にかこ 19:37 とかこに挟まれたローマジで色々な表現が 19:41 できますでIMGって書いてあげると 19:44 えっと画像を表示してくれたりあとはPは 19:49 パラグラフ段落ね多い文字を表示する時は 19:52 Pタグでリンクを貼る時はこのAタグです 19:56 ねよいしょで見やすくするためにこう 19:59 インデントつけてあげると見やすい 20:02 うんという感じでえっとまHMタグを何個 20:09 か覚えていけばもうチカチカチカチカと 20:10 かけていけますよということなんですね 20:14 じゃあ 20:15 えっとまこのサブライムテキストを使って 20:19 これ全部書くのだるいなと思ったと思うん 20:22 ですよねなのでえっとちょっと簡単な書き 20:26 方ねこれはサブライムテキストでも他のの 20:28 テキストエディターでもま同じような感じ 20:31 なんですけれどもこう補助機能っていうの 20:35 があるんですよ例えば 20:37 HTMLって書いてあげてタブキーを押す 20:41 ともうさっき書いたやつがバッと出てくる 20:44 んですねいちいち全部自分で書く必要は 20:47 ないしかもこうまキャラセットであるとか 20:50 ビューポートこれスマホの時にちゃんと 20:53 こう縮めた時見栄よく見せるようなタグ 20:57 これも最初から書いてくれてますま自分で 21:00 書くよりももうちょっと多いね基本構造を 21:02 最初から書いてくれるんでこのHTML 21:05 って書いてタブキオスこれはおすめですか 21:09 ねでズロパとか 21:12 ね書いてじゃこのボディの中さっきH1 21:16 って書きましたけどもH1って書いてタブ 21:19 キーを押すとやっぱり開始タグと終了タグ 21:22 を保管してくれるんですようんでその下 21:26 えっと 21:28 の動物園ですでけうんこれもねPタグP 21:33 タブキーを押すとま今ずらずらと出てきて 21:38 その中の1つを選ぶとですねもうここです 21:41 ねエンターキ押すとPが入ってくれるで核 21:45 の動物園ですこれIMGも同じIMGタブ 21:49 うんで来ましたよねパンダ.jpcこう 21:54 やっていくと非常にですね間違いが少なく 21:57 なるじゃ最後AタブでレフをAタブはここ 22:04 に行かないとだめですねAタブエンターで 22:08 ここにhttps 22:11 コskilhave.jp 22:16 とでこのかこの間に行って 22:20 うんとスキルハブNのリンクちょっと文字 22:25 が違いますけども保存してでリロードする 22:29 とまこうなってますおここね横になっ 22:33 ちゃったからあPタグ忘れちゃったなとで 22:36 まここにPタグを入れ直さないといけない 22:39 ですけどもまPタブでエンターでここでま 22:45 入れ替えるとこうねコマンドキーと 22:49 コントロールキーを押しながらとこう塊り 22:51 を移動できたりするんですよでタブキーを 22:54 してインデントつけるとかねまこれはお 22:58 覚えていけばいいんですけども非常にこう 23:00 コードを書く時に便利な機能がいっぱい 23:03 あるんですよねなのでえっとサブプライム 23:06 テキストまずはサブライムテキストでいい 23:09 と思いますで慣れてきてもうちょっと高 23:11 機能なの使いたいなと思ったらvsコード 23:13 を使ってこういうHTMLとかコードを 23:16 書いていくと生産性がすごく上がるという 23:19 わけですねうんはいじゃあまあいかがだっ 23:24 たでしょうかHTMLねやってきました 23:26 けれども結構簡単にかけたかなと思います 23:33 ね私がやるとすごい簡単そうに見えてま 23:36 あの自分でやってみないとねまだ皆さん 23:39 ちょっと実感持てないかもしれないです 23:41 けど私がやったビデオを見てえっと 23:44 ちょっと早いかもしれないから一時停止し 23:46 て書いてみて一時停止してま再生してで 23:49 一時停止してまず書いてみて再生してて 23:52 いう感じでやっていただくとあのすごく 23:55 楽しめるんじゃないかなと思います楽しみ 23:57 ながらコーディングできますので是非試し 24:00 てみて 24:01 くださいじゃあ次回はえっとこれにですね 24:06 CSSなんかをつけてちょっと色をつけて 24:10 いきたいなと思います徐々にねあの面白く 24:13 なってきますんで今ちょっと簡素な感じ 24:16 ですけどもこれ複数ペイジ作って色つけて 24:19 ちゃんとレイアウトしてってにやってき 24:21 ますので楽しみにしててくださいはい 24:24 じゃあまた次回お会いしましょうお疲れ様 24:26 でし 24:27 たさ