１ 基本を頭に叩き込みたい
はてなブログでは、ブログページのデザインをカスタマイズするのに、CSSコードを記述できます。前に利用していたgooブログでは、これができなかったので、大変便利な機能に感じられます。
デザイン設定画面のカスタマイズタブ内に『デザインCSS』という、テキストエディタみたいなツールが用意されています。そのデザインCSSウィンドウを開いて、そこにCSSコードを書き込みます。コードを一から手作業で書き込むので、当然、CSSの知識が必要になります。でないと、コードは書けませんから。
そのCSS習得の第一歩として、まずはCSSの基本を自分の頭の中に叩き込みたいと思います。学んだ知識を頭の中で整理して、記憶として定着させるには、ブログ記事にまとめる作業は、一つの有効な方法です。というのも、ネットへの公開となれば、正確な記事を書くように心がけて、真剣になるからです。単に解説を読んで済ませるのではなく、ぼんくら頭脳への記憶定着を図るには、これぐらいしないとダメです。
ブログに書き留めておけば、ど忘れしたときに、またいつでも見直しもできますし。
２ CSSとは
CSS（シーエスエス）は、正式な名称は Cascading Style Sheet （カスケーディングスタイルシート）ですが、よく略してCSSと呼ばれています。これは、Webページの見た目、見栄えを整えるコンピューターへの命令文、コンピューター言語です。Webページの土台であるHTML文書に適用することで、ページのスタイルをデザインする役割があります。
ちなみに、確かにこれも言語の一種ではありますが、繰り返し処理や緻密な条件分岐などに対応していないため、CSSはプログラミング言語とまでは言えません。
CSSの記述場所として、HTML内に記述する方式もありますが、HTMLファイルとは別に、CSSファイルを作って記述するのが、最近の推奨方式です。はてなブログにおいても、記事編集画面内に直接記述せずに、専用ツール『デザインCSS』に記述するのが通常です。
なお、CSSファイルを別に作った場合、本来ならば、HTMLファイル側での読み込み設定が必要ですが、はてなブログではそれが不要です。デザインCSSにコードを書き込み、「変更を保存する」ボタンをクリックすれば、それによって自動的にブログ記事に適用されます。
３ CSS記述の形、書き方
CSSコードは、『セレクタ』『プロパティ』『値』の３つで構成されており、この３つを並べて記述します。
具体的には、次の【１】か【２】のいずれかの形で記述します。
【１】
h1{color:red;}
【２】
p{
font-size:18px;
}
【１】と【２】は、コードを１行に収めるか複数行に分けるかの形式的な違いだけなので、いずれの形でも支障ありません。
上記のCSS記述形は、「どの要素（セレクタ）の、何（プロパティ）を、どうする（値）」という内容になっています。
【１】だと、
h1（見出し）のcolor（文字色）をred（赤）にする、と書いています。
【２】ならば、
p（段落）のfont-size（文字の大きさ）を18px（１８ピクセル）にする、となっています。
このうち、セレクタとは、CSSの適用対象のことです。すなわちセレクタは、HTMLのどの要素を対象としているのかを示しています。上記の例では、h1見出し要素やp段落要素をセレクタとしており、それぞれの要素に対して、CSSスタイルが適用されます。
４ セレクタの種類
セレクタには、いろんな種類、書き方があります。何をセレクタにするか、その書き分けによって、いろいろとCSSの適用対象を指定できます。そのように、多種類のセレクタがある中で、今回は、基本的なセレクタの記述方法のみを掲げておきます。最も頭に叩き込んでおきたいのが、次に掲示の基本的なセレクタの書き方です。これだけ覚えておくだけでも、かなりの場合に対応できます。今回の記事で、最も書きたかったのが、この基本的なセレクタの記述方法です。
■ 要素セレクタ（タイプセレクタ）
タグ名をセレクタにするものです。h1やpといったタグ名を、そのままセレクタにします。h1というセレクタならすべての<h1>見出しに、pというセレクタならすべての<p>段落に、CSSスタイルが適用されます。これが最も基本形でしょうか。
■ classセレクタ
タグにclassと呼ばれる任意の名前を付けることよって、そのclass名の要素だけを狙い撃ちしてCSSを適用できます。classセレクタとするには、class名の頭にドット「.」を付けます。「.entry-pokpok{・・・} 」とすると、entry-pokpokと名付けられた要素が適用対象となります。
数あるセレクタの種類の中で、最もよく使われると思われる種類です。
■ idセレクタ
タグにidと呼ばれる任意の名前を付けることよって、そのid名の要素にCSSを適用できます。idセレクタとするには、id名の頭にハッシュ「#」を付けます。「#entry-hogehoge{・・・} 」とすると、entry-hogehogeと名付けられた要素が適用対象となります。
classとidの違いは、同じclass名は１つのページで複数使うことができるのに対し、idの場合は１ページに１つだけの使用に限られるという違いがあります。
■ 親子セレクタ（子孫セレクタ）
親要素◯の中の子要素◯を対象としてCSSスタイルを適用というものです。適用対象の限定、絞り込みができます。例えば、ページ内に複数ある<a>タグのリンクテキストの内、特定のリンクのみの文字色の変更などができます。
.entry-footer a{・・・} というように、親（.entry-footer）と子（a）の間に半角スペースを入れます。
■ 複数セレクタ
<h1>と<h2>の両方に、共通のCSSスタイルを適用する場合のセレクタです。この場合、h1,h2{・・・}というように、複数の要素をカンマで区切ります。カンマを付けるか付けないかで、親子セレクタと複数セレクタの違いとなります。
５ 余談
今回は、高レベルな内容ではなく、基本的な事項だけですが、少し気合を入れて記事にまとめました。さぁてぇ、かなり老朽化して、ぼんくら化したこの頭脳に、どれぐらいがインプットされて、どれぐらいの定着がされたでしょうか。忘れないうちに、デザインCSSでコード記述の実践をやっておくのがいいかもしれません。畳の上の水練はやめて、実践練習が一番身に付きます。
私の場合、仕事としてのWeb作成ではなく、お遊びでのブログ作成なので、楽しんでやってます。健全な娯楽、楽しみの一つです。
なお、今回の記事で参照した解説書は、次の書籍です。
それではまた次の記事で。
goosyun
