経歴ページのスタイル設定
ここ数回のレッスンで学んだことで、 CSS を使用して単純なテキスト文書を整形し、自分自身でスタイルを追加することができます。この評価試験では、その方法を学びます。
| 前提条件: | この評価試験に挑戦する前に、すでにこのモジュールの記事をすべて読み終えていて、HTML の基本を理解している必要があります（HTML の入門で学ぶこと）。 |
|---|---|
| 目的: | いくつかの CSS を試し、知識レベルを確認します。 |
開始点
下のライブエディターで試すこともできますし、開始点ファイルをダウンロードして自分のエディターで作業することもできます。これは、 HTML と開始点の CSS （文書内の見出し）の両方を含む単一のページです。できれば、この CSS を別のファイルに移し、ローカルコンピューターで例を作成するときにリンクしてください。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitch などのオンラインエディターで解決策を試すことができます。
もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
プロジェクト概要
下のサンプルは、 CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。
下のプロフィールページでは、いろんなセレクターを使ったり、h1 要素や h2 要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。
- 見出しの文字色をピンクに変えてみましょう。色の指定には
hotpinkを使うとよいでしょう。 - 見出しに太さ 10px の
border-bottomをつけてみましょう。そしてその色をpurpleにしてみましょう。 - 見出し 2 の書体をイタリックに変えてみましょう。
- 連絡先情報の部分で使われている
ul要素のbackground-colorを#eeeeeeにして、borderを太さ 5px の紫の実践に変えてみましょう。paddingを指定してコンテンツと連絡先情報の部分を離しましょう。 - リンクの部分にマウスを当てたとき、リンクが
greenに変わるように設定しましょう。
ヒントとコツ
- W3C CSS Validator を使用することで、 CSS の意図しない間違い（他の方法では見逃してしまうかもしれない間違い）を発見し、修正することができます。
- その後、MDN CSS リファレンスでこのページで紹介されていないプロパティを見て冒険してみてください。
- ここに間違った答えはないことを忘れないでください。この段階では、少し楽しむ余裕があるのです。
