diff options
Diffstat (limited to 'files/ja/learn/css/styling_boxes')
| -rw-r--r-- | files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html | 100 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html | 108 |
2 files changed, 208 insertions, 0 deletions
diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html new file mode 100644 index 0000000000..32aa19ca2e --- /dev/null +++ b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html @@ -0,0 +1,100 @@ +--- +title: かっこいいボックス +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "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/cool-information-box-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</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><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。</p> + +<h3 id="General_tasks" name="General_tasks">一般的なタスク</h3> + +<ul> + <li>CSS を HTML に適用します。</li> +</ul> + +<h3 id="Styling_the_box" name="Styling_the_box">ボックスの装飾</h3> + +<p>提供された {{htmlelement("p")}} に次のように装飾を設定してください。</p> + +<ul> + <li>およそ 200 ピクセルくらいの、大きなボタンに適した幅。</li> + <li>過程でテキストを垂直方向に中央揃えする、大きなボタンに適した高さ。</li> + <li>中央揃えのテキスト。</li> + <li>フォントサイズがわずかに増加し、計算したスタイルはおおよそ 17 から 18 ピクセルになりました。 rem を使用してください。 どのように値を導いたかについてのコメントを書いてください。</li> + <li>デザインの基本色。 この色を背景色としてボックスに付けます。</li> + <li>テキストの色は同じで、黒いテキストの影を使って読みやすくします。</li> + <li>かなり微妙な境界線の半径。</li> + <li>基本色に似た色で、やや暗い色合いの1ピクセルの実線の境界線。</li> + <li>右下隅に向かう半透明の黒の線形グラデーション。 最初は完全に透明にし、それに沿って 30% ずつ不透明度を約 0.2 に段階的に調整し、最後まで同じ色のままにします。</li> + <li>複数のボックスの影。 ボックスがページから少し浮き上がって見えるようにするには、標準のボックスの影を1つ指定します。 他の2つは、ボックスの内側の影であるべきです — 左上近くの半透明の白い影と右下近くの半透明の黒い影 — ボックスの素敵な浮いた3Dの外観に追加する。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/a-cool-looking-box-assessment/24685">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> + +<p> </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> + +<p> </p> diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..6d793d69ff --- /dev/null +++ b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,108 @@ +--- +title: 装飾的なレターヘッド付きの便箋の作成 +slug: Learn/CSS/Styling_boxes/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 +--- +<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><style></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> |