初めてのHTML　-スタイルシート- ＠TWクラブ【BloodyRosary】製作

スタイルシートに行く前に、ちょっと今までのおさらい（またか
ちなみにこのページ、ちょっと長いです。ご注意をｗ


まず、test.htmlの中身はこれ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>ようこそ、このサイトへ</title>
</head>
<body>

<h1>今日の一言</h1><br>

<p>
ぶっちゃけ眠い。２１時には眠いわ。<br>
本当は２０時には寝たいけどな（爆ステ<br>
</p>

<img src="img/neko.jpg" alt="img"  width="100" height="100">

<br>

<a href="test2.html">次のページへ</a>


</body>
</html>

test.htmlでは『h1』『br』『p』『img』『a』とかをやった。
それぞれ覚えているだろうか？

『h1』は見出し、
『br』は改行、
『p』は文字、
『img』は絵、
『a』はリンク。

もうこれだけで簡単なサイトはできちゃうぞ☆な感じである。



んで、test2.htmlの中身はこれ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>ここは次のページだ</title>
</head>
<body>

<h1>昨日の一言</h1><br>

<p>
俺を信じろ、アル！<br>
</p>

<p>一昨日以前の一言</p>
<table border=1 summary="item">
<tr>
<td>１週間前</td><td>雷がいい感じ。</td>
</tr>
<tr>
<td>１ヶ月前</td><td>七転八倒、火車も涼しく。</td>
</tr>
<tr>
<td>半年前</td><td>泣けばいいさ。大声上げて。</td>
</tr>
</table>

</body>
</html>

test2.htmlではtest.htmlのリンク先として作っていて、
『table』を使用している。
『table』は四角の枠で囲ったものが作れる。



↑のHTML文をチェックすると、１００点が取れる。
HTMLチェックで両方とも確認してほしい。

どうだ、気持ちいいだろ？





んで、それぞれの画面はこんな感じで表示されているはず。

test.html

test2.html






さて、ここで気づいてほしい。

なんか真っ白で、華がない　と。


このサイトなんて真っ黒だ。真っ黒で文字は暗い黄色だ。
しかも大きさとかは、h1とかを使ってるわけじゃないんだよこれ。

こいつらの原因は、すべてスタイルシートを使ってるからだ！

真っ白がいいならそれでいいだろう。　

いや、本当にいいのか！？



スタイルシートのすべてを教えられるわけではないが（というかタグも基本しか教えてない）、
例として、このサイトに使っているスタイルシートを　一部　お見せしよう。

↓　これです。

body {
color : #808040;
background-color: #000000;
font-family: 'ＭＳゴシック';
}
a:link {
color: #008040;
}
a:visited {
color: #804000;
}
a:active {
color: #ff8000;
}
.font20 {
display:inline;
font-size: 20pt;
}
table {
background-color : #000000;
}

なんじゃこいつら！



あわてることなかれ、まずは見慣れたものから見ていこう。

『body』　これは見たことあるな。『<body> </body>』のやつ。
つまり、サイトの本文を表示するところだ。

このスタイルシートを見ると、ごちゃごちゃしたのを抜かすと、

body {
}

こうなる。

body の横に {　があって、　最後に } がある。

この、{} の中に、どんなことをしたいかを定義するのだ！



bodyに書くと、サイト内のすべての文字とか背景とかに影響する（サイトの本文部分だし）。

んじゃー、上のやつは何をしてんの？　ということで１つ１つ見ていく。

↓

body {
color : #808040;
background-color: #000000;
font-family: 'ＭＳゴシック';
}


まずは　{}内にある　『color : 』ってやつ。
これは「文字色」を設定してます。
『#808040』　というのは、RGBといって色を指定している。

数字だけじゃわかんねーよ。

ごもっとも。しかし、微妙な色を表現するにはこれがいいのだ！
どんな色を出したいのかは、このサイトがいいかも。

RGB変換

↑のサイトで、「808040」　を16進数　→　10進数　ってところに入れて、
変換ボタンを押してみよう。ここで使ってる文字色が出るはずですよ。

808040　はそれぞれ　80(赤) 80(緑) 40(青)　と見る。
RGBとは、Red(赤) Green(緑) Blue(青) の略。
最初の左2桁を増やせば赤が濃くなる。数字は１６進数の0からFまで指定。
↑のサイトで、FF8040とかしてみよう。なんかオレンジっぽくなったと思う。

ほかにもいろいろ確かめて、大体でいいから把握しよう☆



次に『background-color:』、これも色の設定っぽい。てか色の設定だよ。
日本語的に言えば、「バックグラウンドカラー」、あぁ、どう見ても背景っぽい…！

正解。これ、背景です。

今回は『#000000』、これはRGB変換のサイトで見てもいいけど、
黒です。真っ黒です。今見てるこの画面の通りです。



最後に『font-family:』ってやつ。　これは文字のフォントを指定している。
このサイトのすべての文字は、「ＭＳ ゴシック」になってるのよん。

ほかにも、『ＭＳ 明朝』,『ＭＳ Ｐゴシック』,『ＭＳ Ｐ明朝』辺りが
一般的と言われているぞ。



とりあえずbodyだけでも、参考に作ってみよう。




