究極的に簡単にHTML / CSSでWEBサイトを制作する方法

ホシノ伍曜

2020年4月29日 00:25

今回は、究極的に簡単にHTML/CSSでWEBサイトを制作する方法というタイトルでお話させていただくのですが、あくまでもこれが基礎になるというレベルです。

HTMLやCSSを勉強される方にとって、ハードルを下げてWEB制作に興味を持っていただくキッカケになれば幸いです。

それでは、さっそく始めてみましょう！！

結論から先にお話します

HTML5では、headerタグ、mainタグ、footerタグが、あらかじめ用意されています。

したがって、コーディングもその構造にしたがって進めていくことになります。

結論としては、このようなベースコーディングになります。

コピーしてチートシートとして保存しておいても良いと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<meta name="description" content="<!- ページ内容の説明文 ->">
	<meta name="keywords" content="<!- ページ内容のキーワード ->">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1>ページ全体の見出し</h1>
	</header>
	<nav>
		<ul>
			<li><a href="xxx.html">メニュー１</a></li>
			<li><a href="xxx.html">メニュー２</a></li>
			<li><a href="xxx.html">メニュー３</a></li>
		</ul>
	</nav>
	<main>
		<!-- メインコンテンツが入ります -->
	</main>
	<footer>
		<small>Copyright 2020 xxxxx All rights reserved.</small>
	</footer>
</body>
</html>

次項で、詳しく説明していきます。

DOCTYPEタグは、文書型宣言と言います

どのページにも必ず1行目には、このタグが記載されています。
（記載されていないページがあったら、それは正しいページではありません。）

このDOCTYPEタグは、文書型宣言と呼ばれ、どのバージョンのHTMLで記載されているページなのかを表しています。

厳密に言うと、SGMLの文書をDTDと結びつける宣言なのですが、HTML5ではDTDが必要ないため、小難しいことは考えずに、HTMLのバージョンと一致していると考えて差し支えありません。

htmlタグは、HTML文書であることを表す

htmlタグは、「ここからここまでがHTML文書ですよ！」という意味を表しています。

lang属性は、このHTML文書は何語で書かれているか、を説明しています。

例えば、英語とドイツ語、日本語と中国語、スペイン語とポルトガル語、のように文法や単語の記述が似ている場合、ブラウザが誤認してしまうと、文字化けしたり、翻訳時に誤訳してしまうことがあるため、必須ではありませんが、必ず入れておくと良いでしょう。

headタグの内容は、ページの説明をしています

HTML文書のheadタグは、冒頭部分であり、ブラウザ上には表現されない内容です。
（titleタグはブラウザのタブに表示されます。）

headタグ内の1行目は、必ずcharsetを指定して下さい。

<meta charset="utf-8">

これは、titleタグやdescriptionなどの下に記述してしまうと、その内容が文字化けしてしまう可能性があるためです。

titleタグやdescriptionは、検索エンジンで使用される最重要項目であるため、これば文字化けしてしまうと、このページの価値は一気に無くなってしまいます。

headerタグは特殊な意味を持つタグ

headerタグとheadタグ、非常に間違えやすいタグですが、headタグは上記で説明した通り、ページの内容を説明するものになります。

一方、headerタグは、HTML5から新たに追加されたタグで、ヘッダーコンテンツとしての役割を持った特殊なタグになります。

body要素の直下には1つだけ、article要素に含む場合との併用は可能（その場合もarticle内に1つだけ）、などいくつかルールがあります。

また、header要素内にあるh1タグは、ページ全体の内容を表す一番大きな見出しとなるため、1つだけ設定できますが、sectionタグ内には、別途h1タグを設置することができます。

その場合は、そのセクションの内容を表す一番大きな見出しとなります。

navタグは、サイト全体の主要メニューを表します

サイト上部にnavタグを設置しつつ、フッターメニューとしてnavタグをfooterタグ内に設置しているサイトをたまに見かけます。

navタグは、サイト全体の主要なメニューを表していますので、サイト上部（header内も含む）か、footer内、どちらか一方に設置しますが、通常はサイト上部に設置します。

フッターメニューは、主要なメニュー以外のサブメニューも含むことが多いので、その場合はnavタグを使わないのが一般的です。

また、nav要素は内容の特性から、目次の役割があるので、基本的にはulタグを使って一覧（リスト）形式の意味づけをするのが正解です。

mainタグは、文字通りのメインコンテンツ

HTMLを人体に例えると、

head = 脳みそ（外からは見えない）
body = 体、全身
header = 頭部
main = 胴体
footer = 脚、足

となります。

mainタグの中に、そのページで伝えたいことを全て盛り込みます。

サブコンテンツ（サブメニュー、サイドメニュー、サイドバーなどと呼ぶ場合もあります）は、mainタグの外に配置するのが一般的です。

footerは、著作権や連絡先情報を示すところ

厳密にいうと、footerタグは、body要素の上部と下部に設置することが可能ですが、一般的にはページ下部に配置するのが慣例となっています。

また、body直下に配置したfooterタグは、ページ全体の著作や連絡情報を示していますが、articleタグ内に設置した場合は、そのセクションの著作や連絡情報を表します。

したがって、ページ内に複数のfooterタグを設置することが可能ですが、通常はページ下部に1つ設置するのがスマートです。

footerタグ内には、smallタグ（著作権情報）やaddressタグ（連絡先情報）を記述します。

CSSは、HTMLが出来てからの飾り付け

フリーランスや在宅でWEBのコーディングをお仕事として、活躍されている方も多くいらっしゃると思いますが、結構HTMLのコーディングが間違っていることが多く見受けられます。

最低限、WEB標準（WEBスタンダード）を守ってコーディングすることがお仕事としての条件になると考えています。

最も大きなポイントは、

　・HTMLは、ページの構造・構成のみを記述
　・CSSは、デザイン（色や余白、配置など）を記述

これをキッチリを分けることが重要です。

その次に、各タグごとの記述ルールを守ることになります。

CSSは、HTMLのコーディングが完了して始めて記述することが可能になるはずです。

CSSの記述については、別の機会でじっくりお話ししたいと思います。

Twitterでは大喜利企画、ブログでは読むラジオ、リアルではWEB屋の仕事をしています。 noteでは、WEBに関するお話や大喜利ファンクラブで話している内容を少しだけ紹介しています。