動画編
HTMLの土台
（補足1）インデント
（補足2）タグの書き方のいろいろ
テキスト編
ブラウザを通してみるページのほとんど全てがHTMLとCSSという言語で書かれています。
ブラウザというのはSafariやChromeなどです。
つまり、HTMLとCSSが書けるようになれば、Webサイトがつくれることになります。
HTMLとCSSのそれぞれの役割は、ざっくり言えば、
- HTML→タイトルや本文などの骨格をつくる役割
- CSS→レイアウトや色などをつける役割
という感じです。
今回はHTMLです。
まだ1回目ですが、今回の内容が分かればこれから先の部分は、今回の内容の応用するだけです。
そのため、今回の内容が分かってしまえば9割方は完了していると言える状態になります。
STEP1
それでは早速HTMLのファイルをつくってみましょう
VSCodeを開いて、ファイルを新規作成し、保存してみてください。
ファイルの名前の最後は
.html
とします。こう書かないとHTMLとして認識されないので、HTMLの最後はすべて.htmlにする必要があります。
ここでは、「HTMLの土台」というフォルダをつくりその中に「index.html」という名前で保存します。
（index.htmlはよくトップページ用のファイル名として使われるので、フォルダ内のメインのページの場合はこの名前をつけるのがオススメです）
Step2
それではいよいよHTMLの中身を書いていきます。
ここが最大の山場なので、頑張りましょう！
と言っても、実はこのSTEP2の内容はコピペでOKです
この中に、これからブログの記事や写真などいろんなものを入れていくことが出来ます。
今回はそんなメイン部分の外側の枠の部分です。この外側の枠を書くことで「これからHTMLで中身を書いていきますよ」ということをブラウザに伝えることができます。
長いですが、これはただの決まり文句なので覚える必要はありません。下の内容をコピペしてしまいましょう。
<!DOCTYPE html>
<html>
<body>
</body>
</html>
（補足）文字が若干ずれていますが、これは見やすくするためにずらしているだけで、ずらさなくてもずらし方が違っていても同じです。このずらす部分をインデントと言うのですが、どうインデントすると見やすくなるのかについては、慣れてきたころにやるので、ここではちょっとまねしてみるくらいの感じでOKです
保存
最後にこの作成したファイルを保存して、ブラウザで確認してみましょう。
キーボードの「コマンドキー+s」で保存するか、左上の「File」から「Save」と選択すれば保存完了です。
早速できあがったファイルをブラウザで確認してみます。
ファイルのところに行きファイルをダブルクリックするとブラウザが勝手に開き表示されるはずです。
（もし他のエディターなど何か別のアプリが立ち上がったら、いったん閉じてからファイルを右クリックして上から2番目の「このアプリケーションで開く」を選択し、ブラウザを選ぶと開けます）
完成
おめでとうございます！
これでHTMLの土台が完成しました！
とは言え、まだ中身はありません。
少しだけ中身を追加してみましょう。
先ほど書いた中に
<body>
</body>
という部分がありますよね？
ここの間に
<body>
Hello world!
</body>
と文字を入力してみましょう。
もう一度保存して、ブラウザで確認すると、先ほど入力した文字が表示されているはずです。
勘のいい方は気がついたかもしれませんが、今入力した部分をどんどん変更していったらいいんですね。
次回からいよいよメインコンテンツ部分の作成へと進んでいきます！
（補足: 実際にはこの「Hello world!」の部分は「
Hello world!
」のように書かなければならないなど、決まりがあるのですがそれは次回から早速やっていきます。）