default.txtをまず作り、

body {
color : #808040;
background-color: #000000;
font-family: 'ＭＳゴシック';
}

を書いて、保存。
その後『default.css』というファイル名に変更して、test.htmlとかが入ってる場所と
同じところに置いて、再度test.htmlを見てみよう！



あぁ、忘れてた。
<link rel="stylesheet" href="default.css" type="text/css">
↑　これ、ちゃんとtest.htmlと、test2.htmlに入ってないと動かないから、
入れてなかったら入れといてね～。


↓　見てみたら、こんなことになってるはず。

↓　次のページも

うわー、このサイトと同じになったー！


色は各自、好きな色を設定してみよう！
これでサイト全体の色や文字フォントを、お好みに設定できるようになった☆







さてさて、まだスタイルシートでできることがある。

次はこれ。

a:link {
color: #008040;
}
a:visited {
color: #804000;
}
a:active {
color: #ff8000;
}

なんか、『a』が複数あるし。


これは、リンクで飛ぶやつの文字色の設定など。
aの横にある文字の意味はそれぞれ…、


link　　：通常のリンク
visited ：読み込み済みのリンク
active　：クリックされた瞬間のリンク

となっている。

マウスが上に乗せられている状態のリンクの色を変えるのに『hover』ってのもあるぞ。

は？何言ってるのわかんねーし。


わかれｗｗｗｗ



『link』、つまり通常のリンクってのは、
まだ一度も行ってないリンクって、いつも色が青いでしょ。
それを変わりに『#008040』にして、緑っぽいのに文字色を変えてるってわけ。

『visited』、読み込み済みのリンクってのは、
すでに行ったリンクって、いつも色が濃い紫でしょ。
それを変わりに『#804000』にして、オレンジだか茶色だかわからん文字色に変えてる。

『active』、クリックされた瞬間のリンクってのはそのままの意味。
押した瞬間は、いつも色が赤いと思うが、
それを変わりに『#ff8000』にして、明るいオレンジだか茶色風味の文字色にしてるわけよ。



これらもさっきの『default.css』に書いて保存すれば、
test.htmlに書いてあるリンク、「次のページへ」ってのの色が変わると思われる。
もう押してあるから、オレンジか茶色風味の色になると思われる。





次はこれ。

.font20 {
display:inline;
font-size: 20pt;
}


この『display:inline』ってのは、勝手に改行しちゃうのを防ぐため。
（次の文字とかを横に並ばせるため…が正解か）

『font-size』ってのは、そのまんまフォントサイズ。大きさの設定。
ここでは20ポイントの大きさにしている。
20ポイントってのは……、

こんぐらいの大きさのこと。

うん、今まででも何回も見てきたね、この文字の大きさ。




んで。


ここで重要なのが、「最初のドット(.)」だ。
これは、「タグ名に依存しないクラス名を指定」している。

は？？？？


まぁまぁｗ

とりあえずやり方だけ覚えてみよう。

↓のを見てくれ。

<div class="font20">
は？？？？
</div>

なんか、『<div>』とかいうタグが出てきたが、

「このタグはそれ自身は特に意味を持ってないが、
divで囲んだ範囲をひとかたまりとして、スタイルシート等を設定できる」


つまり、『.font20』ってのを使いたいんだけど、
特に指定できるタグがないなぁ～……ってときに、
このdivを使うってわけ。






そして、もう一度言います。

これは、「タグ名に依存しないクラス名を指定」している。


つまり『div』じゃなくてもいい。

例えば、『<p class="font20">』とかにすると、
『<p class="font20"> </p>』で囲まれた部分は、
例の場合20ポイントの大きさになる。


同じくして、『<a href="なんちゃら～" class="font20">』とかにすると、
『<a href="なんちゃら～" class="font20"> </a>』で囲まれた部分は、
例の場合20ポイントの大きさになる。



などなど、普通の文字もリンクも、関係なく『class=』ってので指定すれば、

そのスタイルシートに決められた設定をしてくれる！






最後にこれ。

table {
background-color : #000000;
}

何も、背景があるのはbodyだけじゃない。
tableにだって背景はある！
その証拠に、こんなものを用意してみた。

table.white {
background-color : #FFFFFF;
}

どうよ、白いっしょ。


今回のは、『table』　ってやつの後に、『.white』って書いてある。
最初からドット(.)で書くのとは違い、今回は

「タグ名に依存するクラス名を指定」している。


つまり、このクラス『.white』は、tableでしか使えない。
で、使い方はこんな感じで。

<table border=1 summary="01" class="white"><tr><td>
<p>
table.white {<br>
background-color : #FFFFFF;<br>
}<br>
</p>
</td></tr></table>


このサイトで使ってるのは、こんぐらいかなぁ…。
こんぐらいあれば十分っしょ！ｗ

これで、サイトにより華が出るというものです。すばらしいですね☆




次へ(超まとめ)


前へ(基本的なタグ<table>)


目次へ



別館TOPに戻る

ブログに戻る

初めてのHTML -スタイルシート- ＠TWクラブ【BloodyRosary】製作

初めてのHTML　-スタイルシート- ＠TWクラブ【BloodyRosary】製作