この講座で、このページに初めて来られた方へ。本講座の目次があります。
今回は料理のレシピを作ってみましょう！
料理のレシピを用意するのが面倒臭かったのでタケピーさんからネタをお借りしました。
今回マークアップするのはこんな文章です！
今日のごはん
品目
- 親子丼
材料
- 鳥ムネ肉60gくらい
- 玉ねぎ半分くらい
- 鶏卵一個
- ミックスベジタブル（冷凍食品）適量
- 水60cc
- 砂糖8g弱
- 醤油15cc
- めんつゆ少々
作り方
- 肉と玉ねぎ切って、水とかとあわせて煮る
- 溶き卵を入れて弱火
- 火を止めて煮る
- ご飯にかける
- ウマー
費用･手間
案外楽に、安くできました。
その他
久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。
今回はこの前の文章とはひと味違いますね。
この前は「タイトル」と「段落」の２種類にしか分類しませんでした。今度は他に何が有るでしょうか？ 「見出し」と「箇条書き」そして、「順番が関係する箇条書き」です。
つまり、見出しなどのタグの書き方を学べば、同じような文章が書けるようになるはずです。
というわけで、見出しのタグから学んでいきましょう！
見出しのタグ
見出しのタグには<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>の６種類があります。
あるページの中で一番大切な見出しにh1をつけます。通常h1の見出しはページに１つだけあって、タイトルと似たような内容になると思います。
そして、２番目に大きな見出し、３番目に大きな見出し......と順番にh2,h3......を使います。
今回の例では、「今日のごはん」がh1、「材料」「作り方」「手間･費用」「その他」がh2だと見ることができそうです。h3より小さい見出しはありませんね。
箇条書き
箇条書きなHTML用語では「リスト」といいます。......よくよく考えたら、日常用語でもリストですか。
そんでもって、リストには「順序無しリスト」と「順序付きリスト」とがあります。これらを一遍に解説していきましょう。
まず始めに、この２つのリストはそれぞれどんな時に使うかを見ていきましょう。
順序無しリストはその名の通り、順序の関係のない箇条書きに使います。この例では「材料」がそれに当たりますね。材料をそろえるのに順番は必要ありませんからね。
順序有りリストは、順番が大切な内容のリストを作るときに使います。この例では「作り方」がそうです。ご飯にかけて食べた後で弱火に掛けたら、えらことになりますよね。
それぞれのリストの使う場面が分かったところで、実際の使い方を見ていきましょう。
リストは、順序の有無に関わらず<li>と</li>で囲みます。その例は
<li>鳥ムネ肉60gくらい</li>
<li>玉ねぎ半分くらい</li>
<li>鶏卵一個</li>
<li>ミックスベジタブル（冷凍食品）適量</li>
<li>水60cc</li>
<li>砂糖8g弱</li>
<li>醤油15cc</li>
<li>めんつゆ少々</li>
と
<li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
<li>溶き卵を入れて弱火</li>
<li>火を止めて煮る</li>
<li>ご飯にかける</li>
<li>ウマー</li>
です。
そして、この作業をした後に順序がない方の全体を<ul>と</ul>で、順序が有る方の全体を<ol>と</ol>で囲みます。例を見せましょう。
<ul>
<li>鳥ムネ肉60gくらい</li>
<li>玉ねぎ半分くらい</li>
<li>鶏卵一個</li>
<li>ミックスベジタブル（冷凍食品）適量</li>
<li>水60cc</li>
<li>砂糖8g弱</li>
<li>醤油15cc</li>
<li>めんつゆ少々</li>
</ul>
<ol>
<li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
<li>溶き卵を入れて弱火</li>
<li>火を止めて煮る</li>
<li>ご飯にかける</li>
<li>ウマー</li>
</ol>
どうでしょうか。
ところで、<ul>と</ul>の間や、<ol>と</ol>の間には<li>と</li>で囲まれた部分しかあってはなりません。
<ul>
<p>段落だよ～</p>
<li>箇条書きだよ～その１！</li>
<li>箇条書きだよ～その２！</li>
</ul>
こういうのは御法度です！
そして、品目にある「親子丼」ってやつですが、ここではリストが一個しかない「順序無しリスト」であると解釈しました。ここは段落だという解釈も有りだとは思うんですが、品目が二つ以上あるときもあったらどうでしょう？ 箇条書きにしますよね。そして、２，３個品目が合ったとしても順序はそれほど大事ではありません。あ、もちろんレストランのコースなんかは別ですよ。
そして、残った部分「案外楽に、安くできました。」と「久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。」は前回出てきたただの段落ですから、<p>と&li;/p>で囲んで起きましょう。くり返し言いますが、文書の全ての部分を必ず何かの種類に分類してください。見出しでも箇条書きでも無いからって宙ぶらりんにしていてはいけません。まよったら段落って事にしておきましょう。
こうして、料理のレシピの全体像ができました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日のごはん</title>
<h1>今日のごはん</h1>
<h2>品目</h2>
<ul>
<li>親子丼</li>
</ul>
<h2>材料</h2>
<ul>
<li>鳥ムネ肉60gくらい</li>
<li>玉ねぎ半分くらい</li>
<li>鶏卵一個</li>
<li>ミックスベジタブル（冷凍食品）適量</li>
<li>水60cc</li>
<li>砂糖8g弱</li>
<li>醤油15cc</li>
<li>めんつゆ少々</li>
</ul>
<h2>作り方</h2>
<ol>
<li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
<li>溶き卵を入れて弱火</li>
<li>火を止めて煮る</li>
<li>ご飯にかける</li>
<li>ウマー</li>
</ol>
<h2>費用･手間</h2>
<p>案外楽に、安くできました。</p>
<h2>その他</h2>
<p>久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。</p>
どうでしょう？ ところで、これを見てスペースや改行に気づいた人もいるかと思います。このように複雑にマークアップするときはまとまりごとに改行を入れたり、半角スペース（全角はだめ）を入れると見やすい場合もありますよ。この改行なんかは実際表示される時には全て無視されます。
では今回作ったこのファイルも「ウェブサイト作成講座」フォルダに「recipe1.html」という名前で保存しておきましょう。
作業が一通り終わったところで、少し解説をしておきましょう。
今まで「分類」とか「種類」だとか言ってきた、タイトル「title」や段落「p」、見出し「h1～h6」、リスト「li」、番号無しのリストを囲う「ul」、番号次のリストを囲う「ol」などは全て正式には「要素（element)」と言います。
文章とは「段落」や「見出し」や「箇条書き」といった要素が集まって成り立っているんだな～とイメージしてください。
そして、どんな要素が含まれているかをパソコンに教えてあげる道具が「タグ（tag）」です。お店の洋服についてるタグは店員さんに値段を教えてあげますが、それと同じでHTMLのタグはパソコンに要素を教えてあげているのです。
また、実は今まで教えてきたタグはtitle要素意外全て「ブロックレベル要素」という要素でした。ブロックレベル要素とは、見出しだとか段落みたいに文書全体をブロックにして分類する要素です。今はブロックレベル要素しか知らないから「？」という感じだと思います。でも次回「ブロックレベル要素」意外の要素も出てくるので、そのときにピンとくるはずです。乞うご期待！
今回のまとめ
- 文章がどんな要素で出来ているか考えよう！
- その要素を示すタグをつけよう！
- タイトル、見出し、段落、順序のない箇条書き、順序のある箇条書きの要素を習ったよ！
- そのうちタイトル以外の要素は「ブロックレベル要素」っていう名前。
章末問題
今日は沢山要素が出てきて結構忘れやすいとおもいます。問を解いて着実にマスターしていきましょう！
- 問１．次の括弧の（ア）～（コ）に入る言葉や数字を書き入れなさい。
文書は、タイトルや段落、見だし、箇条書きといった、様々な（ア）から構成されている。これら（ア）のうち、タイトル意外の物を（イ）という。文書中のどの部分がどの（ア）であるかをパソコンに示す為に（ウ）を用いる。
見出し（ア）には（エ）から（オ）までの（カ）種類あって、その文書中で最も重要な見出しが（エ）、最も小さな見出しが（オ）である。
また、段落要素はアルファベット（キ）を（ウ）の中に書き示し、同様にリストは（ク）と書き示す。そして、順序のある箇条書きはリスト全体を（ケ）要素のタグで、順序の無い箇条書きなリスト全体を（コ）要素のタグでくくる。
- 問２．タケピーさんのブログの2008年9月19日のレシピをマークアップしてみよう。できたら、「ウェブサイト作成講座」フォルダに「recipe2.html」という名前で保存しておこう。（解答未制作）
- 問３．前回の講座であなたが作ったレシピをマークアップしてみよう！できたら、「ウェブサイト作成講座」フォルダに「recipe3.html」という名前で保存しておこう。
何か自分の書いた記事が引用されてると嬉し恥ずかしだねw
ってか、すごいことやってるな。詳しくは読んでないけど、パッと見でもよくわかりますよ。PC初心者ってわけでもないけどhtml初心者なので、よく読んで勉強させていただきたいと思います。続きも楽しみにしています
ありがとう！ タケピーさんみたいな初心者読者を捜していたのです。
分かりにくいところの文句メールでもフォーラムでもがんがん質問＆苦情お願いします！