From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../building_blocks/a_cool_looking_box/index.html | 100 ++++++++++++++++ .../creating_fancy_letterheaded_paper/index.html | 108 +++++++++++++++++ .../fundamental_css_comprehension/index.html | 133 +++++++++++++++++++++ 3 files changed, 341 insertions(+) create mode 100644 files/ja/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html (limited to 'files/ja/learn/css/building_blocks') diff --git a/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..32aa19ca2e --- /dev/null +++ b/files/ja/learn/css/building_blocks/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。
+ +

出発点

+ +

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

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

+ +

一般的なタスク

+ + + +

ボックスの装飾

+ +

提供された {{htmlelement("p")}} に次のように装飾を設定してください。

+ + + +

例

+ +

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

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

このモジュール内の文書

+ + + +

 

diff --git a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..6d793d69ff --- /dev/null +++ b/files/ja/learn/css/building_blocks/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

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

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。
+ +

出発点

+ +

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

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

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

+ +

メインの手紙

+ + + + + + + +

ヒントとコツ

+ + + +

例

+ +

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

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

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

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..c8012c9a8a --- /dev/null +++ b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,133 @@ +--- +title: 基本的な CSS の理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Syntax + - コメント + - スタイル + - セレクタ + - ボックスモデル + - ルール +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

+ + + + + + + + + + + + +
前提条件:この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。
目的:基本的な CSS 理論、構文、およびメカニズムの理解をテストする。
+ +

出発点

+ +

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

+ + + +
+

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <img> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style> 要素に自由に配置してください。

+
+ +

プロジェクト概要

+ +

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

+ +

基本設定:

+ + + +

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

+ + + +

書く必要がある新しいルールセット：

+ + + +
+

メモ: 2番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

+
+ +

その他の考慮事項

+ + + +

ヒントとコツ

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインの外観の例を示しています。

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

評価

+ +

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

このモジュール

+ + -- cgit v1.2.3-54-g00ecf