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

---
title: 基本的な CSS の理解
slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
tags:
  - Assessment
  - Beginner
  - CSS
  - CodingScripting
  - Syntax
  - コメント
  - スタイル
  - セレクタ
  - ボックスモデル
  - ルール
translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension
---
<div>{{LearnSidebar}}</div>

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

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

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

<ul>
 <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">練習用の HTML ファイル</a>とそれに<a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">関連付けられた画像ファイル</a>を探して、ローカルコンピュータの新しいディレクトリに保存します。自身の画像ファイルを使い、自身の名前を記入したいのなら、それも大歓迎です — ちょうど画像が正方形であることを確認してください。</li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS リソースのテキストファイル</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 をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <code>&lt;img&gt;</code> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code> 要素に自由に配置してください。</p>
</div>

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

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

<p>基本設定:</p>

<ul>
 <li>まず最初に、HTML と画像ファイルと同じディレクトリに新しいファイルを作成してください。それを <code>style.css</code> のような本当に想像力豊かなものと呼びます。</li>
 <li><code>&lt;link&gt;</code> 要素を介して CSS を HTML ファイルにリンクします。</li>
 <li>CSS リソースファイルの最初の2つのルールセットは無料です。幸運を祈って楽しんだら、コピーして新しい CSS ファイルの先頭に貼り付けます。これらをテストとして使用して、CSS が HTML に正しく適用されていることを確認してください。</li>
 <li>2つの規則の上に、CSSコメントをその中にテキストを追加して、これがページ全体の一般的なスタイルのセットであることを示します。「一般的なページスタイル」でも構いません。また、CSS ファイルの下部にさらに3つのコメントを追加して、カードコンテナの設定に固有のスタイル、ヘッダーとフッターに固有のスタイル、およびメインの名刺の内容に固有のスタイルを示します。 今後、スタイルシートに追加された後続のスタイルは適切な場所に編成される必要があります。</li>
</ul>

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

<ul>
 <li>次に、4つのセレクタを見て、それぞれの詳細度を計算してください。CSS の上部にあるコメントなど、後で見つけられる場所にこれらを書き留めてください。</li>
 <li>では、正しいセレクタを正しいルールセットに配置しましょう。CSS リソースには、4組のセレクタとルールセットがあります。今すぐこれを行い、それらを CSS ファイルに追加してください。必要があるのは：
  <ul>
   <li>メインカードコンテナの幅と高さ、背景色、ボーダー、ボーダー半径 (角丸) などを固定します。</li>
   <li>ヘッダーに、濃い色から明るい色への背景グラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li>
   <li>フッターには、明るいものから暗いものまでの背景のグラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li>
   <li>画像をメインの名刺の内容の右側に貼り付け、最大の高さを100％にします (どの高さになるかにかかわらず、親コンテナと同じ高さを維持するために拡大/縮小することを保証する巧妙なトリック) 。</li>
  </ul>
 </li>
 <li>注意してください。提供されているルールセットには2つのエラーがあります。知っている任意のテクニックを使用して、これらを見つけ出して進む前に修正してください。</li>
</ul>

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

<ul>
 <li>カードヘッダーとカードフッターの両方を対象としたルールセットを作成し、計算された合計の高さは50ピクセル (コンテンツの高さ30ピクセル、パディングは全側面で10ピクセル) を両方に指定します。</li>
 <li>ブラウザが <code>&lt;h2&gt;</code> 要素と <code>&lt;p&gt;</code> 要素に適用するデフォルトのマージンは、私たちのデザインを妨げるので、これらすべての要素をターゲットにしてそれらのマージンを 0 に設定するルールを書きましょう。</li>
 <li>画像がメインの名刺の内容 (<code>&lt;article&gt;</code> 要素) からはみ出ないようにするには、特定の高さを指定する必要があります。<code>&lt;article&gt;</code> の高さを 120 px に設定します。ただし、<code>em</code>s で表します。また、背景色を半透明の黒にすると、やや濃い色になり、背景の赤い色も少し明るくなります。</li>
 <li><code>&lt;h2&gt;</code> に 20 px の有効フォントサイズ (ただし <code>em</code>s で表示) とそれをヘッダーのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li>
 <li>フッターの内側の <code>&lt;p&gt;</code> を 15 px の有効フォントサイズ (ただし <code>em</code>s で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li>
 <li>最後のちょっとしたタッチとして、<code>&lt;article&gt;</code> の内側の段落に適切なパディング値を指定して、その左端が <code>&lt;h2&gt;</code> とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。</li>
</ul>

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

<p>その他の考慮事項</p>

<ul>
 <li>読みやすくするために CSS を作成すると、各行に個別の宣言を使用してボーナスマークが付けられます。</li>
 <li>他のコンテンツを大量に含む名刺をページに配置する場合にこれらのルールが他の要素のスタイル設定を妨げないように、すべてのルールのセレクタチェーンの先頭に <code>.card</code> を含める必要があります。</li>
</ul>

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

<ul>
 <li>CSS を HTML に適用する以外は、HTML を編集する必要はありません。</li>
 <li>特定のピクセル長を表現するために必要な <code>em</code> 値を計算する際には、ルート (<code>&lt;html&gt;</code>) 要素の基本フォントサイズと、必要な値を得るために乗算する必要があるサイズについて考えてください。少なくともこのような単純なケースでは、em の価値があるでしょう。</li>
</ul>

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

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

<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>

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

<p>組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">この練習問題についてのディスカッションスレッド</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/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>

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

<ul>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS の仕組み</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS の構文</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">単純セレクタ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">コンビネーターとセレクタリスト</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">CSS のデバッグ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></li>
</ul>