blob: b03174d271ffe77e300a5a01ec1bf129662fde09 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: 新しい知識を使う
slug: Learn/CSS/First_steps/Styling_a_biography_page
tags:
- Beginner
- CSS
- Learn
- Playground
translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
original_slug: Learn/CSS/First_steps/Using_your_new_knowledge
---
<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<p class="summary">先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>基礎コンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>いくつかの CSS を試し、知識レベルを確認します</td>
</tr>
</tbody>
</table>
<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">さあ始めよう</h2>
<p>下の Live エディタで試すこともできますし、<a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">我々の Github リポジトリ</a>からサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、<a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch </a>といったオンラインエディタを使うこともできます。</p>
<div class="blockIndicator note">
<p>注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。</p>
</div>
<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">CSS を少し試してみよう</h2>
<p>下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。</p>
<ul>
<li>{{cssxref("font-family")}}</li>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("border-bottom")}}</li>
<li>{{cssxref("font-weight")}}</li>
<li>{{cssxref("font-size")}}</li>
<li>{{cssxref("text-decoration")}}</li>
</ul>
<p>下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。</p>
<p>プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。</p>
<ol>
<li>見出し 1 の文字色をピンクに変えてみましょう。色の指定には <code>hotpink</code> を使うとよいでしょう。</li>
<li>見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を <code>purple</code> にしてみましょう。</li>
<li>見出し 2 の書体をイタリックに変えてみましょう。</li>
<li>連絡先情報の部分で使われている <code>ul</code> 要素の {{cssxref("background-color")}} を <code>#eeeeee</code> にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。</li>
<li>リンクの部分にマウスが乗ったとき、リンクが <code>green</code> に変わるように設定しましょう。</li>
</ol>
<p>完成したら次の画像のようになるはずです。</p>
<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/12/31/17035/da8ff2a04da214e57e18a6ea3ac6832e/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
<p>それから、このページに書かれていない属性をみてみましょう。<a href="/ja/docs/Web/CSS/Reference">MDN の CSS リファレンス</a> には冒険が待っています!</p>
<p>ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
<h2 id="Whats_next" name="What's_next">アセスメントとさらなるヘルプ</h2>
<p>作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：</p>
<ol>
<li>あなたが作ったものを <a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch</a> などのコード共有サービスに公開してください。</li>
<li>添削の依頼あるいは訊きたいことを <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。
<ul>
<li>タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。</li>
<li>添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。</li>
<li>どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。</li>
</ul>
</li>
</ol>
<h2 id="Whats_next" name="What's_next">次のステップ</h2>
<p>最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、<a href="/ja/docs/Learn/CSS/Building_blocks">CSS ブロック構築</a>ではいくつかの重要な部分を深く見ていきましょう。</p>
<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
<ol>
<li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
</ol>
|
