2006年05月04日

body、container、a

さて、スタイルシートの実際のお話。


前回もお話したように、スタイルシートはスタイル指定だけが並んでいます。

スタイルの名前{実際のスタイル指定}
これが基本書式。

スタイルの名前=どの部分についての指定か、ということですね。
名前の前に「#(半角シャープ)」か「.(半角ピリオド)」がついています。
私はブログのスタイルシートで「#」を初めて見ましたが、これはいわば「大分類」的なものにはこちらが使われているようです。
対する「.」は「小分類」とでもいった感じでしょうか。

{ }の中は
スタイル : 数値 ; スタイル:数値 ; スタイル:数値 ; ・・・・・
早い話が、「何についてなのか」と「実際の数値や種類の指定」を「:」の両辺に置き、ひとつごとに「;」で区切るわけですね。
実際には「;」の後で改行して見やすくしてあることがほとんどです。


このブログのスタイルシートの一部は次のようになっています。

body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(http://blog.seesaa.jp/img/bg/blue/bg.gif );
background-repeat:repeat-x;
background-color:#CBDBE1;
margin:0px;
padding:0px;
text-align:center;
}

最初のところですね。


さて、先ほど名前の前に「#」か「.」がついていると言いましたが・・・。
例外的についていないものがあります。
「body」「a」「H1」〜「H3」がそれに当たります。
これは、自分で名前をつけるものではなく、最初から決まっている定型文的なものなので、そういう扱いになるらしいです。
(詳しいことは知らない;;)


スタイルシートの最初には「body」の指定が来ます。
これは、全体のスタイルについてですね。
全体に背景が入る時は、ここにその指定を入れます。


後は、スタイルシートによって順番が違うかもしれませんが・・・。

a」 (リンクについての指定)
H1」 大見出し=ブログではタイトル
H2」 中見出し=ブログでは日付をこれに当てています
H3」 小見出し=ブログでは記事タイトル
とまぁ、こんなものが来ているはずです。


それと前後して入っている「#container」は、いわばパーツを入れるための箱、といった感じでしょうか。

このブログは幸い、そのcontainerの説明がすごくし易いのですが・・・横幅一杯一杯に使ってませんよね?
両サイドに背景だけの部分があると思います。
そして、画面の表示幅を狭くしていくと、下にスクロールバーが現れ、背景だけの部分はなくなってしまいますが、主要部分は何がなんでも表示されることになっているはず。
これが「container」部分なんですねw


スタイルシートによっては「container」の指定がないものもありますが・・・。
なるべくなら、containerで幅指定はしておく方がいいと思います。
でないと、表示幅が狭くなった時に、画面が思いっきり崩れて見えるからです。


ちなみに、seesaaブログでは「#container」という名前なのですが、他のブログでは必ずしもその名前ではありません。
というのも、スタイルシートというのは、先ほどの「定型分的」なもの以外は、自分で名前をつけて、それに対する指定をする、という形式だからです。
単に、seesaaでは、パーツを入れる箱を「#container」と名づけるように統一している、ということなんですね。


では今日は、「a」についての説明だけして終わりにします。


a{
color:#00C657;
text-decoration:none;
}

こんな感じが基本かな?

「a」はリンクが張ってある文字についての指定です。

「color」はリンクが張ってある文字を何色にするかの指定です。
色の指定は「#と、その後に続く6桁の英数字」あるいは「カラー名」ですることが多いです。
「#」の後が3桁になっているものもありますが、それは全部同じものの時だと思います。
「#CCC」なら「#CCCCCC」と同じ、というわけですね。

「text-decoration」は、リンクが張ってある文字の装飾についてです。
「none」は装飾なし、他に「underline」(下線)、「overline」(上線)、「line-through」(打ち消し線)、「blink(点滅)」などがあります。


「a」については、他にもこんなものがあります。

a:visited
a:active
a:hover


「visited」は訪問済みリンク、「active」はクリックされた瞬間のリンク、「hover」はマウスが上に乗った時のリンク、を表します。
普通の状態と違うスタイルにしたい場合には、それを追加で指定します。

a:visited {
color:#00C657;
text-decoration:underline;
}
a:active {
color:#000;
text-decoration:blink;
}
a:hover{
color:#000;
text-decoration:overline;
}

「a」については、ちょっと特殊です;;
これだけ、名前の中で「:」が使ってある・・・。
でも、これは定型文みたいなものなので、これはこういうものでしょうがないみたいです。


では、今日はここまで。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。