トップ > CSS > はてなブログ制作者のためのCSS講座（1）

はてなブログ制作者のためのCSS講座（1）

CSS ブログの作成

ここでは、ブログのカスタマイズでよく使用するCSSを連載形式で紹介していきます。CSSの記述方法が分からなくなったときに、簡易的なリファレンスとして活用してください。

 

第1回目は、CSSを記述するときの基本的なルールを紹介します。CSSの記述に慣れていない方は、以下の解説でCSSの基本を学んでおいてください。

 

 

CSSの基本

CSSは、プロパティ:値;という形で記述するのが基本です。プロパティの部分には「どの書式を指定するか？」を記述します。続いて、:（コロン）を記述し、その後に書式の値を記述します。最後の;（セミコロン）は、それぞれの書式指定を区切る役割を担っています。

 

■CSSの記述方法

プロパティ:値;

 

また、CSSでは改行や半角スペースが無視される仕様になっています。一般的には、:の後に「半角スペース」を挿入し、それぞれの書式指定を「改行」して記述するケースが多いようです。

font-size: 16px;
color: red;

 

もちろん、必ずしもこの記述方法に従う必要はありません。以下に示した例のように、「半角スペース」や「改行」を省略して記述しても、問題なく書式指定を行えます。この記述方法は、style属性でCSSを指定する場合などに活用できます。

font-size:16px;color:red;

 

 

style属性を使ったCSSの記述

各要素の書式を指定する最も簡単な方法は、HTMLにstyle属性を追加する方法です。この場合は、HTMLの中にCSSを直接記述することになります。たとえば、h3要素の書式をstyle属性で指定するときは、以下のようにCSSを記述します。

<h3 style="font-size:24px;">各要素にstyle属性でCSSを指定</h3>

 

ただし、この方法で書式を指定できるのは、「style属性を記述した要素」に限定されることに注意してください。このため、そのつどstyle属性を記述する必要があり、あまり実用的な使い方とはいえません。例外的に、通常とは異なる書式で要素を表示したい場合にのみ、style属性を活用するのが一般的です。

 

 

外部CSSの記述

ブログのデザインを指定するときは、HTMLではなく、外部CSSで書式指定を行うのが基本です。「はてなブログ」の場合は、「自分のID名」から「デザイン」のメニューを選択し、アイコン のアイコンをクリックします。続いて、「デザインCSS」の項目を選択すると、外部CSSの編集画面を表示できます。

外部CSSの表示

 

外部CSSの編集画面

 

 

要素名を対象にCSSを指定

特定の要素に対して書式を一括指定するときは、

要素名 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

という形でCSSを記述します。たとえば、全てのh3要素を対象に書式指定を行うときは、以下の例のようにCSSを記述します。

h3 {
  font-size: 30px;
  background: #ccc;
}

 

 

クラス名を対象にCSSを指定

 HTMLのclass属性で指定されるクラス名に対して書式を一括指定するときは、クラス名の前に.（ピリオド）を付けて、

.クラス名 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

という形でCSSを記述します。たとえば、midashiというクラス名が指定されている要素に書式指定を行うときは、以下の例のようにCSSを記述します。

.midashi {
  font-size: 30px;
  background: #ccc;
}

 

 

ID名を対象にCSSを指定

HTMLのid属性で指定されるID名に対して書式を指定するときは、ID名の前に#（シャープ）を付けて、

#ID名 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

という形でCSSを記述します。たとえば、navigationというID名が指定されている要素に書式指定を行うときは、以下の例のようにCSSを記述します。

#navigation {
  font-size: 30px;
  background: #ccc;
}

 

 

セレクタの組み合わせ

 外部CSSを記述する際に、要素名やクラス名、ID名を組み合わせて記述することも可能です。ここでは、一般的によく使用される記述方法のみ解説しておきます。

 

セレクタ　セレクタ

複数のセレクタを半角スペースで区切って記述すると、「○○」の中にある「△△」という具合に書式指定の対象を限定することが可能となります。たとえば、

.entry-content h3 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

とCSSを記述すると、「entry-contentクラス」の中にある「h3要素」だけを書式指定の対象にできます。

 

セレクタ,　セレクタ

セレクタを,（カンマ）で区切って記述すると、それぞれのセレクタに同じ書式を指定できます。たとえば、

h1, h3 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

とCSSを記述すると、「h1要素」と「h3要素」の両方に同じ書式を指定できます。

 

要素名.クラス名

「要素名」と「.クラス名」を続けて記述すると、「○○のクラス名」を持つ「△△要素」に限定して書式を指定できます。たとえば、

h1.entry-title {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
      ︙
}

とCSSを記述すると、「クラス名がentry-titleのh1要素」だけに書式を指定できます。クラス名が異なるh1要素（またはクラス名がないh1要素）は書式指定の対象となりません。

 

 

疑似要素と疑似クラス

そのほか、疑似要素や疑似クラスを使用することも可能です。以下に、よく使用される疑似要素、疑似クラスを紹介しておくの参考にしてください。

 

疑似要素

「要素の先頭」に文字などを自動挿入したい場合は、:beforeの疑似要素を使用します。挿入する内容は、contentプロパティで指定します。たとえば、 

h3:before {
 content: "＊";
 font-size: 18px;
}

とCSSを記述すると、h3要素の先頭に「＊」の文字を、文字サイズ18pxで自動挿入することが可能となります。

これと同様に、「要素の末尾」に文字などを挿入できる:afterという疑似要素も用意されています。

 

疑似クラス

状況に応じて指定する書式を変化させるときは、疑似クラスを使用します。疑似クラスは、リンクを示すa要素の書式指定に利用するのが一般的です。

 

　　:link 未訪問のリンク
　　:visited 訪問済みのリンク
　　:hover マウスオーバー時の表示
　　:active クリック時の表示

 

たとえば、以下のようにCSSを記述すると、未訪問のリンクは「青色」、訪問済みのリンクは「緑色」、マウスオーバー時は「赤色」、という具合にリンクの文字色を変化させることが可能となります。

a:link {
 color: blue;
}
a:visited {
 color: green;
}
a:hover {
 color: red;
}

 

次回は、CSSで色を指定する方法について解説します。文字色や背景色などの書式を指定するときに欠かせない記述方法となるので、よく学習しておいてください。

 

（本連載の目次）

　CSSの記述方法CSSの記述方法

　色の指定方法色の指定方法

　文字の書式指定文字の書式指定

　ボックスの書式指定ボックスの書式指定

　角丸、影の書式指定角丸、影の書式指定

　回り込みの書式指定回り込みの書式指定

　リストの書式指定リストの書式指定

　その他その他