ホームページ

コピーして作る、ホームページ

web拍手

HTMLファイルとスタイルシート

スタイルシートを使うメリット

 HTMLファイルは、ウェブページとして表示するファイルです。
 <>で囲まれた、タグにしたがって、文字や背景の色をかえたり、枠線を引いたり、画像を表示したり、リンクを張ったりすることができます。

 スタイルシートは、表示のスタイルを決めるファイルです。表示する内容は、含まれていません。が、HTMLファイルより、細かく表示方法を設定することができます。

 一つのスタイルシートを、いくつものHTMLファイルで、使うことができます。ですから、スタイルシートを書き換えさえすれば、たくさんのページを一度に模様替えすることも、簡単にできるようになります。

ファイルの名前

HTMLファイルと、スタイルシートの、名前のつけかた。
 HTMLファイルの名前は、好きなようにつけられます。しかし拡張子は、htmlです。
(ただし、ホームページだけは index.html です。)

 スタイルシートの名前は、好きなようにつけられます。しかし、拡張子はcssです。

HTMLファイルの構造

HTMLファイルは、ヘッダとボディでできている
 HTMLファイルは、<html>で始まり、</html>で終わります。
 <html>と、</html>は、どんなファイルなのかを書くヘッダと、表示する内容を書くボディで、できています。
 ヘッダは、<head>で始まり、</head>で終わります。
 ヘッダに続けて、ボディを書きます。
 ボディは、<body>で始まり、</body>で終わります。

HTMLファイル + スタイルシート

HTMLファイルに、スタイルシートを使うと書き込む。
 スタイルシートを使うHTMLファイルには、<head>と</head>の間の部分に、これを加えます。

<link rel="stylesheet" href="***.css" type="text/css">

 スタイルシートのファイル名が、test.cssであれば、こうなります。
<head>
<title>タイトル</title>
<link rel="stylesheet" href="test.css" type="text/css">
<meta name="description" content="コメント">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>
<body>
<!-- 表示内容↓-->

この部分が、表示されます。
改行する箇所には、<br>タグを使います。
<!-- これは注釈で、表示されません。 -->

<!-- 表示内容↑ -->
</body>
</html>

スタイルシートの構造

スタイルシートは、{ 〜 } が、いくつもあるファイルである。
 スタイルシートの、ひとまとまりの設定は、 { で始まり、 } で終わります。

 { から } の間に、文字色はこれ、背景色はこれと、いくつもの設定をすることができます。

 それぞれの設定は、;で終わります。
 { 〜 } には、HTMLのタグを指定するか、任意の名前をつけるか、その両方をします。

タグにスタイルを設定する

スタイルシートの{ 〜 } に、HTMLのタグを関連づけて、そのタグを、その設定で表示する。
 スタイルシートの、{ 〜 }の前にタグを書くと、そのタグに設定が反映されます。

例 スタイルシート
body { 〜 }

 たとえば、body { 〜 }とした場合、<body>から、タグの終了の</body>までに、その設定が反映されます。
 一つの{ 〜 }に、複数のタグを指定することもできます。
 タグとタグの間に , (カンマ)を入れます。

例 スタイルシート
body,table,th,td { 〜 }
 一つのスタイルシートのファイルの中には、いくつも { } を書き込むことができます。

例 スタイルシート
body { 〜 }
table { 〜 }
th,td { 〜 }

スタイルに名前をつける

{ 〜 } に、任意の名前をつける。
 任意の名前を指定した場合、HTMLファイル内で、その設定をしたい部分に、この設定を使うと書き込むのです。そのタグの終わりの部分まで、設定が反映されます。それ以外の部分には、反映されません。
 名前をつけるには、 . (ピリオド)に続けて、名前を書きます。ただし、名前として使えない言葉もいくつかありますので、注意してください。

例 スタイルシート
.haru { 〜 }
.natu { 〜 }

 HTMLファイル内で、この設定を使いたい時には、設定を使いたいタグに、class="名前"を追加します。

例 HTMLファイル
<p class="haru">〜</p>
<p class="natu">〜</p>

 このタグの有効範囲内(この場合、</p>まで。)に、haru と名づけられたスタイルが反映されます。
 <p>は、一かたまりの文章のためのタグです。他のタグにも、このharuというスタイルを使うことができます。

スタイルに名前をつけ、タグも指定する

 タグと名前を指定した場合と同じように使いますが、指定したタグにのみ、設定が反映されます。

例 スタイルシート
p.haru { 〜 }

 これは、<p>専用になります。ただの<p>にも、<p>以外のタグにとっても、この設定は反映されません。

例 HTMLファイル
<p class="haru">〜</p>
×<p>〜</p>
×<td class="haru">〜</td>

スタイルの省略や、重複

 スタイルシートは、かなりの部分を省略できます。
 同じ設定を二度書いてしまうと、後だし優先になります。
 書き間違いなどがあると、おおむね無視されるだけで、エラーにはなりません。
例 スタイルシート
p { 文字の色1; ○背景の色1; }
p { ○文字の色2; }

 ↑この場合、一度目の設定の背景の色は、そのまま有効になります。

p { 文字の色1; 背景の色1; }
p.haru { 文字の色2; }
p.natu { 背景の色2; }

 ↑この場合、通常の<p>には、haru という設定は反映されません。
 そして <p class="haru">とした場合のみ、文字の色2が使われますが、背景の色は1のままです。
 <p class="natu">とした場合は、文字の色が1で、背景の色が2になります。

コピーして使う、HTMLファイル 基本形


実際のHTMLファイル
実際のCSSファイル

HTMLファイル

 拡張子がhtmlで、ファイルが<html>で始まり、</html>で終わるのが、HTMLファイルです。
 ホームページであれば、[index.html]です。
 この部分が、スタイルシートを使うという宣言です。
<html>
<head>
<title>タイトル</title>
<link rel="stylesheet" href="test.css" type="text/css">
<meta name="description" content="コメント">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>
<body>
<!-- 表示内容↓-->

この部分が、表示されます。
改行する箇所には、<br>タグを使います。
<!-- これは注釈で、表示されません。 -->

<!-- 表示内容↑ -->
</body>
</html>
 上のファイルを表示すると、次のように表示されます。
 改行されるのは、<br>の部分だけです。
HTMLファイルのみで表示したところ

コピーして使う、スタイルシート 基本形

 上と同じように、下記をコピーして、上のHTMLファイルと同じ場所に、test.css という名前で、保存してください。
 名前は仮のものですが、スタイルシートの拡張子は、cssです。
 これがスタイルシートです。
 上記のHTMLファイルには、使用するスタイルシートとして、test.css を指定してあります。HTMLファイルの、この部分が、使用するスタイルシートのファイル名です。

<link rel="stylesheet" href="test.css" type="text/css">

 この test.css で、文字色や背景色を、設定してあります。
 test.css を保存してから、HTMLファイルを表示してみてください。
 なお、スタイルシートの注釈は、/* */で囲まれた部分です。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/
スタイルシートを作ってから、HTMLファイルを表示したところ