スタイルシートとは


スタイルシートはHTMLと同じ感覚で使えますし、HTMLのホームページに部分的に追加することもできます。
スタイルシートはほんのわずかな基本的なことを覚えるだけで、簡単に使えるようになりHTMLだけではできない 色々な効果を利用することができます。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
スタイルシートとは       

HTMLから、見映え・レイアウトに関する機能だけを抜き出したものです。
HTMLと併用できますから、従来のHTMLで書いたホームページにただ単にスタイルシートを追記するだけで、 新しい機能を追加することができます。
今のホームページに追加するだけなら、 ネットスケープナビゲーター 4.7のように、スタイルシートにあまり対応していないブラウザーで見た場合でも、 スタイルシート部が無視されるだけですから、従来のHTMLで書いた部分はそのまま表示され、 何の悪影響も有りません。
まず今のホームページにスタイルシートを追加することから始めましょう。


スタイルシートでできること       

文字の 大きさ・色・太さ・書体、 
文章の 位置・行間隔・背景色・飾り・枠・リンクのスタイル・フィルター操作、
画像の 位置・フィルター操作、
背景の レイアウト、
等を効率的に扱うことができます。


スタイルシートのメリット       

HTMLのタグは、『どこか特定の場所』に『何かの効果』を持たせる事を目的にしています。
その『効果をもたせたい場所ごと』に『どんな効果をもたせるかを一つずつ』書いていきます。
それに対し、スタイルシートは、
  • 『どこに何をするか』を一箇所にまとめて指示することができ、記入がシンプルになります。
  • 複数のページがあるときは、『どこに何をするか』をページごとに書かず、一つにまとめてしまうこともできます。
  • その場合は、一箇所変えればすべてのページが変更になり、作業が簡単確実になります。
  • 画像、テキストの配置の自由度がアップします。
  • 色々な特殊効果が使えます。


スタイルシートの基本的な書き方       

一番良く使う書き方の呪文を一つ覚えます
<STYLE TYPE="text/css">
<!--
この間に『どこに』『何をしたいか』を書く
-->
</STYLE>
これを<HEAD>と</HEAD>の間に記入します。
この書き方を一つ覚え、後は『どこに』と『何をしたいか』を少しずつ覚えていくだけです。

『どこに』の書き方
タグの中のアルファベットだけ抜き出して、指定するだけです。
テーブルの中に書かれた文字だけをまとめて変えたいときは、 テーブルは<TD>〜</TD>タグで囲まれていますから、『どこに』には『TD』を使います。
『どこに』に『TD』を使うと、<TD>〜</TD>で囲まれた部分に、何らかの効果を与えるという意味になります。
テーブルは<TR>タグとか<TABLE>タグでも囲まれてますから、『どこに』に『TR』を使っても『TABLE』を使っても、どれでもかまいません。

『何をしたいか』の書き方
これは覚える必要がありますが、何回か使っているうちに自然に覚えていくと思います。
『何を』をまず書き、その後に : (コロン)をつけ、次に『どうしたいか』を書き、最後に ; (セミコロン)をつけます。
『文字のサイズを10ポイント』は『font-size: 10pt ; 』と書きます。
『文字色をグリーンに』は『color: green ; 』等と書きます。

『どこに・何をしたいか』を続けて書く
『どこに・何をしたいか』を続けて書くと次のようになります。
TD {font-size: 10pt; color: green;}

どこにのあとに中括弧 { } を付け、その中に何をしたいか書いていきます。
したいことがいくつかあるときは、順番に書いていくだけです。
一番最後になるセミコロンは、有ってもなくてもかまいません。記入時の大文字・小文字の区別もありません。

今までの内容を全部まとめて書くと、次のようになります。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
<STYLE TYPE="text/css">
<!--
TD {font-size: 10pt; color: green; }
-->
</STYLE>
</HEAD>
<BODY>本文</BODY>
</HTML>
このように書くと、本文の中の<TD></TD>タグで囲まれた部分の文字が、すべて大きさ10ポイント で色は緑になります。

例題  リンク部の文字をすべて太字に
次に、リンク部の文字をすべて太字にしてみます。
リンク部は <A></A>で囲まれた部分ですから、『どこに』には、『 A 』と書きます。
何をしたいか』は、太字の場合は『font-weight: bold ;』と書きます。
テーブル部の変更と併せて書くと次のようになり、これを<HEAD></HEAD>間に記入します。
<STYLE TYPE="text/css">
<!--
TD {font-size: 10pt; color: green;}
A {font-weight: bold;}
-->
</STYLE>


例題  本文中のタグを使わない
今までの例題はすべて本文中にあるタグを利用して『どこに』を指定してきました。
本文中のタグのない部分に『何かをしたいとき』を取り上げます。
この場合は<HEAD></HEAD>間に記入するだけでなく、本文にも少し手直しが必要になります。
『どこに』に『SPAN』とか『DIV』を使い、『どこに、何をしたいか』は今までと同じ要領で、HEAD部に書いていきます。 そして本文中の効果をもたせたい場所を<SPAN></SPAN>とか<DIV></DIV>で挟みます。


実際に使うときは、次のような指定の仕方をします。
こう書くと<SPAN></SPAN>で挟まれた部分が太字になります。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN {font-weight: bold;}
-->
</STYLE>
</HEAD><BODY>
テレビも映画も音楽もワンタッチですばやく楽しめる。 AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽もワンタッチですばやく楽しめる。 AV感覚で気軽に使えるマルチAVノート誕生。


ここ迄の中間まとめ       

ほぼ使い方はわかったと思います。
<SPAN>と<DIV>の違い
<SPAN>と<DIV>の違いは、実際に自分で文中に入れてみればすぐわかります。

違いを見るために、文章に背景色をつけてみます。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN {background-color: #aaffee;}
-->
</STYLE>
</HEAD><BODY>
<SPAN>いまマーキングされている状態が SPAN を使用しています。
一行ごとにマーキングされます。</SPAN>
</BODY></HTML>
いまマーキングされている状態が SPAN を使用しています。
一行ごとにマーキングされます。


次に DIV を使って文章に背景色をつけてみます。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
<STYLE TYPE="text/css">
<!--
DIV {background-color: #aaffee;}
-->
</STYLE>
</HEAD><BODY>
<DIV> いま見えている状態がそうです。DIV〜/DIV で挟んだ、複数の行をまとめてマーキングします。
<Br>改行が入った部分の背景色の付け方に差が出てきます。 </DIV>
</BODY></HTML>
いま見えている状態がそうです。DIV〜/DIV で挟んだ、複数の行をまとめてマーキングします。
改行が入った部分の背景色の付け方に差が出てきます。



TOPページに戻る 順番に次を見ていく