超初心者のためのCSS入門「CSSを自分で書くには？」

ブログの見た目を決めるのはCSSです。
逆に言うと、CSSが上手く書けるかどうか、でブログの見た目は決まると言っていいでしょう。
今回は「CSSは自分で書けない」という方のために、CSSを自分で書くにはどうすればいいか、というのを記事にしてみたいと思います。

CSSの書式を理解する

CSSの書式は至ってシンプルです。

セレクター{
プロパティ名:値;
}

改行は無くても大丈夫ですが、見辛くなるので入れることをオススメします。
ちょっと専門用語が出てきたので解説しましょう。

「セレクター」の基本

右クリックでソースを見てみると、<div> ～ </div>だとか、<a href"～"> ～ </a>だとか、HTMLタグが沢山書かれているかと思います。
その各タグごとに見た目を設定するのがCSSです。
セレクターとは、どのタグを対象にするか、を指定するものです。

最も基本的なセレクターは3種類あります。

1…タグ名で指定する
これはdivとかaとかpとか、HTMLのタグ名そのものを指定するセレクターです。
例をあげるとこんな感じです。

div{
color:black;
}

このCSSは、全てのdivタグの文字色を黒にしますよ、という意味です。
タグ名で指定すると、全ての同じタグ名の要素に適用されます。


2…IDで指定する
右クリックでソースを見たときに、たまに<div id="～">というように、idが付けられている要素があるかと思います。
一番分かりやすいのはヘッダーの部分ではないでしょうか。
ベーシックスキンだと、
<div id="overHeader">　だとか、<div id="header">　と書かれている部分があるはずです。
通常は同じIDの要素は2つ以上書いてはいけないことになっています(アメブロのルームでは平気で同一IDの要素を沢山書いちゃってますが、ホントはよくない)ので、IDで指定すると、特定の一つの要素に対してCSSを書くことができます。
IDで指定するときは、ID名の前に「#」を付けます。
例をあげるとこんな感じです。

#header{
background-color:black;
}

このCSSは、IDがheaderの要素の背景色を黒にする、という意味です。


3…クラス名で指定する
ソースを見たときに、たまに<div class="～">というように、クラス名が付けられている要素があります。
クラス名はCSSのために定義するもので、例えばサイドバーのタイトル部分(「記事一覧」「アーカイブ」など)のように、同じ見た目の設定をする必要がある複数の要素があるときに、それらに同じクラス名をつけてクラス名でセレクターを指定してCSSを書く事で、一度に複数の要素に対して同じ設定を適用することができます。
一つの要素に複数のクラス名を付けることも可能で、その場合は<div class="a b">というように、半角スペースを間に入れます。
この要素は「a」というクラス名と「b」というクラス名を持つことになります。
セレクターをクラスで指定するときは、クラス名の前に「.」を付けます。
例をあげるとこんな感じです。

.menu_title{
background-color:black;
}

このCSSは、menu_titleというクラス名が付けられている要素の背景色を黒にする、という意味です。


以上が基本的な3つのセレクターです。
ここまで書いておいてアレなんですが、もっと砕いて書いた記事をみつけましたので、イマイチ解らないという方は
http://www.shoshinsha.com/hp/ref/css/css_selecter.html
こちらもごらんください。

「セレクター」の応用

特定の要素一つだけのスタイルを決めたい！という時はidを設定してあげれば楽なんですが、アメブロではそう簡単にはいきません。
HTMLはアメブロ側が勝手に書いちゃうので、自分でIDを設定することはできませんから・・・。
そこで、IDが付けられていない要素を絞り込むためには、覚えておきたい2つの基本テクニックがあります。

1…複数のセレクターを使う
基本の項目でお話したセレクターを同時に2つ使います。例えば

h4.menu_title{
background-color:black;
}

こうすると、h4タグのなかでクラス名がmenu_titleのものに絞られます。
divタグでクラス名にmenu_titleが付けられている要素があっても適用されません。
さらにクラス名を2つ指定することもできます。

h4.menu_title.new{
background-color:black;
}

こうすると、h4タグのなかで、menu_titleとnewの両方のクラスを持った要素だけ指定することができます。


2…親子関係を指定する
HTMLソースを見ると、要素の中に要素が入っていて、さらにその中にまた要素が入っていることがわかります。
例えば分かりやすい例で言うと、ヘッダーのブログ名が書かれている場所は、

<div id="header">
<h1>ブログ名</h1>
</div>

という構造になっています。
つまり、#header要素の中にh1が入っている(ちなみにこれを「ネストされている」と言います)状態です。
この場合「h1は#headerの子供である」と言います。
この親子関係も、CSSのセレクターで指定することができます。
親子関係を指定する場合、親セレクターと子セレクターの間に半角スペースを入れます。

親セレクター 子セレクター{
プロパティ名:値;
}

こんな感じです。
具体例としては、

#header h1{
display:none;
}

これは、IDがheaderの要素の中にあるh1タグを非表示にする、という意味です。
なんとなく解ってきましたでしょうか？

では引き続き、プロパティと値についてお話します。

プロパティと値

プロパティとは、わかりやすく言うと「設定項目」のことです。
例えば文字の色とか、縦と横の幅とか、隣の要素からどれくらい距離を離すとか、枠に線を入れるかどうかなど、本当にたくさんの設定項目が存在します。
これらを全て覚えるのはムリですので、
http://www.tagindex.com/stylesheet/properties/
ここを参考にしましょう。
セレクターを書いたら｛｝で閉じて、そのカッコの中に適用したい設定を書きます。
設定は、プロパティ名の後にコロン(「:」←これ。下にヒゲが無い方)を書き、続いて指定する値を書き、その後にセミコロン(「;」←これ。下にヒゲがある方)を書きます。
一度に複数の設定を書く事も可能です。例えば、

#header h1{
color:white;
background-color:black;
}

このように書くと、IDがheaderの要素の中にあるh1タグに対して、文字色を白に、背景色を黒に設定することができます。

プロパティと値に関しては、特にこれ以上の難しいことはありません。
プロパティは実際にCSSを書いてみて、それぞれのプロパティのクセというか特性に慣れてくれば、特に文法で難しい部分は一切ありません。

では最後に、実際にトライしてみましょう！

実際にやってみる

フリースペースを使って実際にCSSを書いてみましょう。
まず、練習用にHTML要素を作ってみます。次のようにフリースペースに書いてみてください。

<div class="test1">テスト１</div>

作れたら保存して、「デザインの変更」から「CSSの編集」を選んでみましょう。
一番下にスクロールさせて、一番最後に書き加えてください。
では、この「テスト１」と書かれた部分の背景色を黒に、文字色を白にしてみましょう。


どうですか？


できましたか？

今回はここまでにして、答えは次回書くことにします。
次回の「超初心者のためのCSS入門」をお楽しみに！