From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fundamental_css_comprehension/index.html | 133 +++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html (limited to 'files/ja/learn/css/introduction_to_css') diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..c8012c9a8a --- /dev/null +++ b/files/ja/learn/css/introduction_to_css/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