CSS の第一歩

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

前提条件

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

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

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

ガイド

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

CSS とは何か?
CSS (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか?この記事では CSS について、かんたんなコードの例とこの言語の主要な項目を説明します。
CSS 入門
この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。
CSS の構造化
CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。 ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。
CSS はどう働くか?
CSSの基本とその目的、そしてかんたんなスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザにどう働いてウェブページにするかをみていきます。
新しい知識を使う
過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。

関連情報

Intermediate Web Literacy 1: Intro to CSS
本記事で説明したスキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター・属性・値などを使った HTML 要素のスタイリングを学べます。