ホームページ

コピーして作る、HTML+CSS

ＨＴＭＬファイルとスタイルシート

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

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

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

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

ファイルの名前

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

HTMLファイルの構造

ＨＴＭＬファイルは、ヘッダとボディでできている

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

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">
</head>
<body>


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



</body>
</html>

スタイルシートの構造

スタイルシートは、{ ～ } が、いくつもあるファイルである。

　スタイルシートの、ひとまとまりの設定は、 { で始まり、 } で終わります。

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

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

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

スタイルシートの{ ～ } に、ＨＴＭＬのタグを関連づけて、そのタグを、その設定で表示する。

　スタイルシートの、{ ～ }の前にタグを書くと、そのタグに設定が反映されます。

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

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

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

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

スタイルに名前をつける

{ ～ } に、任意の名前をつける。

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

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

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

例　ＨＴＭＬファイル
<p class="haru">～</p>
<p class="natu">～</p>

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

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

タグと名前を指定した場合と同じように使いますが、指定したタグにのみ、設定が反映されます。
例　スタイルシート p.haru { ～ } 　これは、<p>専用になります。ただの<p>にも、<p>以外のタグにとっても、この設定は反映されません。例　ＨＴＭＬファイル ○<p class="haru">～</p> ×<p>～</p> ×<td class="haru">～</td>

スタイルの省略や、重複

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

例　スタイルシート
p { 文字の色１;　○背景の色１; }
p { ○文字の色２; }

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

p { 文字の色１;　背景の色１; }
p.haru { 文字の色２; }
p.natu { 背景の色２; }

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

コピーして使う、ＨＴＭＬファイル　基本形

実際のＨＴＭＬファイル
実際のＣＳＳファイル

ＨＴＭＬファイル

拡張子が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"> </head> <body> <!-- 表示内容↓--> この部分が、表示されます。改行する箇所には、<br>タグを使います。 <!-- これは注釈で、表示されません。 --> <!-- 表示内容↑ --> </body> </html>
上のファイルを表示すると、次のように表示されます。　改行されるのは、<br>の部分だけです。
ＨＴＭＬファイルのみで表示したところ

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

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

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

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

/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓｐゴシック */
/* ｍｓ明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体など */

} /*** ｂｏｄｙ（全体）の定義おわり ***/

スタイルシートを作ってから、ＨＴＭＬファイルを表示したところ