文章をHTMLでマークアップしよう！
こんにちは！ ちばにしです。
前回に引き続き、架空のカフェのトップページを作って行きたいと思います。
今回は本文をHTMLでマークアップしていく行程になります。
文字列をHTMLでコーディングしていこう
ブラウザにも理解できるように、文字列に意味づけを行って行きたいと思います。
ココはタイトルだよ、ココは文章だよと分かるように、「タグ」というものを使用して始まりと終わりを明確に示していきます。
今回使用するタグは
<h1>･･････ヘッディング１の略で、見出しという意味のタグです。基本的にそのページのタイトルとなります。
<p>･･････英語のパラグラフの頭文字で、文章という意味です。
<div>･･････英語のディヴィジョンの頭のスペルで、範囲、部分という意味です。デザインを区分けするときなどに使用します。
では、前回コピペしていただいた文章を、これらのタグを使って意味づけ（マークアップ）を行っていきます。
マークアップは必ず半角英数字で行ってください。全角は認識されません。
マークアップをしていく順番は基本的に自由なのですが、やはり目立つものからしていった方が迷わずにすむので、
今回もタイトルになる<h1>からおこなっていきたいと思います。
私の場合は
<h1>ChibaNishi CAFE</h1>
となります。
そしてつぎの行のバリスタが～から、最後のBLOGまでを一行ずつ、文章をあらわす<p>でマークアップしていきたいと思います。
私の場合は
<p>ChibaNishi CAFEがオープンします</p>
<p>バリスタが丁寧に淹れたエスプレッソをぜひお楽しみください</p>
<p>HOME</p>
<p>ABOUT</p>
<p>MENU</p>
<p>ACCESS</p>
<p>BLOG</p>
となります。
そして最後に、全ての文章を１つのまとまりとして範囲を定義するために、<h1>から最後の<p>までを<div>で囲います
私の場合は
<div>
<h1>ChibaNishi CAFE</h1>
<p>ChibaNishi CAFEがオープンします</p>
<p>バリスタが丁寧に淹れたエスプレッソをぜひお楽しみください</p>
<p>HOME</p>
<p>ABOUT</p>
<p>MENU</p>
<p>ACCESS</p>
<p>BLOG</p>
</div>
となります。
これにてHTMLでのマークアップは終了です。
以下に正解例として全文を載せます。
<html>
<head>
<meta charset="utf-8">
<title>ChibaNishi CAFE</title>
<style>
<!-- ここに、デザインをきめるCSSが入ります-->
</style>
</head>
<body>
<div>
<h1>ChibaNishi CAFE</h1>
<p>ChibaNishi CAFEがオープンします</p>
<p>バリスタが丁寧に淹れたエスプレッソをぜひお楽しみください</p>
<p>HOME</p>
<p>ABOUT</p>
<p>MENU</p>
<p>ACCESS</p>
<p>BLOG</p>
</div>
<p>c 2020 ChibaNishi CAFE ALL RIGHTS RESERVED.</p>
</body>
</html>
保存をして、あらためてデスクトップにあるcafe.htmlのファイルをダブルクリックしてブラウザで開いてみてみましょう。
先ほどと違い、きちんと改行などが行われていると思います。
ひとまず今回はここまで！
次回はいよいよCSSの記述に移りたいと思います。
著者：ちばにし
記事１へのリンク[:]
