HTMLの最初に書くものと、必ず書くもの。 〜初心者〜

HTMLの最初に書くものと、必ず書くもの。 〜初心者〜

HTMLは、最初の書き出しと、必ず書かないといけないものは、決まっています。
忘れないように、書いておきたいと思います。

1.<!DOCTYPE html>

まず一番最初に書くものは、<!DOCTYPE html>です。
バージョンを現わしていて、現在のバージョンは、html5です。
今から、HTMLの文を書きますよ!という、宣言の文です。

2.<html>タグ

次は、<html>タグ。
<html>〜</html>の中に書き込まれたものが、ブラウザ上で見ることができます。
終了タグの</html>は、一番最後にきます。

3.<head>タグ

<html>タグの次は、<head>タグを書きます。
<head>〜</head>の間のものは、ブラウザ上には出てこない情報です。
<title>タグの中のものは、ブラウザ上に表示されます。
(サイト名を必ず書きます。)

<head>タグの中に書くもの。

<head>
<meta charset="utf-8″>
<meta name="viewport" content="width=device-width,initial-scale=1 minimum-scale=1,maximum-scale=1,user-scalable=no">
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style-sp.css" rel="stylesheet">
<title>サイト名</title>
</head>

●<meta charset="utf-8″>を
  書いておくと、文字化けしません。
  ※utf-8とは、文字コードです。

●<meta name="viewport" content="width=device-width,initial-scale=1 minimum-
 scale=1,maximum-scale=1,user-scalable=no">
 どんなデバイスにも対応します。という意味です。

●<link href="css/reset.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet">
 <link href="css/style-sp.css" rel="stylesheet">
  CSSを読み込むlinkタグを書きます。

  1.reset.css
  2.style.css
  3.style-sp.css(スマホ用)
 の順番で書きます。

4.<body>タグ

<body>は、ブラウザ上に出る部分を書いていきます。
終了タグ</body>は、</html>の終了タグの上にきます。

※htmlの一番最後の部分です。

5.<div id="wrap">

開始タグ<body>の後すぐに、<div id="wrap">を書いていきます。
wrapとは、サイトの縦幅・横幅・位置を決めるためのものです。
終了タグ</div>は、</body>の終了タグの上にきます。
どの開始タグの終了タグなのかが分からなくなってしまうので、
コメントアウトで残しておくとよいです。
※<body>タグの図の所、参照。

6.まとめ

htmlの最初にこれだけ書いておけば、大丈夫です。
これを書いた後に、サイトの中身を書いていきます。
(</div></body></html>は、中身を書いた後にきます。)
viewportなど、他にもいろいろな書き方があるので、一番いい書き方を知っているといいですね。

HTML

Posted by decotto703