読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

文書構造をマークアップする

実習 - 文書構造をマークアップ

  • テキストP.020〜035
基本構造
  • DTDHTML5
  • lang属性
  • meta要素で文字コード設定
  • keywords属性、description属性はアップロード後に必要になる情報のため、ローカル上での練習では記述しません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>うちのにゃんこ</title>
</head>
<body>
</body>
</html>

文書構造に必要な要素

  1. タイトル
  2. 見出しと本文
  3. 箇条書き(番号つき、番号なし)
  4. 補足説明の画像
見出し <h1> <h2> <h3>
  • ページ内容を表す1行
  • 情報価値の優先順位のレベルでマークアップする
  • 見出しの拾い読みでも、ページのツリー講座がわかるように
<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>


見出しは、段落(本文)と組み合わせて記述します。

段落 <p>
  • 基本的には、2行以上の文章に指定する(1行でも可)
  • 迷ったら、「p要素」にする
  • 段落ブロックの下は、必ず1行分の空きができる
箇条書き <ul> <ol> <dl>
  • 必然性のある箇条書きを利用する


ul(unordered list)
順序が置き換わっても意味が伝わる並列な内容に使う。

  • 行頭マークは「黒丸」
<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>


ol(ordered list)
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

  • 行頭は数字
<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>


dl(definition list)
「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。

  • リスト全体に対する dl要素:definition list
  • 名称(用語)に対する dt要素:definition term
  • 説明文(定義)に対する dd要素:definition description
<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>


以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。

<dl>
<dt>12月17日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
<dt>12月19日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>12月20日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>

《課題》
次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん