contents
- 主な構成はこんな感じ！
- <!DOCTYPE html>でHTMLを使う宣言をする
- <head>内の役割
- <body>に書く内容
１．主な構成はこんな感じ！
今までHTMLとCSSを一通り勉強したからといって、「さあサイトを作ってみなさい！」と言われてもそんな簡単にできるわけないですよね。。。
まずHTMLを書くときってどうやって書き始めたらいいんだろう？っていう疑問から始まるんです。
そこで、ひとまず『HTML テンプレ』で調べて、いろんなサイトのテンプレを見比べてみましょう！
ほとんどのテンプレはこんな構成で出来ていたことがわかりました！
<!DOCTYPE html>
<!–HTMLを使うよっていう宣言をする！–>
<html>
<head>
<!–タイトルを入れる–>
</head>
<body>
<!–内容を自分がわかりやすいように構成していく–>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
２．<!DOCTYPE html>でHTMLを使う宣言する
まず、先頭にと書いて、これからHTMLを使うよ〜っていう宣言をします！
ちなみに、赤文字で表示されている文字はコメントアウトといって、いらなくなったコードを画面上に表示させなくすることで、
今回の私のように、後から自分が見ても分かるようにメモ機能としても使えます！
- コメントアウトは、各言語によって書き方が違うので注意が必要！！
- HTMLの書き方 <!–この中にコメントを書く–>
- CSSの書き方 /*この中にコメントを書く*/
- HTMLの書き方 <!–この中にコメントを書く–>
３．<head>内の役割
head内での役割は主に、次のようなものがあります！
- タイトルを入れる（サイトのタブの部分！）
- CSSにリンクさせる
- 使いたいフォントのURLを貼る
- meta要素の属性
- HTMLのmetaとは？
- ユーザ向けというよりは、ブラウザや検索エンジンに情報を伝えるためのもの！（メタ発言っていうと、アニメのキャラクターが視聴者に話しかけることをいうけど、全然違うんですね（泣）IT用語むずっ！）
- メタ要素の属性
- 文字コードを指定する場合は、「charset属性」
- 文字コード以外を指定する場合は、「name属性」か「http-equiv属性」で情報の種類を記述
- 1つのmeta要素には「charset属性」か「name属性」か「http-equiv属性」のどれか一つしか指定できない
- HTMLのmetaとは？
４．<body>に書くこと
body内には、サイトの中身を書いていきます！
- header部分
- 画面の上の部分を書く（主にサイトのタイトル部分を作ったり、画面上部に固定させてロゴやリンクなどを表示させたりすることが多い）
- main部分
- サイトのメインを書いていく
- 心理テストの内容や結果、各種SNSへ飛ぶボタンなんかもここに書く
- footer部分
- ホームページとかの下にある利用規約などを書く
次回は
それぞれのタグの意味を説明していきます！！
（今回の勉強でいかに自分がタグの意味を理解していなかったかよーくわかりました。。。）