body要素内をマークアップする流れ

基本的な文章のマークアップ

body要素はウェブページに表示する内容を記述する場所であり、最も重要な箇所といえます。 実際に文章をマークアップしながら、body要素内の基本的なマークアップを学びましょう。

今日の晩御飯という題目の以下の文章をマークアップして記述したいと思います。

��今日の晩御飯
・お品書き
　[画像]
　さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ
・食べた感想
　今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。
　これからの季節は魚の脂ものってお勧めです。
　最近は体がだるかったのですが、これを食べたら元気になった気がします。
　レシピはこちら！→レシピサイトへ

セクショニングを行う

今回はマークアップが主題なので、単純にbody要素内を全て記事のセクションとします。 記事部はarticle要素で示します。まずはbody要素内にarticle要素を記入し、この中にテキストを記入します。

lt;article>
  ■今日の晩御飯
  ・お品書き
　[画像]
　さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ
  ・食べた感想
　今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。
　これからの季節は魚の脂ものってお勧めです。
　最近は体がだるかったのですが、これを食べたら元気になった気がします。
　レシピはこちら！→レシピサイトへ
</article>

見出し要素をマークアップする

見出しはh1～h6要素を使います。 数字が若い方が大見出し、数字が上がるごとに小見出しになっていきます。 見出しはセクションごとにh1要素から順に必要なだけ振ります。

lt;article>
  <h1>今日の晩御飯</h1>
  <h2 id="chapter-4">お品書き</h2>
　[画像]
　さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ
  <h2 id="chapter-5">食べた感想</h2>
　今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。
　これからの季節は魚の脂ものってお勧めです。
　最近は体がだるかったのですが、これを食べたら元気になった気がします。
　レシピはこちら！→レシピサイトへ
</article>

段落をマークアップする

段落をp要素で囲いましょう。 p要素は一つの段落を示す要素で、段落が変わる場合は新たなp要素を使います。 p要素内で改行する場合は改行位置にbr要素を記述します。

lt;article>
  <h1>今日の晩御飯</h1>
  <h2 id="chapter-4">お品書き</h2>
　[画像]
  <p>さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ</p>
  <h2 id="chapter-5">食べた感想</h2>
  <p>今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。<br>
  これからの季節は魚の脂ものってお勧めです。</p>
  <p>最近は体がだるかったのですが、これを食べたら元気になった気がします。</p>
  <p>レシピはこちら！→レシピサイトへ</p>
</article>

画像をマークアップする

画像要素をマークアップして画像を表示させましょう。画像の基本的な書式は以下の通りです。 画像タイトルは必須ではありませんが入力が推奨されています。

他にも幅や高さはあらかじめ指定しておいた方が親切です。幅はwidth、高さはheightで指定します。

eyecatch "画像ファイルのパス" "画像タイトル"]

lt;article>
  <h1>今日の晩御飯</h1>
  <h2 id="chapter-4">お品書き</h2>
  [eyecatch "hogehoge" "今日の晩御飯" width="100px" height="100px"]
  <p>さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ</p>
  <h2 id="chapter-5">食べた感想</h2>
  <p>今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。<br>
  これからの季節は魚の脂ものってお勧めです。</p>
  <p>最近は体がだるかったのですが、これを食べたら元気になった気がします。</p>
　レシピはこちら！→レシピサイトへ
</article>

※ファイルパスは適当です。

リンク要素のマークアップ

リンクの基本的な書式は以下の通りです。 リンク文章をクリックすると、リンク先アドレスのページへジャンプします。

lt;a href="リンク先アドレス">リンク文章</a>

lt;article>
  <h1>今日の晩御飯</h1>
  <h2 id="chapter-4">お品書き</h2>
  [eyecatch "hogehoge" "今日の晩御飯" width="100px" height="100px"]
  <p>さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ</p>
  <h2 id="chapter-5">食べた感想</h2>
  <p>今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。<br>
  これからの季節は魚の脂ものってお勧めです。</p>
  <p>最近は体がだるかったのですが、これを食べたら元気になった気がします。</p>
  <p>レシピはこちら！<a href="hogehoge.HTML">→レシピサイトへ</a></p>
</article>

プレビュー

一応これで完成です。こんな感じでテキストをマークアップしていきます。 もちろん他にも色々な要素があるので、必要に応じて要素を使い分けましょう。