path: root/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html

---
title: 装飾的なレターヘッド付きの便箋の作成
slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
tags:
  - Assessment
  - Background
  - Beginner
  - Boxes
  - CSS
  - CodingScripting
  - border
  - box
  - letter
  - letterhead
  - letterheaded
  - paper
translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
original_slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>

<p class="summary"><span class="seoSummary">好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提知識:</th>
   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
  </tr>
  <tr>
   <th scope="row">学習目標:</th>
   <td>CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。</td>
  </tr>
 </tbody>
</table>

<h2 id="Starting_point" name="Starting_point">出発点</h2>

<p>この評価を開始するには、次のことが必要です。</p>

<ul>
 <li><a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</li>
 <li>上部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>）、下部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a>）、ロゴ（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a>）の画像のローカルコピーを、コードファイルと同じディレクトリに保存します。</li>
</ul>

<div class="note">
<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code>  要素に自由に配置してください。</p>
</div>

<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>

<p>レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。</p>

<h3 id="The_main_letter" name="The_main_letter">メインの手紙</h3>

<ul>
 <li>CSS を HTML に適用します。</li>
 <li><code>background</code> 宣言を手紙に追加します。
  <ul>
   <li>上部の画像を手紙の上部に固定します。</li>
   <li>下部の画像を手紙の下部に固定します。</li>
   <li>前記の両方の背景の上に半透明のグラデーションを追加して、手紙に少し質感を与えます。 上部と下部のすぐ近くで少し暗くしますが、中央の大部分は完全に透明にします。</li>
  </ul>
 </li>
 <li>前記の宣言をサポートしていないブラウザーのための代替として、単に top の画像を手紙の上部に追加する別の <code>background</code> 宣言を追加します。</li>
 <li>手紙に白い背景色を追加します。</li>
 <li>配色の他の部分と調和している色で、手紙に 1mm の上下の実線の境界線を追加します。</li>
</ul>

<h3 id="The_logo" name="The_logo">ロゴ</h3>

<ul>
 <li>{{htmlelement("h1")}} にロゴを背景画像として追加します。</li>
 <li>ロゴにフィルタを追加して、微妙なドロップシャドウを付けます。</li>
 <li>今度はフィルタをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。</li>
</ul>

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

<ul>
 <li>代替バージョンの宣言を最初に配置し、その後に新しいブラウザーでのみ機能するバージョンを配置することによって、古いブラウザーのための代替を作成できることを忘れないでください。 古いブラウザーは最初の宣言を適用して2番目の宣言を無視しますが、新しいブラウザーは最初の宣言を適用してから2番目の宣言で上書きします。</li>
 <li>ご希望の場合は、評価用に独自のグラフィックを自由に作成してください。</li>
</ul>

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

<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

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

<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">この演習についてのディスカッションスレッド</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/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>

<ul>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li>
 <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li>
</ul>