超初心者でも大丈夫
スタイルシートを使ってみよう

HTML(各主要要素=タグ) をある程度使えるようになってくるとスタイルシートは理解ができると思います。
ページに使った背景画像や写真を自由に好きな所に配置することや、テキスト (文字列) の文頭の位置、余白など変えたい時ありませんか?スタイルシートを使えば、できるようになります。 HTMLはもともと文書の構造を表すために考えられた仕組みですが、 スタイルシートは、HTMLのタグにプラスして指定し、HTMLでは不可能だった細かいコントロールや表現 (文字、色、背景、枠線、表示位置、余白など) を可能にし、レイアウトに凝ったページを作成することができます。 デザインの表現をHTMLから分離したものがスタイルシートです。

HTMLだけでは、ページのデザインをコントロールする自由な調整はあまりできません。インターネット上には素敵にレイアウトされたページがたくさんあります。そのようなページはスタイルシートを使って自由に表現されています。 スタイルシートの自由さを知るともっとホームページ作成が楽しくなるでしょう。

スタイルシートは「スタイルを設定しておいて、必要な所に適用する」というのが基本になります。

CSS の基礎知識

「background」のナビゲーションバー
  1. ページ全体の背景に色をつけよう
  2. ページ全体の背景に画像をつけよう
  3. 背景画像を固定しよう
  4. 左縦方向に繰り返し表示しよう
  5. 右縦方向に繰り返し表示しよう
  6. 上横方向に繰り返し表示しよう
  7. 下横方向に繰り返し表示しよう
  8. 繰り返さない(一枚だけ)で表示しよう
  9. 繰り返さないで左上に固定して表示しよう
  10. 繰り返さないで左下に表示しよう
  11. 繰り返さないで中央に表示しよう
  12. 繰り返さないで中央に固定して表示しよう
  13. 繰り返さないで右上に表示しよう
  14. 繰り返さないで右下に表示しよう
  15. 50px 100pxの位置に固定して表示しよう
  16. 背景に関する設定をまとめてみよう
  17. 段落に背景色を指定しよう
  18. 段落に背景画像を指定しよう
「font」のナビゲーションバー
  1. サイズを指定しよう
  2. 色を指定しよう
  3. 太さを指定しよう
  4. 改行幅を指定しよう
  5. 斜体に指定しよう
  6. 表示フォントを指定しよう
  7. フォントをまとめて指定しよう
「text」のナビゲーションバー
  1. 文章の行揃えを指定しよう
  2. 文頭の字下げを指定しよう
  3. テキストに線を引こう
  「border」のナビゲーションバー
  1. 枠線のスタイルを指定しよう
  2. 枠線の幅を指定しよう
  3. 枠線の色を指定しよう
  4. マージンを指定しよう
  5. マージンを個別に指定しよう
  6. 枠と内容の間の余白を指定しよう
  7. 枠の幅と高さを指定しよう
  8. 枠と余白をまとめて指定しよう
「link」のナビゲーションバー
  1. 下線を消そう
  2. 下線なし、マウスが乗ったとき下線を引こう
  3. 色が変わる指定をしよう
  4. 背景色が変わる指定をしよう
  5. 背景色、色も変わる指定をしよう
  6. 下線を破線に変えよう
  7. 各リンクに違ったスタイルを指定しよう
「position」のナビゲーションバー
  1. 指定した範囲の配置方法をきめよう
  2. 指定した範囲の表示位置を指定しよう
  3. 重ね合わせの順序を指定しよう
  4. 文字列の回り込みを指定しよう
  5. 画像と文字の間隔を調整しよう
「table」のナビゲーションバー
  1. テーブル内のフォントの大きさを指定しよう
  2. 特定セル内のフォントの大きさと色を指定しよう
  3. テーブルの背景色と背景画像を指定しよう
  4. テーブルの横幅と縦幅を指定しよう
  5. 枠線を変えてみよう
  6. 特定のセルを目立たせよう
  7. セル内に余白を作ろう
  8. テーブル内の行間を指定しよう
  9. テーブルの表示を高速化しよう

※スタイルシートが実際はどのように表示されるかは、ブラウザが決めます。ブラウザの古いバージョンによっては、スタイルシートをサポートしていない場合があります。