1.スタイルシート(CSS)とは

スタイルシート(Cascading Style Sheets)は、ウェブページのデザイン(見栄え)を定義・記述するための技法である。HTML文書の内容を「構造」と「見栄え」に分けることで、効率的なウェブ管理ができる。

HTML → ウェブページの構造(内容)を記述するもの
CSS → ウェブページのデザイン(見栄え)を記述するもの

スタイルシートを利用するメリット

・文字や画像の配置、行間などを細かく設定することができる。
・ページの内容とデザイン(見栄え)を、別々に管理することができる。
・デザインの変更を一括して行えるため、ページの管理が楽になる。


2.ボックス(ブロック)という考え方

ページにデザインを適用する場合は、ボックス(ブロック、かたまり)という単位で考えるとよい。 ある範囲にボックスを作りたい場合は、下図のように、<div>タグを使う。

見出しのボックス
文章のボックス
・・・・・・・・・・・・・
・・・・・・・・・・・・・



divタグを使って、全体をボックスにする例。

  <div>
    <h2>見出しのボックス</h2>
    <p>文章のボックス ・・・・・ </p>
  </div>

 

HTMLのタグは、ブロック要素とインライン要素に分けられる。

ブロック要素  → タグの前後に改行が入る。ブロックを形成するタグのこと。
インライン要素 → タグの前後に改行が入らない。要素は行の一部となる。

ブロック要素となるタグ

<H1> ~ <H6>、<P>、<BLOCKQUOTE>、<UL>、<OL>、<DIV> など

インライン要素となるタグ

<B>、<I>、<A>、<IMG>、<SPAN> など


3.スタイルシートの書き方


(1)スタイルシートを書く場所

ヘッダ部に <style> ~ </style> タグを置き、そこにスタイルを設定する。

<head>
<title>CSSの基礎知識</title>
<style>
 h2 { color : red ;   background-color : #ccffff ; }  
 p  { font-size : 90% ;  line-height : 150% ; }  

</style>
</head>



(2)要素(タグ)にスタイルシートを設定する方法

特定の要素(タグ)に対して、スタイルを設定する場合は次のように書く。
  (要素名) { (属性):(値); (属性):(値); ・・・ } 

 (例)見出し(h2)の文字を赤、背景色を水色、段落(p)の文字サイズを90%、行間を150%に設定する。  

<style>
 h2 { color : red ;  background-color : #ccffff ; }  
 p
  { font-size : 90% ;  line-height : 150% ; }  
</style>


<body>
  <h2>CSSの基礎知識</h2>
  <p>スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>
</body>



(3)クラス(Class属性)を設定してスタイルを適用する方法

要素(タグ)の種類にかかわらず、同一のデザインを適用したい場合は、クラスによる指定を行う。クラスを指定する場合は、半角のピリオドに続けてクラス名を書く。
  .(クラス名) { (属性):(値); (属性):(値); ・・・ } 

 (例) 「menu」クラスを指定した文字に対して、文字色を青に設定する。  

<style>
 .menu { color :blue ; }  
</style>


<body>
  <h4 class="menu">利用者処理メニュー</h4>
 
 <div class="menu">操作マニュアルの表示</div>
</body>



(4)要素(タグ)とクラスを組み合わせる方法

(a) 同一の要素(タグ)の中で、クラス指定のあるものだけにデザインを適用する。
  (要素名).(クラス名) { (属性):(値); (属性):(値); ・・・ } 

 (例) <p>タグを使用している段落の中で、「menu」というクラスのみにスタイル(青い文字)を設定する。  

<style>
 p.menu { color :blue ; }  
</style>


<body>
  <p class="menu">段落1 ここにデザインが設定される</p>
 
 <p>段落2 (ここには設定されない)</p>
</body>



(b) クラス内にある任意の要素(タグ)に対してデザインを適用する。
   .(クラス名)(半角スペース)(タグ名) { (属性):(値); (属性):(値); ・・・ } 

 (例) 「menu」クラスの中にある<h2>タグのみにスタイル(青い文字)を設定する。  

<style>
 .menu h2 { color :blue ; }  
</style>


<div class="menu">
  <h2>この見出しにデザインが適用される</h2>
 
 <p>・・・ 段落 ・・・</p>
</div>
<h2>この見出しには適用されない</h2>



(5)ID属性を設定してスタイルを適用する方法

一つのページの中で一箇所だけスタイルを設定する場合に指定する。指定するID名は文書内で「唯一」となる点に注意する。ID属性を指定する場合は、半角のシャープ(#)に続けてID名を書く。
  #(ID名) { (属性):(値); (属性):(値); ・・・ } 

 (例) ID「mainContent」を指定したブロックに対して、マージンを指定する。  

<style>
 #mainContent { margin-top: 20px ; }  
</style>

<body>
   <div id="mainContent">
       <h1>コンテンツ見出し</h1>
      
 <p>・・・ 本文 ・・・</p>

   </div>
</body>



上記(4)のクラスと同様に、ID属性と要素を組み合わせた指定も可能である。 
 (例) ID「navi」の中にある<h2>タグにスタイルを適用する。  

<style>
 #navi h2 { line-height: 120% ; }  
</style>

<div id="navi">
   <h2>ナビメニュー</h2>
   
<p>・・・ 本文 ・・・</p>
</div>
<h2>この見出しには適用されない</h2>



(6)スタイルシートを別ファイルとして設定する方法

複数のページに同一のスタイルを設定するような場合、スタイルシートの定義部分を別ファイルから読み込むことができる。指定方法は、次のようにヘッダ部の中に<link>タグを入れる。なお、指定するファイル名の拡張子は「css」にしておく。

<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" href="xxx.css">
</head>

xxx.css」ファイルの中には、スタイルシートの定義のみを入れる。<style>や</style>を書かない点に注意。