今回はそんな疑問にお答えしていきます。
初めてコーディングする人は何から書き始めていいか分からないと思います。
今回はWeb制作でHTMLの書き方、というか書き始め方について書いていきます。
今回書いてある内容は基本的に全てのサイトで共通するような内容となっています。
結論から書いてしまうとこのコードになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>じゅんぺいブログ</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="コーディングとWordPressでWeb制作"
/>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>結論と言ってもこれは最低限の物で、必要に応じて追記していく形になります。
それではこれを1つずつ説明していきたいと思います。
効率よくコーディングしたい人はこちら
DOCTYPE宣言
まず一番最初の行に書いてある<!DOCTYPE html>がDOCTYPE宣言と呼ばれるものです。
これはもうお約束みたいなもので何も考えずに書いておけば大丈夫なのですが、それではあまりにも雑なので簡単に説明します。
ここの書き方はHTMLのバージョンによって異なりますが、ここではHTML5での書き方になります。
この<!DOCTYPE html>は文書がHTML5で作られたものであることを宣言しています。
どういう事かと言うと、HTMLではバージョンごとに使用できるタグやルールが異なるので、一番最初にこの文書はHTMLでどのバージョンかという事を宣言する必要があります。
<!DOCTYPE html>のどの辺がHTML5なのか良く分からないと思いますが、HTML4ではいくつか種類がありますが例えば以下になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
長ったらしいですね。
その点HTML5は<!DOCTYPE html>だけなので非常に見やすいです。
このDOCTYPE宣言がないとCSSが正しく反映されず、レイアウトが崩れる可能性もあるので必ず書いておきましょう。
ちなみに大文字でも小文字でも大丈夫ですが、<!DOCTYPE html>という書き方が一般的なのでこう書いておきましょう。
htmlタグ
次に大枠となるhtmlタグになります。
これは<html>が開始タグで、</html>が閉じタグとなります。
<!DOCTYPE html>以外は全てこの<html>～</html>の中に入ります。
特に意味自体はなく、このhtmlタグに日本語のサイトであれば<html lang="ja">、英語のサイトであれば<html lang="en">といった感じにlang属性と呼ばれるものを付けることも出来ますが・・・googleはこのlang属性は見ていないと公式に発表されているらしいので、書く必要はないとされています。
なので<html>～</html>だけ書いておけばOKです。
headタグ
次にheadタグですが、これもhtmlタグ同様<head>～</head>という書き方をし、この中にいろいろと書いていきます。
このheadタグの中身はサイトのコンテンツとは別物で、サイトのタイトルやCSSの読み込みなどを設定します。
例を元に順番に見ていきます。
charset属性
<meta charset="UTF-8">これはmetaタグ（meta要素）に書いてあるcharset属性になります。
metaタグはこの後も出てくるのでここで説明しておくと、ページに関する様々な情報を記述する所となっています。
上記コードのcharset属性に書かれたUTF-8の部分は文字コード（正確には文字エンコーディング）と呼ばれるもので、文字化けを防ぐためのものと思って下さい。
ここはUTF-8以外にも色々あるのですが、HTML5ではUTF-8が推奨されているのでUTF-8にしておきましょう。
またcharsetはキャラセットやキャラクタセットと呼ばれることが多いので、charasetと書きたくなりますがcharasetのaは不要なので注意してください。
titleタグ
これは簡単でサイトのタイトルとなります。
簡単ですが非常に重要な所なのでキーワードなどよく考えて決めましょう。
viewport
これはmetaタグに書くもので、書き方は色々ありますがここではgoogleが推奨しているという書き方にしました。
<meta name="viewport" content="width=device-width, initial-scale=1.0">このviewportですが、レスポンシブ対応サイトを作る際に必要なものとなります。
今から作るサイトであればレスポンシブ対応は必須だと思うので、この記述も必須と言っていいでしょう。
以前これを書き忘れてレスポンシブがうまくいかなかった事があります。
meta description
<meta name="description" content="現役フォトグラファーのWeb制作備忘録となります。">これもmetaタグなのですが、これはdescriptionと呼ぶのではなくmeta descriptionと繋げて呼ぶ方が一般的です。
また必須項目ではありませんが、サイトの要約を書くところなので書いた方がいいでしょう。
meta descriptionと検索して出てきた画面が次とすると、赤枠内がmeta descriptionで書いた文章となります。
ここに何も書いていないより書いてあった方がいいですよね？
ここで適切なキーワードを入れておくことでクリック率も上がるので、ぜひ書いておきましょう。
linkタグ
これは色々な書き方がありますが、ここではCSSファイルを読み込む為のコードとして書きます。
<link href="css/style.css" rel="stylesheet">まずhrefですが、読み込むファイルの場所となります。
ここではこのコードを書いているhtmlファイルと同じ階層にあるcssフォルダ、その中にあるstyle.cssとなります。
もしcssフォルダではなく、同じ階層にあればcss/style.cssではなく、style.cssとなります（この階層については別に記事を書こうと思います）
そしてrelですが、これはファイルとの関係性を表していて、ここでは外部スタイルシートとなるためstylesheetと書いてあります。
サイトによっては読み込むスタイルシートが2つ以上ある場合もあるので、その時は増やしていきます。
以上でheadタグ内に書くものについては終了です。
bodyタグ
ここからようやくコンテンツ部分になります。
意味としては文書の内容を表すといった感じになります。
このbodyタグも閉じタグがあり、</html>の上に書きます。
このbodyタグは1つだけ使う事が出来るという点と、配置する場所さえ間違わないようにすればOKです。
headerタグ
先ほど出てきたheadタグと名前が似ているので注意して下さい。
headタグはサイトに表示されるものではありませんが、bodyタグ内にあるこのheaderタグはサイトに表示されます。
主にサイトの一番上に位置することが多いです。
ヘッダーにはメニューやロゴを載せることが多いですね。
htmlは書いた順番で表示されていくので、bodyタグの中で一番最初に書くのはheaderというのが定番となります。
mainタグ
これもheaderタグと同様閉じタグがありますが、これは1つしか使えません。
あとで書くfooterとheaderはページが変わっても共通となる部分で、このmainタグ内にあるものがそのページのメインコンテンツとなります。
フッタータグ
そして最後にfooterタグですが、ページの一番下にあるコピーライトとかがある所になります（本当は横幅全部がfooter領域ですが）
このfooterはheaderと同じくページ共通となり、ここにheaderと同じようなメニューやロゴなどを載せているサイトも多いです。
つまりコンテンツ部分はfeader、main、footerの3つから成り立っています。
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
