新しい知識を使う

This translation is incomplete. Please help translate this article from English

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

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

CSS を少し試してみよう

ここではライブで動作する例によってCSSによるスタイルされた履歴表を示します。ここで使用した、CSS 属性の例をの詳細についてはMDNの属性を参照してください。その使用例を紹介しています。

セレクタの混在や、 h1要素やh2要素などのスタイリング、だけでなく職名ためのクラスやそれらのスタイリングを使用してきました。

CSSを使ってどのようにこの履歴の見た目を変えられるか確認しましょう。使用されている属性値の変更、いくつかのルールの削除、あなた自身の作成したルールを適用してみましょう。それから、このページに書かれていない属性をみてみましょう。MDNのCSSリファレンス には冒険が待っています!

例えば、次のことができます:

  • 色の変更
  • ヘッディングのサイズの変更
  • ulのスタイルの変更、連絡先詳細リストの表示方法の変更
  • いくつかのよい背景の追加、いくつかの要素の境界の追加
  • HTML要素にマウスオーバー時のアニメーションの追加(色やサイズはアニメーションの候補になります)
  • グラデーションや影の追加

ここには間違った回答はないことを覚えていて欲しい。— ここではいろいろ試してどのような効果がでるか試して学びましょう。

 

次のステップ

最初のモジュールを完了させました、おめでとうございます。あなたはこれからCSSの一般的な理解できており、スタイルシートに何がおきているかを理解できるようになりました。次のモジュール、CSS ブロック構築 でいくつかの重要な項目の詳細をみることになります。

このモジュール内

  1. What is CSS?
  2. Getting started with CSS
  3. How CSS is structured
  4. How CSS works
  5. Using your new knowledge