課題: 経歴ページのスタイル設定
この課題では、シンプルな経歴ページをスタイル設定します。ここ数回のレッスンで学んだスキル、具体的にはセレクターの記述、背景色の設定、テキストのスタイル設定などを試す内容です。また、まだ扱っていない基本的な CSS 機能について調べることも求められます。これは調査スキルを試すためです。
出発点
始めるには、以下のコードパネルのいずれかにある Play ボタンをクリックし、MDN Playground で指定されたサンプルを開きます。その後、後続の節の手順に従ってページを適切にスタイル設定すること。
html
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it with the
necessary regelialia. It is a paradisematic country, in which roasted parts of
sentences fly into your mouth.
</p>
<h2>Contact information</h2>
<ul>
<li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
<li>Web: <a href="http://example.com">http://example.com</a></li>
<li>Tel: <a href="tel:12345678">123 45678</a></li>
</ul>
css
html {
background-color: white;
}
body {
font: 1.2em / 1.5 system-ui;
}
プロジェクト概要
下記の手順に従って経歴をスタイル設定すること。必要な CSS 機能については MDN CSS リファレンスを参照すること。
ボックスのスタイル
<body>要素に、全ての辺に20pxのパディングと500pxの幅を設定すること。<body>要素の背景色を#efefef（薄いグレーの<hex-color>値）に設定すること。<body>要素をビューポート内に中央配置するため、上マージンと下マージンを0に設定し、左マージンと右マージンをautoに設定すること。- 連絡先情報に使用されている
<ul>要素に背景色whiteを適用し、全辺に 5px の紫色で実線の境界線を設定します。コンテンツを境界線から離すため、<ul>要素に全辺30pxのパディングを設定すること。 <ul>の境界の角の半径を20pxとすること。
テキストスタイル
- レベル 1 の見出しをダークグレー（CSS キーワード
darkslategray）にし、その見出しの下部に10pxの点線の境界線を、CSS 色キーワードpurpleを使用して付与すること。 - レベル 2 の見出しをイタリック体にすること。
- レベル 1 の見出しのフォントサイズを
2rem、レベル 2 の見出しのフォントサイズを1.5remとすること。 - クラスセレクターで
<div>要素を選択し、色をdarkslategray、フォントの太さを太字（bold）にすること。 - リンクの色を
greenにすること。 - マウスポインターで当てたときまたはキーボードでフォーカスされたリンクを
darkgreenにすること（この作業には擬似クラスをいくつか使用する必要がある）。 - ポインターをかざしたときまたはフォーカス中にリンクの下線を消すこと。
ヒントとコツ
- W3C CSS Validator を使用することで、 CSS の意図しない間違い（他の方法では見逃してしまうかもしれない間違い）を発見し、修正することができます。
- その後、MDN CSS リファレンスでこのページで紹介されていないプロパティを見て冒険してみてください。
- ここに間違った答えはないことを忘れないでください。この段階では、少し楽しむ余裕があるのです。
例
この画像のように仕上がるはずです。
ここをクリックすると、模範解答を表示します。
完了したライブサンプルに適用されている CSS は以下のようになっています。
css
html {
background-color: white;
}
body {
font: 1.2em / 1.5 system-ui;
padding: 20px;
width: 500px;
background-color: #efefef;
margin: 0 auto;
}
h1 {
color: darkslategray;
border-bottom: 10px dotted purple;
font-size: 2rem;
}
h2 {
font-style: italic;
font-size: 1.5rem;
}
.job-title {
color: darkslategray;
font-weight: bold;
}
ul {
background-color: white;
border: 5px solid purple;
padding: 30px;
border-radius: 20px;
}
a {
color: green;
}
a:hover,
a:focus {
color: darkgreen;
text-decoration: none;
}
この課題解決に使用した CSS プロパティは以下の通りです。それぞれのプロパティは MDN のプロパティページにリンクしており、使用例をさらに確認できます。
background-colorborderまたは関連する個別指定プロパティcolorfont-sizefont-stylefont-weightmarginまたは関連する個別指定プロパティpaddingまたは関連する個別指定プロパティtext-decorationwidth