|
スタイルシートの設定 ↓ 前のページへ
スタイルシートとは、スタイルシートの一種の CSS（Cascading Style Sheets）
を指していることが多いですが、実際はCSSだけではないので
使用するスタイルシートを<meta>タグを使って指定します。
<head> 〜 </head>内に記述してください。
記述しない場合でもブラウザが自動的に判別するようですが、文字化けなどが起こらないとも限りませんので記述しておいたほうが良いでしょう。
<meta http-equiv="Content-Style-Type" content="text/css">
このページの上へ
スタイルシートの書き方 ↓ 前のページへ
そのページのみに指定する場合は、<style> 〜 </style>を
<head>〜</head>内に記述します。
<style type="text/css"> 〜 </style>
このページの上へ
コメントとコメントアウト ↓ 前のページへ
上記のように<style>タグを使って記述する場合、スタイルシートに対応していないブラウザは、
ソースがそのまま表示される可能性があるので、
<!--〜-->でスタイルの設定をコメントアウトして、そのまま表示されるのを防ぎます。
<style type="text/css"><!--スタイルの指定--></style>
スタイルシートの編集をしやすいように、コメントを入れる場合、
/* と */ でコメントを挟みます。
<style type="text/css">
<!--
body { background-color:#ffffff; /*背景色*/
font-family: Arial,sans-serif; /*フォントの種類*/
color: #333333; /*テキストの色*/
}
-->
</style>
|
このページの上へ
スタイルシートの書き方 2 ↓ 前のページへ
複数のページにスタイルを適用させたい場合は、<link>タグで外部ファイルを読み込むようにします。この場合用意するファイルは、
テキストファイルに.CSSという拡張子をつけたファイルです。
例：style.txt→style.css
<head> 〜 </head>内に記述します
<link rel="stylesheet" href="ファイル名" type="text/css">
このページの上へ
タグに直接スタイルを設定する ↓ 前のページへ
特定の場所にのみスタイルを適用したい場合に、style属性を使ってタグに直接記述します。
<★ style="★"> 〜 </★>
<h2 style="background-color: #90ee90;">
スタイルシートの設定
</h2>
<p style="color: #800000">
特定の場所にのみスタイルを適用したい場合に、
<span style="color: #ff0000">style属性</span>
を使ってタグに直接記述します
</p>
|
サンプル
スタイルシートの設定
特定の場所にのみスタイルを適用したい場合に、
style属性
を使って
タグに直接記述します。
このページの上へ
テキストの色を指定する ↓ 前のページへ
文字色を指定します
color: ★
<head> 〜 </head>内に記述
<style type="text/css">
<!--
body
.sample1 { color:#ff0000 }
.sample2 { color:#008800 }
.sample3 { color:#ff00ff }
.sample4 { color:#008000 }
-->
</style>
|
<body> 〜 </body>内に記述
<p>
<span class="sample1">サ</span><span class="sample2">ン</span>
<span class="sample3">プ</span><span class="sample4">ル</span>
</p>
|
サンプル
サン
プル
このページの上へ
文字を装飾する ↓ 前のページへ
指定したテキストに、上線、下線、取り消し線、点滅などで装飾します。
text-decoration: ★
overline→上線
underline→下線
line-through→取り消し線
blink→点滅
none→装飾なし
<head> 〜 </head>内に記述
<style type="text/css">
<!--
body { background-color: #ffebcd }
.sample1 { text-decoration: overline}
.sample2 { text-decoration: underline}
.sample3 { text-decoration: line-through}
-->
</style>
|
<body> 〜 </body>内に記述
<p class="sample1>テキスト</p>
<p class="sample2>テキスト</p>
<p class="sample3>テキスト</p>
|
サンプル
これは overline
これは underline
これは line-through
このページの上へ
行間を指定する ↓ 前のページへ
行の高さを指定します。
指定しない場合、ブラウザが自動的に設定します。
line-height: ★
<head> 〜 </head>内に記述
<style type="text/css">
<!--
div {
font-size: ★px;
color: #★
}
.sanple1 { line-height: 2 }
-->
</style>
|
<body>〜</body>内に記述
<div class="sample1">コメント</div>
|
サンプル
|
これは指定なし（ブラウザが自動的に設定） あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ
これは行間を指定 あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ
|
このページの上へ
行揃えを指定する ↓ 前のページへ
text-align: ★
left→左寄せ
center→センタリング
right→右寄せ
<head> 〜 </head>内に記述
<style type="text/css">
<!--
.sample1 {
text-align: left
}
.sample2 {
text-align: center
}
.sample3 {
text-align: right
}
-->
</style>
|
<body> 〜 </body>内に記述
<div class="sample1">これは left</div>
<div class="sample2">これは center</div>
<div class="sample3">これは right</div>
|
サンプル
|
これは left
これは center
これは right
|
このページの上へ
テキストの縦方向の位置を指定する ↓ 前のページへ
vertical-align: ★
super→上付き文字
sub→下付き文字
top→上に揃える
middle→真ん中に揃える
bottom→下に揃える
<head> 〜 </head>内に記述
<style type="text/css">
<!--
.sample1 {
vertical-align: sub
}
.sample2 {
vertical-align: super
}
.sample3 {
vertical-align: top
}
.sample4 {
vertical-align: middle
}
.sample5 {
vertical-align: bottom
}
-->
</style>
|
<body>〜</body>内に記述
<p>これは指定なし（標準）</p>
<p>これは<span class="sample1">下付き文字</span>です。</p>
<p>これは<span class="sample2">上付き文字</span>です。</p>
|
サンプル
これは指定なし（標準）
これは下付き文字です。
これは上付き文字です。
このページの上へ
文字の間隔を指定する ↓ 前のページへ
文字と文字の間隔を指定します
letter-spacing: ★
<head> 〜 </head>内に記述
<style type="text/css">
<!--
p.sample1 { letter-spacing: normal }
p.sample2 { letter-spacing: 10px }
-->
</style>
|
<body> 〜 </body>内に記述
<p class="sample1">これは標準の文字間隔です</p>
<p class="sample2">これは文字の間隔を指定</p>
|
サンプル
これは標準の文字間隔です
これは文字の間隔を指定
このページの上へ
空白や改行を表示する ↓ 前のページへ
半角スペース、タブ、改行をそのまま表示させます。
white-space: ★
<head> 〜 </head>内に記述
<style type="text/css">
<!--
code {
white-space: pre
}
-->
</style>
|
<body> 〜 </body>内に記述
<code>テキストやソースなど</code>
サンプル
当サイトのソース表示は pre を使ってそのまま表示しています。
このページの上へ
縦書きで表示する ↓ 前のページへ
テキストを縦書きで表示します。
※ Netscape は対応していません。
writing-mode: ★
lr-tb→横書き（左から右、上から下）
tb-rl→縦書き（上から下、右から左）
<head> 〜 </head>内に記述
<style type="text/css">
<!--
body { line-height: 130% }
p#sample1 { writing-mode: lr-tb }
p#sample2 { writing-mode: tb-rl }
-->
</style>
|
<body> 〜 </body>内に記述
<p id="sample1">
</p>
<hr>
<p id="sample2">
</p>
|
サンプル
|
これは横書き（左から右、上から下）私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。
私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。
|
|
これは縦書き（上から下、右から左）私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。
私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。私の耳は貝の殻 海の響きを懐かしむ。
|
| 