CSS の第一歩

CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。

前提条件

このモジュールを始める前に、次の状態になっておくべきです。

  1. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
  2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
  3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。

メモ: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBinGlitch といったオンラインコーディングプログラムで試すことが可能です。

ガイド

このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。

CSS とは何か?

CSS (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか?この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。

CSS 入門

この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。

CSS の全体像

CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。

CSS はどう働くか?

CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。この記事では CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。

評価試験

以下の評価試験では、上記のガイドに応じたCSSの基本を理解しているかどうかをテストします。

経歴ページのスタイル設定

前の記事でいくつか学んだことがあれば、 CSS を使って単純なテキスト文書に自分自身でスタイルを加えて書式化できることがわかるはずです。この評価試験では、そのチャンスを提供します。