From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../using_your_new_knowledge/index.html | 100 +++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/learn/css/first_steps/using_your_new_knowledge/index.html (limited to 'files/ja/learn/css/first_steps/using_your_new_knowledge') diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..d404a70bbf --- /dev/null +++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,100 @@ +--- +title: 新しい知識を使う +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - Beginner + - CSS + - Learn + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。

+ + + + + + + + + + + + +
前提条件:基礎コンピューターリテラシー、基本的なソフトウェアのインストール、ファイル操作の基礎知識 HTML の基礎 (HTML の入門で学ぶ)、CSS の基礎(このモジュールの残り)
目的:いくつかの CSS を試し、知識レベルを確認します
+ +

さあ始めよう

+ +

下の Live エディタで試すこともできますし、我々の Github リポジトリからサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、CodePen や jsFiddle、Glitch といったオンラインエディタを使うこともできます。

+ +
+

注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。

+
+ +

CSS を少し試してみよう

+ +

下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。

+ + + +

下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。

+ +

プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。

+ +
    +
  1. 見出し 1 の文字色をピンクに変えてみましょう。色の指定には hotpink を使うとよいでしょう。
    2. +
  2. 見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を purple にしてみましょう。
    3. +
  3. 見出し 2 の書体をイタリックに変えてみましょう。
    4. +
  4. 連絡先情報の部分で使われている ul 要素の {{cssxref("background-color")}} を #eeeeee にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。
    5. +
  5. リンクの部分にマウスが乗ったとき、リンクが green に変わるように設定しましょう。
    6. +
+ +

完成したら次の画像のようになるはずです。

+ +

+ +

それから、このページに書かれていない属性をみてみましょう。MDN の CSS リファレンス には冒険が待っています!

+ +

ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

アセスメントとさらなるヘルプ

+ +

作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：

+ +
    +
  1. あなたが作ったものを CodePen や jsFiddle、Glitch などのコード共有サービスに公開してください。
    2. +
  2. 添削の依頼あるいは訊きたいことを MDN Discourse forum Learning category に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。 +
      +
    • タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
      • +
    • 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
      • +
    • どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
      • +
    +
    3. +
+ +

次のステップ

+ +

最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、CSS ブロック構築ではいくつかの重要な部分を深く見ていきましょう。

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

このモジュール内

+ +
    +
  1. What is CSS?
    2. +
  2. Getting started with CSS
    3. +
  3. How CSS is structured
    4. +
  4. How CSS works
    5. +
  5. Using your new knowledge
    6. +
-- cgit v1.2.3-54-g00ecf