スタイルシートとは

これまでの解説でHTML文書が出来上がりましたが、このままでは、見た目(見栄え)が非常にシンプルです。

HTMLが文書に構造的な意味を持たせるものだとして、見た目を整えるためのものが別にあります。

それが、「カスケードスタイルシート」(通称:CSS。以下「スタイルシート」)と呼ばれるものです。

「スタイルシート」を使って、HTMLの見栄えを調整します。

スタイルシートの作成方法

スタイルシートは、HTMLと同じよう作成出来ます。HTMLの拡張子が「.html」だったように、スタイルシートにも拡張子があります。スタイルシートの拡張子は「.css」になります。

HTMLファイルを作成した手順と同じように、デスクトップやテキトウなフォルダを右クリックして作成したテキストファイルの拡張子「.txt」を「.css」に変更すれば出来上がりです。

スタイルシートとHTMLの結び付け

上記の方法でスタイルシートを作成する事は出来たと思います。しかしながら、このままでは、HTMLがどのスタイルシートを使えばいいのか、わかりません。

そのため、HTMLに「このスタイルシートを読み込み、適用しなさい」と指示するタグを入れなければいけません。

このタグは、HTMLの文書の情報を記述する部分である「<head>HTMLの文書の情報</head>」の中に記述します。<head>の中であれば、場所の指定は特にありません。

記述方法は、以下のような形になります。

<link href="スタイルシートのファイル名" rel="stylesheet" type="text/css" />

これを、試しに前回までに作成したHTMLに入れてみると、以下のようになります。(わかりやすく赤線で示します)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link href="スタイルシートのファイル名" rel="stylesheet" type="text/css" /> <title>WindowsXP</title>
</head>
<body>
<h1>WindowsXP</h1>
... (以下省略)

これで、このHTMLは「スタイルシートのファイル名」にあてはまるスタイルシートを参照し適用するようになりました。ここで注意しなければならないのは、外部ファイル、言わば自分ではない他のファイルを参照させる際の、他のファイルの場所の指定の仕方を覚えなければいけません。

HTMLで扱うファイルなどの場所の指定方法

HTMLでファイルなどの場所を指定する場合、「絶対パス」と「相対パス」と呼ばれる2種類の方法のどちらかで指定します。

絶対パス」とは、「http://...」から始まるアドレスでの指定です。(例えば、恵の「パソコン購入と自作の仕方」教室!でスタイルシートを絶対パスで指定する場合は「./styles-site.css」となります)

相対パス」とは、元のファイルに対して、指定先のファイルがある場所にて変わります。同じフォルダの中にあるのであれば、「指定先ファイル名」といったように、指定先のファイル名だけ入れます。(もしくは「./」となります)一つ前のフォルダにあるのであれば「../指定先ファイル名」、更にもう一つ前のフォルダにあるのであれば「../../指定先ファイル名」、元のファイルと同じフォルダの中にある、「style」(仮)というフォルダの中にあれば、「style/指定先のファイル名」といったようになります。
少しわかりにくいので、以下の図をご参照下さい。

相対パスでの指定方法を示した図

これは、画像などをホームページ上に配置する際にも、その画像をレンタルサーバーのどこに設置しているのか、場所を指定する際にも同じ方法で指定します。他にも色々な事に関係してくるので、是非覚えておきましょう。

次は「スタイルシートの書き方」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは現在のページ
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?