スタイルシートマニア

ホームページカスタマイズ Tips

文字の色を変更してみる

CSSの初期設定でサイト全体の文字色を設定しましたが、ここでは部分的に色を変えてみましょう。

見出しの文字色を変えてみます。

h1 {
color: #f00;
}

h2 {
color: #00f;
}

これでh1タグでマークアップされた文字色は赤、h2タグでマークアップされた文字色は青に変わります。

コメント(0)

スタイルの適用先指定方法Ⅴ

文書の持つ木構造からは取得できない性質に対してスタイルを適用させる方法です。

擬似クラス

具体的には、

a:link（リンクを示す）
a:visited:（すでに見たリンク先）
a:hover（カーソルが上にある状態）
a:active（マウスボタンが押された状態）

などがあります。

aタグ関係は頻繁に使うので覚えておきましょう。特にa:hoverはナビゲーションには必須です。

擬似要素

:first-letter（ブロックレベル用の１文字目に適用）
:first-line（ブロックレベル用の１行目に適応）
:before（contentsプロパティで直前に追加される要素に適用）
:after（contentsプロパティで直後に追加される要素に適用）

コメント(0)

スタイルの適用先指定方法Ⅳ

子孫セレクタ

これは適用先を指定するときに、「要素Ａの中の要素Ｂに適応させる」っという方法です。

例えば、class=”box”の中のpタグは全部上下に1emのmarginを付けたい時なんかはこれを使うと便利です。

書式としては、セレクタ名との間に半角スペースを入れます。

記述例

.box p {
margin-top: 1em;
margin-bottom: 1em;
}

これは、Ａの中のＢの中のＣの中のＤっといった感じであればあるだけ増やせますが、あまり使いすぎると今度は仕様変更するときなど、どこに何が適応されているのか分からなくなるので、適材適所！case　by　case！で上手く使い分けるようにしましょう。

追々記事にしていきますが、デフォルトの状態だとpタグにはすでにmarginがついています。

これは何かとうっとおしいのでリセットするように設定します。

コメント(0)

スタイルの適用先指定方法Ⅲ

クラスセレクタ

idの時と同じようにclass属性の値が指定されている要素を適応先として指定する方法です。
平たく言うと、適応させたい要素にclass=”名前”っと書いてスタイルを適応させる方法です。ちなみにidセレクタに関しても同じです^^;

書式としては、頭に（.）ドットを付けて名前を付て名前を付けます。

例えば、
.box01 {
      width: 515px;
      padding-left: 10px;
      margin: 80px 0px;
}

コメント(0)

スタイルの適用先指定方法Ⅱ

idセレクタ

これはid属性が指定されている要素を適応先として指定する方法です。

書式としては、頭に#を付けてidの名前を付けます。

例えば
#h1-title {
      background: url(../img/h1-title.gif) no-repeat;
      width: 515px;
      height: 25px;
      margin-bottom: 5px;
}

ちなみにidは一ページ（サイト単位ではない）に一つしか使用できないのでご注意ください。
もし複数使用したい場合は、classを使いましょう。

コメント(0)

スタイルの適用先指定方法Ⅰ

セレクタの基本

CSSの書き方は、まずスタイルの適用先を記述して、{～}内にスタイルを記述するという形式になっています。
このスタイル適用先を「セレクタ」と呼びます。

このセレクタにもいろいろな種類と指定方法がありますが、もっとも基本となるのは要素名（pタグなど）をそのままセレクタとして指定する方法です。

例えば、body要素にスタイルを指定してみます。

body {
      color: #333333;
      font-size: 13px;
      line-height: 1.6em;
      letter-spacing: 0.11em;
}

っといった感じで記述します。
全ての要素に適用させたい場合は、*（アスタリクス）を使います。
また、pとh1とbodyに同じスタイルを適用させたい場合は,カンマで区切って記述すると簡単になります。

body, h1, p {
margin: 0px;
padding: 0px;
}

コメント(0)

古いバージョンのブラウザにCSSを適用させない方法

以前、CSSのデメリットで記事にした通り、CSS未対応のブラウザは大変厄介なのでこれらのブラウザにはCSSを読み込ませないようにします。

実は先日の記事に書いた@importでCSSを読み込ませることで、古いブラウザにはCSSを読み込ませないようにすることができます。
この際@importの書式は、@import url(“base.css”)のようなurl()ではなく、@import “base.css”という書式にしなければいけません。

しかし、これだけではNetScape４の初期あたりは@import命令でブラウザがクラッシュしてしまうので、media属性にscreenと記述するとNetScape４をはじいてくれます。

コメント(0)

CSSファイルを読み込む

さて実際にCSSをサイト内に取り入れて見ましょう。

方法としては、３つあります。

１．CSSファイルを読み込む

もっとも基本的な方法で、link要素のhref属性の値にCSSファイルのURLを指定して読み込ませます。
このとき、link要素を複数書けば、その数だけCSSファイルを読み込ませることができますが、現在の作成方法はHTML側からの指定するCSSファイルは一つにしておくというのが主流です。
これはHTML側で「読み込み用.css」を読み込ませてその中から@import命令で各CSSファイルを読み込むという方法です。
これを発見したときは、目から鱗でした（笑）

記述例

２．head要素内にstyle要素を入れてCSSを記述

これは、titleタグなどを記述する場所と同じところに記述する方法です。
Yahoo!なんかはこれを使って、つらつらと。。。長々と。。。沢山書いてHTML内に全てのスタイルを書いています。
ある意味すごいです（笑）
一度Yahoo!に行ってソースを見て見るのも良いかもしれません。
IEなら右クリックでソースを表示を選択するとソースを見ることができます。
その他ブラウザでも表示からソースの表示を選択するとソースを見ることができます。
IEの場合、ソースを表示するソフトがメモ帳になるので、charsetがeucの場合文字化けして表示されますのでご注意を！

なお、この方法をとる場合は、type=”text/css”を指定する必要があります。
それに、コメントタグ <!– –> で囲うと本当のコメントとして処理される可能性があります。

記述例

@import”import.css”;

</head>
３．タグの中に直接記述

XHTMLで使えるほとんどのタグにはstyle属性を指定して、その値を直接記述することができます。
また、;（セミコロン）で区切れば、複数のスタイルを指定することができます。
ただし、タグに直接スタイルを記述するということはHTML内にレイアウトをするという記述が組み込まれてしまうことになる上、CSSを使っている意味が全くなくなるのでこの方法はとりあえず試しに変えてみるなどの、テストだけで使うことをおすすめします。

記述例
<h1 style=”font-size:18px color:#ff0000″;>見出し</h1>
ちょっと便利なCSS

media属性を指定することにより、CSSの適用対象となる出力先を設定できます。
例えば、パソコン用のscreen、プリント用のprintなどがあって、これを使えばprint用のCSSを別に用意して、読み込ませることが可能になります。
更に、Netscape4.XにCSSを読み込ませないための方法としても使われています。

コメント(0)