はじめに

1-1 CSSとは

HTMLがライターなら、CSSはデザイナー


HTMLで書かれた文章に対してCSSでデザイン、見た目のレイアウトを指定します。 WEBページの内容とは別に、見た目を重視したタグが氾濫していきました。結果、デザイン重視のWEBページのソースが非常に難解になり、そのメンテナンスに非常に高い技術が要求されるようになりました。また、テーブルタグなど本来の使い方以外にレイアウトとしての使い方は一般化してしまいました。そこで HTML内に書き込んできたデザイン関係のタグや、ソースのメンテナンスを容易にする意味もあり、CSSが生まれたのです。

1-2 CSS構造概念

基本的な定義方法


例）<P>タグ（ピータグ）に黄色い背景色をつけるCSSを定義します。
(このときのセレクタ名”p”はclass（クラス）名と呼ぶ)
p {
　background-color: #FFFF99;
　}

<body>タグ内では、<P>タグにclass名を記述します。
<p class="p">テキストテキスト</p>

class名をつけると、<body>タグだけでなくほかのタグでも黄色い背景になります。
<div class="p">テキストテキスト</div>
 
クライアントから背景色の黄色をピンクにしてほしいと依頼があった場合、その修正が全ページに影響していたら、人は効率的に修正したいと考えます。そんなときにCSSを定義しておけば、background-color: #FFFF99; を background-color: #FF99CC;と定義しなおすだけで済みます。


ようやくデザインし終わって全体の雰囲気を見直したら、なんだか全体の雰囲気から浮いている色が・・・・。なんて時にも大丈夫！　CSSを使っていれば直しは一瞬！


ボックスの概念


内容を表示する領域、マージン、パディング、背景、枠線で構成されます。 パディングとマージンは透明な領域です。枠線や背景を指定しないときはそのちがいはわかりにくいことがあります。

マージン・パディング共に天地左右に数値を設定するだけで簡単に余白を設定することができます。
マージンはtableやtr、tdの外側に付けられる余白で、画像とテキストの間に余白をもうけたい時などに便利。
パディングはtableやtr、tdの内側に付けられる余白で、表組みなどを作るときに罫線とテキストの間に余白をもうける時に便利です。
 
マージンとパディングを使い分けることによって短いソースコードで効率的にコーディングすることができます。
きちんと理解して上手に使いましょう！


マージンなのかパディングなのか悩む今日この頃。

1-3 CSSの参照

サイトの規模が大きくなると外部にCSSファイルをつくるのが便利


<head>タグ内にこの1行を入れるだけです。
<head>
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
何種類もCSSファイルがる場合はそのファイルを一つ一つリンクさせておきます。 サイト全体にかかわるのをcommon.cssとして、各章ごとなどにstyle1.css, style2.cssなどできます。


CSSファイルのつくり方
  1. テキストエディタ（メモ帳）等で、新規ファイルを作ましょう。
    　 example.TXT （ファイル名は好きに決めていい。ここではstyle.TXTにします）
  2. 「style.TXT」のなかに
    3. p {
    　background-color    : #FFFF99;
    　}
    と、記述します。
  3. ファイルを保存して 「style.TXT」のファイル名を「style.css」に変更します。
    出来上がったふファイルを 見るときには、ダブルクリックではなく、テキストエディタにドロップ＆ドラックします。
 
もちろん直接ページ内に記述することもできますが、数ページにわたるサイトを構築する場合、同じスタイルを共有することがよくあります。そんなときは外部にCSSファイルを作ってどのページからもリンクさせておけば、修正なども簡単に全ページへ反映させることができます。


直接ページに記述する場合


<head>
<style type="text/css">
<!--
p {
　background-color: #FFFF99;
　}
-->
</style>
</head>
 
外部のCSSに書き込んだつもりが、なぜかページ内に書き込まれていることが・・・。 私の中のCSS七不思議談、No.10。