スタイルシートの例

  1. スタイルシートの使用例
  2. marginとpadding
  3. セレクタ

スタイルシートの使用例

ブラウザによる表示

スタイルシートの使用例

スタイルシート(Cascading Style Sheets, CSS)

段落１

段落２

1列2列3列
1-11-21-3
2-12-3
3-13-3
4-14-24-3

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset=Shitf_JIS">
  <link rel="stylesheet" href="style-example.css" type="text/css">
  <TITLE>スタイルシート</TITLE>
</head>

<body>
<h1>スタイルシート</h1>
<h3>スタイルシート(Cascading Style Sheets, CSS)</h3>

<p>
段落１
</p>
<p class="c1">                              ⇐ p.1 { background-color: #ffffdd; ... }
段落２
</p>

<table>
  <tr>
     <th>1列</th><th>2列<th>3列</th>
  </tr>
  <tr>
     <td>1-1</td><td rowspan="2">1-2</td><td>1-3</td>
  </tr>
  <tr>
     <td>2-1</td><td>2-3</td>
  </tr>
  <tr>
     <td colspan="2">3-1</td><td
  id="Gray">3-3</td>               ← ID="Gary"
  </tr>
<tr>
     <td>4-1</td><td>4-2</td><td>4-3</td>
  </tr>
</table>

スタイルシート

body {
    background-color: #eeffff;      ページの背景色
}
p.c1 {                              <p class="c1">に適用
    background-color: #ffffdd;
    color: red;
    font-size: 20px;
    padding: 10px 20px;
}
table {
    border: solid 1px red;          境界線: 幅1px，赤色の実線
    border-collapse: collapse;
}
td {
    border: solid 1px #0000ff;
    padding-left: 30px;
    padding-right: 30px;
}
#Gray  {                            ID="Gray"に適応
    background: gray;
    color: white;
}

[先頭へ]

marginとpadding

書き方

周囲（上下左右）のマージン（値）を指定する． 次の３通りの指定方法がある． padding についても同様
      margin: 上下左右;
      margin: 上下  左右;
      margin: 上　右　下　左;

marginとpaddingの違い

h1 {
    margin: 10px;
    padding: 20px;
    background: yellow;
}

見出しh1領域(黄色）の周囲(外側)に10pxの隙間を空けけ，
内側に20pxの間隔を空ける。

<h1>見出し</h1>


見出し
 
h1 {
    margin: 10px 20px 30px 40px;   上　右　下　左
    padding: 0px 20px;             上下　左右
    background: yellow;
}

<h1>見出し</h1>


見出し
 
個々に指定することもできる

h1 {
    margin-left:   40px;
    margin-right:  30px;
    margin-top:    10px;
    margin-bottom: 20px;
    padding: 0px 20px;
    background: yellow;
}
 
<h1>見出し</h1>


見出し

[先頭へ]

セレクタ

タイプ・セレクタ

/* H2とH3要素に適用 */
H2, H3 { background: green; }

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

見出し1

見出し2

見出し3

/*
     div 要素の直接の子である
     em 要素に適用
*/
div > em {
   background: yellow;
}
 
<div>
  div要素の
  <em>直下の子要素1</em>
  <p>
    適用されない：
    <em>div要素の孫要素</em>
  </p>
  div要素<em>直下の子要素2</em>
</div>


div要素の直下の子要素1
適用されない：div要素の孫要素
div要素直下の子要素2
 
/* div 要素内の em 要素に適用 */
div em {
   background: yellow;
}
 
<div>
  div要素の
  <em>直下の子要素1</em>
  <p>
    適用される：
    <em>div要素の孫要素</em>
  </p>
  div要素<em>直下の子要素2</em>
</div>

div要素の直下の子要素1&
適用される：div要素の孫要素
div要素直下の子要素2
 
/* h2 要素直後の div 要素に適用 */
h2 > div {
   background: yellow;
}
 
<h2>見出し</h2>
 <div>
  H2直後のdiv要素
 </div>
 <div>
  H2直後のdiv要素ではない
 </div>
 
見出し
H2直後のdiv要素
H2直後のdiv要素ではない
 
/* h1 要素の後の h2 要素に適用 */
h1 ~ h2 {
   background: yellow;
}
 
<h2>見出し(H2)[1]</h2>
<h1>大見出し(H1)</h1>
  以下のh2要素に適用される
<h2>見出し(h2)[2]</h2>
  次のh2にも適用される
<h2>見出し(h2)[3]</h2>
 
見出し(h2)[1]
大見出し(H1)

以下のh2要素に適用される
見出し(h2)[2]
次のh2にも適用される
見出し(h2)[3]

クラス・セレクタ

/* div要素のAクラスを定義 */
div.A {
     background: yellow;
}
/* div要素のBクラスを定義 */
div.B {
     border: solid 1px;
     background: orange;
}
 
<div class="A">
  div要素(クラスA)
</div>
<div>
  クラス指定のないdiv要素
</div>
<div class="B">
  div要素(クラスB)
</div>
div要素(クラスA)
クラス指定のないdiv要素
div要素(クラスB)

IDセレクタ

/* Xという名前のIDを定義 */
#X {
    color: red;
    font-weight: bold;
    font-size: 18px;
   }
 
<div id="X">
  id名をX(id="X")としたdiv要素。
  この要素内の全体に適用される。
</div>
<div>
  idを指定しないdiv要素
</div>
この文章では、
<span id="X">span要素</span>
にid名として"X"を指定している。
id名をX(id="X")としたdiv要素。この要素内の全体に適用される。
idを指定しないdiv要素
この文章では、span要素にid名として"X"を指定している。

[先頭へ]