---
title: 手紙をマークアップする
slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
tags:
  - Beginner
  - CodingScripting
  - HTML
  - head
  - テキスト
  - リンク
  - 評価
translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
---
<div>
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
私たちはみんな遅かれ早かれ手紙を書くことを学びます。

<p class="summary">テキストの書式設定のスキルを試すのも便利な例です。この課題では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <code>&lt;head&gt;</code> コンテンツに対するあなたの慣れをテストします。</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>このアセスメントを試みる前に、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">head には何が入る? HTML のメタデータ</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」、および「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高度なテキスト処理</a>」をすでに読んでおく必要があります。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML &lt;head&gt; の内容に関する知識をテストします。</td>
  </tr>
 </tbody>
</table>

<h2 id="スタートポイント">スタートポイント</h2>

<p>この課題を開始するには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">マークアップする必要がある生のテキスト</a>と、HTML に<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">含める必要がある CSS</a> を入手します。テキストエディタを使用して新しい <code>.html</code> ファイルを作成し、作業を行います (または、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使用して課題を行います)。</p>

<h2 id="簡単なプロジェクト">簡単なプロジェクト</h2>

<p>このプロジェクトの場合、あなたの仕事は大学のイントラネットでホストされる必要がある手紙をマークアップすることです。手紙は、大学で働くことへの申し込みに関する研究フェローから博士課程の学生への返事です。</p>

<p>ブロック/構造セマンティクス</p>

<ul>
 <li>ドキュメント全体を doctype、{{htmlelement("html")}}、{{htmlelement("head")}}、{{htmlelement("body")}} 要素を含む適切な構造で構成する必要があります。</li>
 <li>一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップされるべきです。トップレベルの見出し ("Re:" 行) が1つと、セカンドレベルの見出しが3つあります。</li>
 <li>学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップされるべきです。</li>
 <li>2つのアドレスは段落の中に入れることができます。{{htmlelement("address")}} 要素はそれらには適していません — その理由を考えてください。さらに、アドレスの各行は新しい行の上に配置する必要がありますが、新しい段落には配置しないでください。</li>
</ul>

<p>インラインセマンティクス:</p>

<ul>
 <li>送信者と受信者の名前 (および "Tel" と "Email") は、非常に重要なものとしてマークアップする必要があります。</li>
 <li>文書内の4つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。</li>
 <li>手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。</li>
 <li>文字の本文中の5つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。</li>
 <li>6つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。</li>
 <li>テキストの中で少なくとも2つの適切な単語に強い重要性と強調を設定するようにしてください。</li>
 <li>ハイパーリンクを追加する場所は2か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には http://example.com を使用してください。</li>
 <li>大学のモットーのクォートと引用は適切な要素でマークアップされるべきです。</li>
</ul>

<p>ドキュメントの head:</p>

<ul>
 <li>適切なメタタグを使用して、ドキュメントの文字コードを utf-8 として指定する必要があります。</li>
 <li>手紙の作者は適切なメタタグで指定されるべきです。</li>
 <li>提供された CSS は適切なタグの中に含まれるべきです。</li>
</ul>

<h2 id="ヒントとコツ">ヒントとコツ</h2>

<ul>
 <li>HTML を検証するために <a href="https://validator.w3.org/">W3C HTML validator</a> を使用してください。検証すればボーナスポイントを得られるでしょう。</li>
 <li>この課題をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。</li>
</ul>

<h2 id="例">例</h2>

<p>次のスクリーンショットは、マークアップ後の文字の表示例を示しています。</p>

<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>

<h2 id="評価">評価</h2>

<p>組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください - 不正をすることによって得られるものは何もありません！</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="このモジュール">このモジュール</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>