作りながら覚えるHTMLの構造【webデザイン 基本】
ワードプレスでブログを構築する場合、ある程度HTMLとCSSの知識が必要になります。
特にwebデザインで自由度を高めて差別化を図りたい場合は尚更、知識が必要になります。
今回はHTMLタグ、いわゆるマークアップ言語をウェブページの基本の形を組んでそこから覚えていきたいと思います。
編集ソフト
まず、編集するソフトです。
基本テキストが打てるソフトであれば大丈夫です。
私はMacBook Pro2018を使っているのですが純正のテキストエディタの「テキスト エディット」はあまりコーディングには向いていません。ですので他のツールを使います。
Macで使用されてる有名どころはAdobeから提供されているBrackets。
GitHubで開発されたAtom。
そして一番人気のSublime Textがあります。
これらはいずれも基本無料で使用できます。
SublimeTextは有料版もありますが無料で十分です。
最初はこのいずれかのツールを使って作っていきます。
ちなみに私はSublimeText 3を使用させていただいてます。
Webページの基本構成
それではやっていきましょう。
テキストを新規作成します。
ファイル名はindex.htmlです。
まずは下記を半角英数字で入力していきます。
コードの中に全角文字が紛れると表示がおかしくなりますので気を付けましょう。
<!DOCTYPE html>まずこれを一番最初に入力します。
ドキュタイプ宣言と言いましてHTMLの最新バージョンで今から記述始めますよという宣言です。
次に
<html lang="ja">
</html>です。
このまま入力しましょう。
HTML文書の基本３種類の中の１つです。
残りは<head>と<body>になります。
HTML文書は基本的に始まりの開始タグとタグの終わりの終了タグがあります。
その開始タグと終了タグでサンドイッチして使います。
特殊なタグとして開始タグのみのタグもありますがそれは極少数で多くは開始タグ、終了タグで使うようになっています。
というわけで<html>の中にサンドイッチする形で<head>と<body>を置いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>この<head>と<body>の並びは上に<head>、その直下に<body>と仕様が決まっています。それでは<head>の中に必ず必要なタグを書きます。
<head>
<meta charset="UTF-8">
<title>Document</title>
</head><meta charset=”UTF-8″>は英語以外の言語のサイトを作る場合には必ず必要なタグになります。
これが無いと文字化けしてしまいます。
次に<title>ですがこれもSEO的に重要ですので必ず置いておきましょう。
そして<body>の中はインターネットを見るためのソフト、ブラウザで表示するエリアになります。
ここまでの記述は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>です。
上記のHTML構成がまっさらな状態の基本になります。
ここからの中で使用するタグを書いていきます。
上から順番に<header>、<nav>、<main>、<footer>と置いていきます。
基本的にこの順番で記述してください。ただ<nav>はそのタグの中にナビゲーションがいるというタグなので<header>の近くにいるようにします。
<header>の中にいても良いし、下に来たり、上に来たりします。
<body>
<header>
<h1>
</h1>
<nav>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body><header>はタイトル周りになりますので<h1>と<nav>を入れておきます。
<nav>は前述した通り他のページに飛ぶためのメニューになります。
で、メニューのタグの構成ですが必ず<ul>で構成されています。
なぜメニューを<ul>で構成するかというと<nav>ができる前からメニューは<ul>で作られていまして<ul>が<li>と組み合わせますので構造化されています。
ドロップダウンメニューとか作りやすかったというのもあると思いますがそのまま継承されて現在でも<ul>が使われています。
でも、<ul>は箇条書きなので本来の使い方ではありません。HTML5.5くらいのバージョンでメニュー専用の階層化したタグが欲しいものです。
というわけで<nav>の中を作ったものが以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>