【入門】HTML&CSSの基本を知ってフォーマットを作ろう！

2021-03-01

今回は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 */で「ここからメインコンテンツのコードだよ」と書いておいたり。