| 小説サイト作成講座 |
□スタイルシート基礎知識
スタイルシート（ＣＳＳ）って？
ＣＳＳを使ってみよう
複数の飾りを記述するには
スタイルシートのメリットとデメリット
□スタイルシート記述例
□外部スタイルシートについて
□スタイルシート基礎知識
ＣＳＳとは、簡単に言えば「Webページを飾るための記述」のことです。
扱うためにはHTMLが理解できる程度の知識が必要ですが、慣れればそんなに難しいことではありません。
まずは百聞は一見にしかず、
次のページを見比べてみてください。
>>ＣＳＳの無いページ
>>ＣＳＳの有るページ
･･･違いが判りましたか？
ＣＳＳを活用すれば、様々な演出でページを見栄え良く作ることが出来ます。
ホームページビルダーなどの編集用ソフトには、スタイルシートマネージャーという機能がついているのですが、ここでは手書きでＣＳＳを編集することを前提として紹介していきます。
ＣＳＳを記述するには、ページの「ソース」を編集する必要が有ります。
→ページの「ソース」って何？って方はこちら
（１）まずはページのヘッド部分に、「スタイルシートを使いますよー」という宣言を入れます。
| <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"> <!-- この間の部分に、いろいろな「ＣＳＳ」を書き込みます。 --> </STYLE> |
（３）それでは試しに、あなたのサイトの小説ページの行間を空けてみましょう。
| <STYLE type="text/css"> <!-- BODY, TH, TD { line-height: 160%; } --> </STYLE> |
※BODY, TH, TD { line-height: 160%; } の解説
BODY, TH, TD
{ } の中の属性を、ページの中の「BODY（本文）」「TH（表のタイトル）」「TD（表の中の文字）」部分に適用されるという記述です。
この部分を「セレクタ」と呼びます。
line-height
行の高さを表す記述。
これを「属性」と呼びます。
| セレクタ（適応したい部分）{ 属性（飾りの種類） : 値; } |
これが基本的なＣＳＳの記述方法です。
{ } などの括弧の種類や、 属性と値の間に「：（コロン）」を入れること、そして値の後ろに「；（セミコロン）」を入れることを忘れないように気をつけましょう。
また、記述は全て半角英数字で行います。（※全角で記述するとCSSが働かないことがあります）
基本的な記述を覚えたところで、実用してみましょう。
BODYやTDなど、一箇所に複数の飾りを指定したいと思います。
複数の「属性」を指定する場合でも、
| <STYLE type="text/css"> <!-- BODY, TH, TD { line-height: 160%; } BODY, TH, TD { background: yellow; } BODY, TH, TD { background: yellow; } --> </STYLE> |
こんな風に何回も「BODY, TH, TD」を繰り返す必要はありません。
| <STYLE type="text/css"> <!-- BODY, TH, TD { line-height: 160%; background: yellow; background: yellow; } --> </STYLE> |
こうやって、{ } の間に、複数の「属性」を全て入れて記述することができます。
良く使われるＣＳＳについては【スタイルシート記述例】をご覧下さい。
>>CSSを利用するメリット
HTMLでは出来ないような複雑な飾りをつけることが出来ます。
行間をあけて文章を読みやすくしたり、背景画像を固定したり、etc.などです。
また、外部スタイルシートやクラスを活用すると記述を簡略できたり、色やデザインの変更を簡単に行うことが可能になります。
>>CSSを利用するデメリット
ブラウザが未対応だとCSSが反映されず、デザインが崩れることがあります。
また、IEとNetscapeではCSSの動作が異なるため、編集した自分の見ている画面と訪問した別の人物が見た画面に差がでてしまうことがあります。過度のCSS利用は、逆に見づらいページを作ってしまうので気をつけましょう。（詳しくは【
△ＴＯＰへ戻る
ＮＥＸＴ>>スタイルシート記述例