このレッスンからいよいよ実際にテキストエディタとブラウザを使って、HTMLをマークアップしていきます！
もしまだVS CODEとクロームの準備で出来ていない場合は、こちらの記事を参考にセットアップを完了させておいてくださいね。
この記事ではHTMLとCSSをマークアップするためのツールの説明、導入の手順を説明していきます。 前回は普段使っているWEBのしくみについて学びましたね。 このレッスンにも関わってくる分野ですので、まだ読んでいない方はぜ[…]
段階的に少しずつコードを足していくので、心配いりません。
解説を見ながらゆっくりと書いていきましょう！
もくじ
ファイルの準備をしよう！
まずは練習用に新しいフォルダを好きな名前で作ってください。
フォルダを作成します
次に拡張子の設定をします。
拡張子とはそのファイルがどのような種類なのかをコンピュータが識別するためのもので、ファイル名の後ろに’.jpg’のように表示されます。（すでに表示されている場合は設定は不要です）
今後htmlファイルやcssファイルなどいろいろな種類のファイルを扱っていきますので、自身もすぐ分かるように明示的にしておきましょう。
Macの場合
- MacのFinder で、「Finder」＞「環境設定」と選択してから、「詳細」をクリックします。
- 「すべてのファイル名拡張子を表示」を選択します。
Windowsの場合
- 画面下のタスクバーからエクスプローラー（フォルダマークのアイコン）を開きます。
- 上部メニューに’表示’の項目があるのでクリック。
- ’ファイル名拡張子’のチェックボックスにチェックを入れます。
ファイル名の後ろに
拡張子が表示されました！
マークアップしていこう！
ファイルを作る
テキストエディタで新しいファイルを作っていきます。
まずはVS CODEを開いてください。
メニューからファイルを選択して新規ファイルをクリックします。
ショートカット
・Mac: cmd + N
・Windows: ctrl + N
でも開くことができます
タブに新しいファイルが開かれます。
次に入力言語の設定をしていきます。
いちばん画面下に現在の入力モードが表示されています。
最初は’プレーンテキスト’（なにも言語設定されていない状態 メモ帳などに便利ですよ）になっているかと思います。
こちらをHTMLに変えてください。
するとエディタがHTMLに適した予測をしてくれたり、見やすく表示してくれます。
今回だけでなく、CSSやPHPなどでも最初にこちらのモードでその言語に切り替える、といった感じです。
言語モードが
‘HTML’
に変わりました
はい！ こちらで設定完了です。
マークアップの注意点
これからお手本のコードを見ながら段階的にマークアップしていくわけですが、いくつか注意点があります。
- 開始タグ、閉じタグをわすれない
- タグの<>（やまかっこ）、タグ名、スペースは半角英数字で書く
- タグ名のスペルミス
これらが一つでもあると表示がうまくされません。
特に全角文字が混じってしまうと、なかなか気付きにくいので注意しながらゆっくりと書いていきましょう。
文書宣言を書く
以下の一行を書きます。
<!DOCTYPE html>HTMLファイルはいちばん先頭に’これからHTMLを記述していきますよー’とコンピュータにお知らせする文を書いていく決まりがあります。
これをDOCTYPE宣言または文書型宣言といいます。
DOCTYPEとはDocument(文書の)Type（型）の略ですので、何となくイメージがつかめるのではないでしょうか。
htmlタグを書く
先ほど書いた一文の下にこちらを加えてください。
<!DOCTYPE html>
<html lang="ja"></html>htmlタグは全体を囲む
DOCTYPE宣言の行の下に書かれたタグ’<html></html>’はそのままhtmlタグと呼ばれます。
勘の良い方ならピン！ときたかもしれませんが、そうです、その名の通りHTMLそのものを表すタグです。
DOCTYPE宣言文を除く、すべての要素はこのhtmlタグの中に書いていきます。
間違ってhtmlタグの外にはみ出さないように、注意してください。
htmlタグのlang属性
htmlの開始タグの中には
lang=”ja”
という属性が書かれています。
lang属性と呼び、どの国の言葉か設定するもので日本語は“ja”です。
ちなみに英語は”en”、フランス語は”fr”といった感じです。
language（言語） = “japanese”（日本語）の略ですね！
前回の復習ですが、属性は開始タグ名の後に半角スペースを入れてこのような形式で書くのでした。
属性 = "値"ヘッダ要素を書く
先ほど書いたhtmlタグの開始タグと終了タグの間でエンターキーを押します。
すると画像のように自動的にhtmlタグの中に記述できるように一行分スペースができ、カーソルが移動すると思います。
よく見るとタグ自体も段駱がついて見やすくなっていますね！
htmlタグの間で
エンターキーを
押すと…
1行余分に改行され
そのまま中に
タグを書けるようになります！
この構造をツリー構造と呼び、タグの構造を分かりやすく表示してくれるエディタの機能です。
コードが煩雑になってくると、どのタグがどのタグを修飾しているのか混乱しがちなので、自分自身のためにもこのツリー機能を活用して、きれいなコーディングを心がけましょう。
それではコードを書き加えていきます。
3行一気に書いていきますので、ゆっくり間違い無いように書いてくださいね。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>コード食堂のHTMLレッスン</title>
</head>
</html>headタグとは
htmlタグの中にheadタグ（<head></head>）を書きました。
headタグの中に書かれた内容はページには表示されません。
そのWebページの情報や設定などを書く場所になり、ヘッダ要素と呼ばれています。
メタデータとは
headタグの中（ヘッダ要素内）に書かれた
<title>コード食堂のHTMLレッスン</title>はこのWebページの基本的な情報を表す部分でメタデータと呼ばれます。
今回はシンプルにタイトルタグだけですが、SEO対策（グーグルの検索結果で上位を取れるように対策すること）などでここのheadタグにメタデータを記述していくことになります。
そしてtitleタグ(<title></title>)はページのタイトルを表します。
ページの中ではなく、クロームをはじめブラウザのタブに表示される部分ですね。
ボディ要素を書く
ではいよいよ仕上げに入っていきますよ。
ボディ要素（または本文要素）と言って、実際にページに表示されるところを記述していきます。
<body></body>で書きます。
headタグの終了タグの下に、このように加えてください。
（targetの前には半角スペースが入りますので注意！）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>コード食堂のHTMLレッスン</title>
</head>
<body>
<h1>晩御飯はどうしよう？</h1>
<p>今日のレシピに迷ったら</p>
<a href="https://cookpad.com/" target="blank">ここで決めよう！</a>
</body>
</html>エディタ画面ではこんな感じです。
書き終わったら好きなファイル名で、先ほど作ったフォルダの中に保存します。
入力モードをHTMLで設定しているので自動的に.htmlになっているかと思います。
HTMLファイルはこれからすべて’ファイル名.html’の形式で保存していきます。
最初に拡張子の表示設定をしましたね。
拡張子が.htmlになっていないとブラウザで表示ができないので注意です。
上のメニューから保存するか
ショートカット
・Mac: cmd + S
・Windows: ctrl + S でも保存できます
ブラウザで表示してみよう
さっき保存したファイルをクロームのウィンドウの空いているところにドラッグ＆ドロップします。
ページが表示されました！
リンクをクリックして、新しいタブでクックパッドのサイトにジャンプできたら完成です！
表示がおかしい、リンク先に飛ばない場合はどこかコードに間違いがあるので、再度確認してみてください。
（その場合、もう一度保存し直してページを更新してください）
それはそうとなんだかとても殺風景なページですよね。。
これはレッスン１でも触れたように、サイトに表示させたい基本的な構造をたった今HTMLで書いただけだからです。
この後にCSSで装飾することで、自分好みのテイストやモダンなデザインに変えていくことができるのですね。
HTMLファイルの構造を理解しよう！
解説の通り、HTMLファイルには表示される箇所と、表示されない箇所があるのでした。
htmlファイルは書き方にルールがあり、大きく分けて文書型宣言、ヘッダー要素、そしてボディ要素から構成されています。
最初は表示されるメインのボディ要素を勉強したいと思いますので、先にこちらを集中的に学んでから徐々にヘッダー要素の知識をつけていくのがいいかと思います。
まとめ
- HTMLファイルは文書型宣言、ヘッダ要素、ボディ要素で構成される
- ファイルの一番先頭にはDOCTYPE宣言を書く
- 宣言文をのぞく除く全ての要素をhtmlタグで囲む
- ヘッダ要素に書くページの情報をメタデータという
- ボディ要素とはページに表示されるメインの部分
- ファイルは’ファイル名.html’の形式で保存する
初めてのHTMLファイルのマークアップはいかがでしたか？
最初は構造や用語が多くて覚えるのが大変かと思いますが、慣れてくるとHTMLはとてもシンプルな構造だと思えるようになります。
同じコードをなんども書いたり、自分で中身をちょっとだけアレンジしたりしたりすると理解が深まりますよ。