新しい知識を使う

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

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

さあ始めよう

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

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

CSS を少し試してみよう

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

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

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

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

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

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

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

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

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

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

次のステップ

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