今回はHTMLとCSSの入門編です！
最近ではWordPressなどのCMS（コンテンツ マネジメント システム）が多くあるので、誰でも簡単にウェブサイトを制作することができます。
しかし、WordPressの性質上、縦長1枚のLP（ランディングページ）の制作に向いていなかったり、
WordPressのテーマを編集する時は事前に静的なページを制作しておく必要があったり、とCMSだけではまかなえない状況がでてきます。
本記事では、ウェブサイトを1からコーディングして作っていく場合の基礎を解説していきますので、
最も基本的な形式のフォーマットを作れるようになり、今後の制作時はそのフォーマットから制作できるようにしましょう！
まずは現物を
これがフォーマットです。
簡単なものですがダウンロードできるようにしてありますので使ってください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
</head>
<body>
<header>
<h1>Title</h1>
</header>
<section id="contents">
<h1>contents</h1>
</section>
<footer>
</footer>
</body>
</html>ファイルの保存方法
1つフォルダを作成します。
フォルダ名は何でも大丈夫です。（参考キャプチャでは「sample-page」にしています）
このフォルダの中に、
HTMLファイルは「index.html」
CSSファイルは「style.css」とそれぞれ命名して保存します。
基本構造を知る
HTMLはそれぞれの要素の役割を定義していきます。
その土台となる共通の部分がフォーマットに入っています。
フォーマットの作成手順は以下の通りです。
ざっくりこんな感じです。
以下から詳細を見ていきます。
HTMLだと宣言する
<!DOCTYPE html>このタグでこのファイルはHTMLで書かれていることを宣言します。
DOCTYPEは、「ドキュメントタイプ」や「ドックタイプ」と言われます。
このタグは閉じタグは必要ありません。
HTMLタグを用意して言語を指定する
<html lang="ja"></html>このタグでこれから書いていくコードの全体を囲います。
その時、開始タグの中で言語を指定します。
“lang”はlanguage＝言語を意味し、“ja”はJapanese＝日本語を意味しています。
ヘッド部分を用意する
<head></head>このタグでヘッドと呼ばれる、文章の情報を記載する場所を作成します。
この中で、ウェブサイトの“目に見えない情報”を記載します。
最低限必要なものは以下になります。
文字コードの指定
<meta charset="UTF-8">（メタ キャラクターセット）
これは文字コードを指定するためのタグです。
文字コードとは、文字をコンピュータで扱うために個々の文字や記号に割り当てられた、固有の番号のことである。 文字コードの体系の代表的なものとしては、米国で最初に策定されたアスキー（ASCII）などを挙げることができる。
らしいです。
僕も詳しくないのですが、“UTF－8”を指定してあれば問題ありません。
titleタグ
<title></title>サイトのタイトルを指定するタグです。
ここで指定した名前が、下のキャプチャのようにサイトのタイトルとして表示されます。
CSSファイルの読み込み
<link rel="stylesheet" href="style.css">外部からファイルを読み込むときはリンクタグを使用します。
今回は同じファイル内に保存してあるCSSファイルを読み込みたいのでこのような書き方になります。
“rel”は「レル」と読み、関係性を示すために指定します。「このHTMLのスタイルシートだよ」ってことですね。
“href”は「エイチレフ」と読み、読み込むファイルの場所を指定するために使用します。
今回はstyle.cssが、同じファイルに保存されていますのでこのような書き方ですが、
違うフォルダに保存されているときなどは書き方が異なります。
リセットCSSを読み込む
safariやchromeなどのブラウザにはCSSがあらかじめ設定されています。
CSSの記述のないウェブサイトに対しての、“見栄えの最低保証”のような感覚でしょうか。
しかし制作側からすると、思い通りの見栄えにするためには少々邪魔ですし、
ブラウザによって見栄えに差が出てしまったりするので、「リセットCSS」と呼ばれるものを読み込んで、ブラウザのデフォルトCSSを読み込まないようにします。
リセットCSSの適用には、直接書き込む方法と外部ファイルを読み込む方法の2種類があります。
今回はややこしくならないように、外部ファイルを読み込んでいます。
リセットCSSを読み込むことはメリットデメリットがありますので、別の記事で解説します。
ボディ部分を用意する
<body></body>この中にサイトに表示する内容を記載していきます。
サイトの内容によってまちまちですが、一般的に必要なものは以下の通りです。
<header></header>ヘッダーを記載するためのタグです。
ファーストビューの画像、ロゴ、サイトの見出し、などを記載することが多いです。
<section></section>名前の通り、分割するためのタグです。
コンテンツを内容ごとに分割するときに使用します。
<footer></footer>フッターを記載するためのタグです。
コピーライトや会社情報などを記載することが多いです。
サイトの構造を考える
HTMLは階層構造になっています。
要素ごとの関係性を定義してあげなければいけませんので、その階層を意識して構造を考える必要があります。
例えば、こんなかんじです。
サイトタイトル
ファーストビュー画像
ナビゲーション
コンテンツ1
コンテンツ2
セクション
コンテンツ1
見出し
本文
セクション
コンテンツ2
見出し
本文
フッター
コピーライト
会社サイトURL
階層構造を意識しながらサイトの内容を考えていき、それを記述していきましょう！
ここまででフォーマットの作成は完了です！
CSSファイルのフォーマット
CSSは見栄えを指定していきますので、共通の事前準備は今回はありません。
ファイル内でCSSファイルだとわかりやすいように、「/* style.css */」と記載することだけしておきましょう。
ポイント
これのマークで挟むと“記載はしてあるけどコード上は意味を持たない文字”になります。
後から編集しやすいように、コメントを入れておいて使用します。
例えば、/* START main-contents */で「ここからメインコンテンツのコードだよ」と書いておいたり。
まとめ
最後までお読みいただきありがとうございます。
今回はHTMLとCSSのフォーマットを作成しました。今後はこのファイルをコピーして作成を始めると楽だと思います。
自分の制作物のなかで共通部分がもっとある場合は、その要素も書き足してもいいと思います！
