CSS（スタイルシート）の書き方についての説明と例文

HTMLでスタイルを呼び出す記述については、ここまで読んで頂いた方には少し理解して頂けたと思いますので、ここからはスタイルシートの書き方について簡単に説明させて頂きます。

しかし、CSSといってもHTMLと同じく全てを覚えるとなるとそれなりの勉強が必要となってきますので、当サイトでは、HTMLと同じく私が使っている範囲でCSSの説明をさせて頂きますので、予めご了承下さい。

CSSは、

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値;}

という基本的なルールに従って記述する必要があります。

複数のスタイルを定義する場合は、

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値; 属性:値; 属性:値;}

という感じで増やしていきます。

詳しい例文は、要素（タグ）、クラスセレクタ、IDセレクタの違いの説明と一緒に紹介させて頂きます。

要素（タグ）・クラスセレクタ・IDセレクタの違い

• 要素（タグ）
  
  これはHTMLのタグを定義する場合に使います。私の使うHTMLタグといえば、bodyタグやpタグ、divタグなどがありますが、そういったタグを同じデザインにしたい場合にこれを使います。
  例えばbodyタグで同じ書式にしたい場合などの記述方法は、
  
  
  body{
  color:#000000;
  font-size:12px;
  font-family:"Verdana","Tahoma","ＭＳ ゴシック";
  }
  
  のような感じになります。
  これは文字の色が#000000で文字サイズが12pxで表示されるフォントの種類がVerdana＞Tahoma＞ＭＳ ゴシックで順番に優先的に表示するという命令を出しています。（このようにいくつものフォントを定義することには、多くのPCの環境でデザインを崩さないという意図があります。）
  ここではbodyタグを例に挙げましたが、bodyタグだけではなく、pタグやdivタグなども同じスタイルを用いたい場合には、,（コンマ）で区切って記述すれば指定した全てのタグを同じデザインにすることもできます。例えばこんな感じです。
  
  
  body,p,div{
  color:#000000;
  font-size:12px;
  font-family:"Verdana","Tahoma","ＭＳ ゴシック";
  }
  
  と記述するとbodyタグ、pタグ、divタグのそれぞれのタグで同じスタイルが適用されます。
  このように　{　の前にタグの名前を記述するとHTMLで使っているタグにスタイルを適用することができます。ちなみに私の場合は、要素（タグ）の定義はbody、a、h1、h2、h3、hr、ul、ol、li、imgぐらいしか行なっていません。
  
  
• クラスセレクタ
  
  タグにスタイルシートを定義してしまうとHTMLでそのタグを使った際に、毎回同じ表示になってしまうという不便が生じます。そこでそうならないためにクラスセレクタと使います。使い方は、自分で決めた名前の前に.（ピリオド）を付けるだけです。
  例えばmenuという名前でクラスセレクタを定義する場合は、こんな感じになります。
  
  
  .menu{
  font-size:14px;
  }
  
  そうするとmenuを指定した部分のタグだけ文字サイズを14pxにすることができます。
  一応、クラスセレクタを呼び出すHTMLの記述方法をdivタグを例に挙げておくと、
  
  
  <div class="manu">ここが14pxの文字サイズになる</div>
  
  という感じになります。これはHTMLリファレンスでも度々説明しているので、必ずそちらも合わせてご覧下さい。
  このクラスセレクタが最も自由度が高いので一番使うことが多いと思います。
  
  
• IDセレクタ
  
  IDセレクタは、基本的にクラスセレクタと使い方はほとんど変わりませんが、自分で決めた名前の前は　#　になります。また、クラスセレクタとは違いHTMLで一度しか同じidを使えません。そんな使い勝手からページデザインの外枠を作る際などに用いることが多いです。
  使い方はこんな感じです。
  例えば、headerという名前でIDセレクタを定義する場合には、
  
  
  #header {
  width: 800px;
  }
  
  という感じになります。これはheaderを指定した部分のタグだけ横幅を800pxにするという命令を出しています。
  一応、IDセレクタを呼び出すHTMLの記述方法をdivタグを例にあげて書いておくと、
  
  
  <div id="header">ここの間は800pxの横幅になる</div>
  
  という感じです。これもHTMLリファレンスでも度々説明しているので、必ずそちらも合わせてご覧下さい。
  

スタイルシートについての詳しい書き方となるともっと多くの情報が必要だと思いますが、私の使っているCSSとなると正直このくらいです。しかしながら、HTMLと同様、これだけの知識で問題なくブログカスタマイズを行なえているというのも事実です。スタイルシートについてもっと詳しく知りたい方は、『CSS 書き方』や『スタイルシート 書き方』などで検索して自分で調べてみて下さい。