基本的な CSS の理解
このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。
| 前提条件: | この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。 |
|---|---|
| 目的: | 基本的な CSS 理論、構文、およびメカニズムの理解をテストする。 |
出発点
この評価を開始するには、次のことが必要です。
- 練習用の HTML ファイルとそれに関連付けられた画像ファイルを探して、ローカルコンピューターの新しいディレクトリーに保存します。自身の画像ファイルを使い、自身の名前を記入したいのなら、それも大歓迎です — ちょうど画像が正方形であることを確認してください。
- CSS リソースのテキストファイルを入手してください。これには、評価の一部に答えるために検討して組み合わせる必要がある一連の未加工のセレクターとルールセットが含まれています。
また、CodePen、JSFiddle、Glitch などのオンラインエディターを使用することもできます。
これらのオンラインエディターのいずれかに HTML を貼り付けて CSS を入力し、この URL を使用して <img> 要素を画像ファイルに指定することができます。
メモ: もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
プロジェクト概要
生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。
基本設定:
- まず最初に、HTML と画像ファイルと同じディレクトリーに新しいファイルを作成してください。それを
style.cssのような本当に想像力豊かなものと呼びます。 <link>要素を介して CSS を HTML ファイルにリンクします。- CSS リソースファイルの最初の 2 つのルールセットは無料です。幸運を祈って楽しんだら、コピーして新しい CSS ファイルの先頭に貼り付けます。これらをテストとして使用して、CSS が HTML に正しく適用されていることを確認してください。
- 2 つの規則の上に、CSS コメントをその中にテキストを追加して、これがページ全体の一般的なスタイルのセットであることを示します。「一般的なページスタイル」でも構いません。また、CSS ファイルの下部にさらに 3 つのコメントを追加して、カードコンテナーの設定に固有のスタイル、ヘッダーとフッターに固有のスタイル、およびメインの名刺の内容に固有のスタイルを示します。 今後、スタイルシートに追加された後続のスタイルは適切な場所に編成される必要があります。
CSS リソースファイルで提供されているセレクターとルールセットに注意してください。
-
次に、4 つのセレクターを見て、それぞれの詳細度を計算してください。CSS の上部にあるコメントなど、後で見つけられる場所にこれらを書き留めてください。
-
では、正しいセレクターを正しいルールセットに配置しましょう。CSS リソースには、4 組のセレクターとルールセットがあります。今すぐこれを行い、それらを CSS ファイルに追加してください。必要があるのは：
- メインカードコンテナーの幅と高さ、背景色、ボーダー、ボーダー半径 (角丸) などを固定します。
- ヘッダーに、濃い色から明るい色への背景グラデーションと、メインカードコンテナーに設定された丸みのある角に合う丸みのある角を付けます。
- フッターには、明るいものから暗いものまでの背景のグラデーションと、メインカードコンテナーに設定された丸みのある角に合う丸みのある角を付けます。
- 画像をメインの名刺の内容の右側にぴったりくっつくように浮動させ、最大の高さを 100％にします (どの高さになるかにかかわらず、親コンテナーと同じ高さを維持するために拡大/縮小することを保証する巧妙なトリック) 。
-
注意してください。提供されているルールセットには 2 つのエラーがあります。知っている任意のテクニックを使用して、これらを見つけ出して進む前に修正してください。
書く必要がある新しいルールセット：
- カードヘッダーとカードフッターの両方を対象としたルールセットを作成し、計算された合計の高さは 50 ピクセル (コンテンツの高さ 30 ピクセル、パディングは全側面で 10 ピクセル) を両方に指定します。
- ブラウザーが
<h2>要素と<p>要素に適用するデフォルトのマージンは、私たちのデザインを妨げるので、これらすべての要素をターゲットにしてそれらのマージンを 0 に設定するルールを書きましょう。 - 画像がメインの名刺の内容 (
<article>要素) からはみ出ないようにするには、特定の高さを指定する必要があります。<article>の高さを 120 px に設定します。ただし、ems で表します。また、背景色を半透明の黒にすると、やや濃い色になり、背景の赤い色も少し明るくなります。 <h2>に 20 px の有効フォントサイズ (ただしems で表示) とそれをヘッダーのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。- フッターの内側の
<p>を 15 px の有効フォントサイズ (ただしems で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。 - 最後のちょっとしたタッチとして、
<article>の内側の段落に適切なパディング値を指定して、その左端が<h2>とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。
メモ:
2 番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの 16 px ではなく 10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。
その他の考慮事項
- 読みやすくするために CSS を作成すると、各行に個別の宣言を使用してボーナスマークが付けられます。
- 他のコンテンツを大量に含む名刺をページに配置する場合にこれらのルールが他の要素のスタイル設定を妨げないように、すべてのルールのセレクターチェーンの先頭に
.cardを含める必要があります。
ヒントとコツ
- CSS を HTML に適用する以外は、HTML を編集する必要はありません。
- 特定のピクセル長を表現するために必要な
em値を計算する際には、ルート (<html>) 要素の基本フォントサイズと、必要な値を得るために乗算する必要があるサイズについて考えてください。少なくともこのような単純なケースでは、em の価値があるでしょう。
