HTML - CSS概要

■ページ目次

スタイル･シートの基本
文字列の指定
要素内の指定
ブロックの指定
ページ全体の指定
サイト全体の指定

■スタイル･シートの基本


 セレクター {プロパティ: 値; }

スタイルの定義には、つぎの方法があります。
1. 文字列の指定 ... <span>要素の内容として指定します。
2. 要素内の指定 ... HTMLのタグのstyle属性で、タグに直接指定します。
3. ブロックの指定 ... <div>要素の内容として指定します。
4. ページ全体の指定 ... <style>タグを使い、定義を直接、ページに埋め込みます。
5. サイト全体の指定 ... 定義を記述したファイルに対し、ページからその定義を呼び出します。

代表的なプロパティとその値の例です。

プロパティ	意味	値	指定例
font-family	フォント	"family-name", generic-family	"ＭＳゴシック"
font-size	文字サイズ	size	12pt
font-style	斜体	style	normal, italic, oblique
font-weight	太字	weight	normal, bold
color	文字色	color	blue
background-color	文字の背景色	color	blue
border	罫線	width style color	1px solid blue

Top

■文字列の指定

<span>要素の内容として指定します。


 <span style="プロパティ: 値;">  
       文字列
 </span>

■例題

見出しタグにスタイルを指定した例です。(hn11.html)


 <!-- hn11.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1><span style="color: blue; background-color: yellow">わたしのホーム･ページ
                     </span></h1>
 <h2><span style="color: green">ページの内容</span></h2>
 <h3>家族</h3>
 <h4>ペット</h4>
 <h5>犬</h5>
 <h6><span style="color: red; font-size: 20pt">ホイップ</span></h6>
 <span style="color: red; font-size: 16pt">女の子</span>で、
                     誕生日は<span style="color: blue; font-size: 16pt">12月14日</span>です。
 </body>
 </html>

□ 実行結果

Top

■要素内の指定

HTMLのタグのstyle属性で、タグに直接指定します。
```
 <タグ style="プロパティ: 値;"  ... >
```

■例題

見出しタグにスタイルを指定した例です。(hn21.html)


 <!-- hn21.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1 style="color: blue; background-color: yellow">わたしのホーム･ページ</h1>
 <h2 style="color: green">ページの内容</h2>
 <h3>家族</h3>
 <h4>ペット</h4>
 <h5>犬</h5>
 <h6 style="color: red; font-size: 20pt">ホイップ</h6>
 <span style="color: red; font-size: 16pt">女の子</span>で、誕生日は<span style="color: blue; font-size: 16pt">12月14日</span>です。
 </body>
 </html>

□ 実行結果

Top

■ブロックの指定

<div>要素の内容として指定します。


 <div style="プロパティ: 値;">  
       文字列
 </div>

■例題

見出しタグにスタイルを指定した例です。(hn31.html)


 <!-- hn31.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <div style="color: aqua">
 <h1 style="color: blue; background-color: yellow">わたしのホーム･ページ</h1>
 <h2 style="color: green">ページの内容</h2>
 <h3>家族</h3>
 <h4>ペット</h4>
 <h5>犬</h5>
 <h6 style="color: red; font-size: 20pt">ホイップ</h6>
 </div>
 <div style="color: white; background-color: black">
 <span style="color: red; font-size: 16pt">女の子</span>で、誕生日は<span style="color: blue; font-size: 16pt">12月14日</span>です。
 </div>
 </body>
 </html>

□ 実行結果

Top

■ページ全体の指定


 <style type="text/css"> 
       スタイルの指定
 </style>

■例題

見出しタグにスタイルを指定した例です。(hn41.html)


 <!-- hn41.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <style type="text/css">
   h1 { color: blue; background-color: yellow; }
   h2 { color: green; }
   h6 { color: red; font-size: 20pt; }
   div#heading { color: aqua; }
   span.birthday { color: blue; font-size: 16pt; }
   #sex { color: red; font-size: 16pt; }
   .string {color: white; background-color: black; }
 </style>
 </head>
 <body>
 <div id="heading">
 <h1>わたしのホーム･ページ</h1>
 <h2>ページの内容</h2>
 <h3>家族</h3>
 <h4>ペット</h4>
 <h5>犬</h5>
 <h6>ホイップ</h6>
 </div>
 <div class="string">
 <span id="sex">女の子</span>で、誕生日は<span class="birthday">12月14日</span>です。
 </div>
 </body>
 </html>

□ 実行結果

Top

■サイト全体の指定

定義を記述したファイルに対し、ページからその定義を呼び出します。
```
 <link rel="stylesheet" href="uri" type="text/css"/> 
```

■例題

見出しタグにスタイルを指定した例です。(hn51.html)

□css51.css


 /* css51.css */
 h1 { color: blue; background-color: yellow; }
 h2 { color: green; }
 h6 { color: red; font-size: 20pt; }
 div#heading { color: aqua; }
 span.birthday { color: blue; font-size: 16pt; }
 #sex { color: red; font-size: 16pt; }
 .string {color: white; background-color: black; }

□hn51.html


 <!-- hn51.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <link rel="stylesheet" href="css51.css" type="text/css"/>
 </head>
 <body>
 <div id="heading">
 <h1>わたしのホーム･ページ</h1>
 <h2>ページの内容</h2>
 <h3>家族</h3>
 <h4>ペット</h4>
 <h5>犬</h5>
 <h6>ホイップ</h6>
 </div>
 <div class="string">
 <span id="sex">女の子</span>で、誕生日は<span class="birthday">12月14日</span>です。
 </div>
 </body>
 </html>

□ 実行結果

Top