実践！ホームページ作成への道＞ちょっとだけスタイルシート講座
ちょっとだけスタイルシート講座
スタイルシートとは、Webページをデザインする技術のことで、
HTMLのタグを使うだけより、より細かくきれいなレイアウトができます。
また、CSSというのも聞いたことがありますか？
CSSというのはスタイルシートの一種で、
ホームページを作るときに使う「スタイルシート」とは「CSS」のことを意味してます。
ちなみにこのサイトもスタイルシートを使ってます。
では、スタイルシートの使い方を説明しましょう。
☆スタイルシートを使うときにはじめにすること
まず、スタイルシートをいろいろ設定する前に、スタイルシートを使うページに
<meta http-equiv="Content-Style-Type" content="text/css">
というのを<head>と</head>の間に書きます。
これは、このページはスタイルシートを使ってますよーと、
ブラウザに示しています。まぁ、なくてもきちんと表示されるのが多いですけどね。
一応書いておきましょう。
☆スタイルシートの使い方
スタイルシートには３種類の使い方があります。
１、スタイルのみを書いた外部スタイルシートを作り、それを読み込む
２、そのページの<head>～</head>に直接書き込む
３、タグに直接書き込む
では、それぞれ説明をします。
スタイルシートの書き方については、この後で説明します。
１、スタイルのみを書いた外部スタイルシートを作り、それを読み込む
外部スタイルシートのファイルを作り、それを「****.css」という名前にします。
そして、そのスタイルシートを使いたいページの中で
<head>と</head>の間に
<link rel="stylesheet" type="text/css" href="****.css">
という文をいれます。これで、そのページは外部ファイルのスタイルシートが反映されます。
例
ホームページ内の構造が以下のようだとする
/
├index.html
├profile.html
├main.css （スタイルシートのファイル）
まずmain.cssファイルとして例えば
TABLE {FONT-SIZE:10pt; line-height:1.3; padding: 2px 5px 2px
5px }
A{
color : #0000ff
} |
そして 、index.htmlファイルのソースをこのようにすると反映されます。
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
<meta
http-equiv="Content-Style-Type" content="text/css">
<title>トップページ</title>
<link rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
・・・・
|
２、そのページの<head>～</head>に直接書き込む
<head>と</head>の間に以下のように書きます。
こうすると、その書いたページにだけ、そのスタイルが反映されます。
<style type="text/css">
<!--
設定したいスタイルをここに書く。
-->
</style>
例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
<meta
http-equiv="Content-Style-Type" content="text/css">
<title>トップページ</title>
<style type="text/css">
<!--
TABLE {FONT-SIZE:10pt; padding: 2px 5px 2px 5px }
A{ color : #0000ff }
-->
</style>
</head> <body>
・・・・
|
３、タグに直接書き込む
そのタグで囲まれているところだけ、そのスタイルが有効です。
例
これは<span style="color:blue">スタイルシート</span>です。
↓
これはスタイルシートです。
これも<h3 style="background-color:#cccccc; color:#993300">スタイルシート</h3>です
↓
これも
スタイルシート
です
☆スタイルシートの書き方
書き方については、
１、スタイルのみを書いた外部スタイルシートを作り、それを読み込む
２、そのページの<head>～</head>に直接書き込む
の時が、書き方が同じなので、その場合について解説します。
A、タグにスタイルを設定する。
あるタグについて、そのページでそのタグを使うとき、すべて同じスタイルとなります。
書き方
タグが１つのとき ● ｛▲：△｝
タグが複数のとき ●，○，★ ｛▲：△｝
指定が複数のとき ● ｛▲：△； ■：□； ★：☆ ｝
（指定が複数のとき数行に分けてもいいです。 また、最後だけ「；」いりません。）
なんか、わかりにくいので具体例を示します。
table {color:#0000ff; background-color:#cccccc}
これは、そのページでtableタグを使うと、
その中の文字の色が#0000ff（青色）、背景の色が#cccccc（灰色）になります。
実例 上のtableのスタイルシートを指定したページ
もう１つ実例
body {font-size:20pt; letter-spacing:50pt }
これは、bodyタグなので、そのページ全体が
文字の大きさが20pt、単語間の空白が10ptとなります。
実例 上のbodyのスタイルシートを指定したページ
しかし、そのページで同じタグ使ったら、全部こうなるのも困る・・・
というわけで、次のに行きます。
B、任意の範囲にスタイルを指定する
自分の好きな範囲だけスタイルシートのデザインを使おうってことです。
書き方
．●｛ ▲：△｝
．●｛ ▲：△； ■：□； ★：☆ ｝
●は任意の文字です。基本的にはなんでもいいです。
Aと違うところは、●がなんでもいいのと、一番初めに「．」をつけます。
そして、使うときは
<タグ名 class="●">・・・</タグ名>
とします。
それでは、具体例を
.sample {font-size:15pt; color:#ff0000}
これは、class="sample"としたものだけ、字の大きさが15pt、字の色が#ff0000（赤）です。
実例 上のsampleを使ったページ
もう１つ実例
.hogehoge {font-size:16pt; background-color:#ccffff}
これはclass="hogehoge"としたものだけ、文字の大きさが20pt、背景の色が#000033です。
実例 上のhogehogeを使ったページ
これで、もうほとんどスタイルシートは使える状態になっていると思います。
実は、まだまだ細かいところなどいろいろと多いのですけどね。
それと、font-sizeやcolorといった要素は、まだまだたくさんあります。
この後の実践テクニックでもいろいろ紹介します。
要素の一覧表は「とほほのWWW入門」さんのHPの中の
「とほほのスタイルシート入門」というページにまとめてのせてくれてます。
トップページに戻る
|
|
|
