CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3JXaoYVcLv0lUGYpCL4LT26Ml_ttV5GbN777tnTwbTOnGwoxfEhy9jtwiDRykR0hijW
cache-control: public, max-age=3600
expires: Thu, 09 Oct 2025 22:36:11 GMT
last-modified: Thu, 09 Oct 2025 01:11:49 GMT
etag: W/"b82fe773e53355e28d176012d04a2892"
x-goog-generation: 1759972309230801
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 191254
x-goog-meta-goog-reserved-file-mtime: 1759970492
x-goog-hash: crc32c=n5yR9g==, md5=uC/nc+UzVeKNF2AS0Eookg==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 532723ab0cdc192cbcc176a00c520b63
date: Thu, 09 Oct 2025 21:36:12 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
課題: 経歴ページのスタイル設定 - ウェブ開発の学習 | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
課題: 経歴ページのスタイル設定
この課題では、単純な経歴ページのスタイル設定を行い、セレクターの書き方やテキストのスタイル設定など、これまでの数回のレッスンで学んだスキルのいくつかを試験します。
メモ: 以下のライブサンプルの "Play" をクリックすると、コードを MDN Playground で開くことができますし、自分の IDE や、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 リファレンスでこのページで紹介されていないプロパティを見て冒険してみてください。
- ここに間違った答えはないことを忘れないでください。この段階では、少し楽しむ余裕があるのです。
例
この画像のように仕上がるはずです。
以下は、HTML と CSS のコードブロックと、それらを組み合わせた結果です。
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="https://example.com">https://example.com</a></li>
<li>Tel: 123 45678</li>
</ul>
css
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #375e97;
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px solid #375e97;
}
h2 {
font-size: 1.5em;
}
.job-title {
color: #999999;
font-weight: bold;
}
a:link,
a:visited {
color: #fb6542;
}
a:hover {
text-decoration: none;
}