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

html

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

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

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

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

セクショニングを行う

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

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

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

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

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

段落をマークアップする

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

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

画像をマークアップする

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

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

<img src="画像ファイルのパス" alt="画像タイトル">
<article>
  <h1>今日の晩御飯</h1>
  <h2>お品書き</h2>
  <img src="hogehoge.jpg" alt="今日の晩御飯" width="100px" height="100px">
  <p>さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ</p>
  <h2>食べた感想</h2>
  <p>今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。<br>
  これからの季節は魚の脂ものってお勧めです。</p>
  <p>最近は体がだるかったのですが、これを食べたら元気になった気がします。</p>
 レシピはこちら!→レシピサイトへ
</article>

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

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

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

<a href="リンク先アドレス">リンク文章</a>
<article>
  <h1>今日の晩御飯</h1>
  <h2>お品書き</h2>
  <img src="hogehoge.jpg" alt="今日の晩御飯" width="100px" height="100px">
  <p>さけいくらご飯、味噌汁、さんまの塩焼き、野菜サラダ</p>
  <h2>食べた感想</h2>
  <p>今日のは健康に気を使って、魚と野菜をたっぷり使った和食のご飯を作りました。<br>
  これからの季節は魚の脂ものってお勧めです。</p>
  <p>最近は体がだるかったのですが、これを食べたら元気になった気がします。</p>
  <p>レシピはこちら!<a href="hogehoge.html">→レシピサイトへ</a></p>
</article>
siteimg

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

アマルウェブ HOME