WordPressテーマの作り方 » スタイルシート初歩の前

スタイルシートの役割は、Webサイトの表示方法を決めることです。下図のように、htmlソースのタグに対して、それぞれどのような方法で表示するのかをスタイルシートに記述します。

左がhtml、右がcssの例です。左右のファイルの対応が分かるように、色を付けています。

css_introduction

スタイルシートを追加することで、ページのタイトルに色をつけたり、フォントの種類、レイアウトなどを指定できます。何も指定しないと、

というシンプルすぎるデザインのWebが出来上がります。そこで、スタイルシートを適用すると

というページが出来上がります。スタイルシートを適用するためには
・スタイルシートを作成する（拡張子 css）
・htmlヘッダ部分に、作成したスタイルシートを読み込む命令を書くこと
で適用できます。読み込む命令は、次の通りです。

<link href="cssファイルへの相対パス" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

スタイルシートの役割について、イメージを持って頂けましたでしょうか？CSSの説明をしているサイトは数多ありますが、その中でも下記homepageは分かり易いです。

なお、htmlの規格はときどき改訂されており（2012年6月現在はhtml5）、それに伴ってCSSで使えるスタイルの指定子も変更されています。