| ・ |
ドキュメントセンターを初めてご利用する方や運営方針についての基本的な姿勢をご覧になりたい方へ。
|
| ご利用の皆様から多く寄せられる質問にお答えしています。 |
|
| ・ |
ディーエーオフィスなどが利用する用語に関する解説を行います。
|
|
|
|
 | |
スタイルシートの基本的な適用方法 |
スタイルシートを用いるために必要なコードは、HTML上に直接記載する方法と、別ファイルにまとめる方法があります。最初は、HTML上に直接記載する方法が簡単で学びやすいと思いますが、慣れたら別ファイルにまとめる方が有利であることに気付きます。HTML上に直接記載する方法も、HEADに書く方法と、当該箇所で指定する方法があります。
! 例1) 一番簡単な当該部分への直接表記
{{
<span style="font-size:32px;">スタイルシートを適用した文字列です</span>
}}
どんなときでも、当該する場所へスタイルシートをとりあえず追加したいというような場合は、spanタグを用いて指定します。上述の例では、styleという属性を指定することで、文字の大きさを32pxにしていますが、たいていのタグに対して指定することができるので、例えば、下記のようなものも有効です。tableやbodyといったタグに対しても指定できます。
{{
<div style="font-size:32px;">スタイルシートを適用した文字列です</div>
<p style="font-size:32px;">スタイルシートを適用した文字列です</p>
<strong style="font-size:32px;">スタイルシートを適用した文字列です</strong>
<table style="font-size:32px;"><tr><td>スタイルシートを適用した文字列です</td></tr></table>
<body style="font-size:32px;">スタイルシートを適用した文字列です</body>
}}
! 例2) HTMLヘッダーに指定する例
ヘッダー内に指定する場合、大きく3つの考え方があります。(1)classと呼ばれる設定を作っておき、HTMLの当該箇所で呼び出す、(2)idと呼ばれる設定を作っておき、HTMLの当該箇所で呼び出す、(3)HTML内で呼び出されたタグに対して全て適用する、というものです。(1)classと(2)idを作って、それぞれHTMLの中で適用したい位置にて指定を呼び出すというのが通常の使い方ですが、(3)HTML内ですべて有効となる指定方法も併せて使うと、さらに便利な使い方ができます。
= classを用いる =
下記の例では、「teststyle」と呼ばれるclassをあらかじめ指定しておき、HTMLでpタグにて呼び出したものです。classは、多くの当該箇所に対して、一括指定するためにあります。
{{
<html>
<head>
<style type="text/css">
.teststyle { font-size: 24px; }
</style>
</head>
<body>
<p class="teststyle">こんにちは。</p>
<p class="teststyle">こんにちは。</p>
</body>
</html>
}}
= idを用いる =
下記の例では、「teststyle」と呼ばれるidをあらかじめ指定しておき、HTMLでpタグにて呼び出したものです。idは、一箇所だけに付与する番号で、HTML1枚あたりに1箇所のみと決められています。idはJavaScriptでも使われます。
{{
<html>
<head>
<style type="text/css">
#teststyle { font-size: 24px; }
</style>
</head>
<body>
<p id="teststyle">こんにちは。</p>
</body>
</html>
}}
= HTMLタグを指定し直す =
下記の例では、tableタグを指定された際の設定を変更する例です。例えば、当該するページにおけるtableタグの文字の大きさを、常に大きくしたい場合などに便利です。実践的な使い方として、bodyやdiv、spanといったタグに対して、標準的な文字の大きさを変更するために指定を組み入れたり、imgにおけるborder属性を常に0pxとする、formにおける改行の自動挿入をしない、リンク部分の挙動を変更するなどの例があります。
{{
<html>
<head>
<style type="text/css">
table { font-size: 32px; }
</style>
</head>
<body>
<table><tr><td>試験1</td><td>試験2</td></tr></table>
<table><tr><td>試験3</td><td>試験4</td></tr></table>
</body>
</html>
}}
---
主な使い方は上述のものになりますが、よく別途挙げられている例として、リンク、aタグに対する細かな指定があります。上述「HTMLタグを指定し直す」で、リンク部分の挙動を変更する例として紹介しましたが、aタグには4つの挙動があります。(1)初めてページを見たとき、(2)マウスカーソルがリンクに触れているとき、(3)リンクを選んだ後、(4)すでに見終えたリンクというものです。それぞれは別途指定することができます。下記に記述すべきスタイルシートを示します。
{{
<html>
<head>
<style type="text/css">
a:link { color:red }
a:visited { color:blue }
a:active { color:green }
a:hover { color:orange }
</style>
</head>
<body>
リンゴに関することは、<a href="http://www.apple.com/">アップル</a>;を見てください。
</body>
</html>
}}
! 別ファイルを用意する
別ファイルにまとめることで、スタイルシートを共有することができ、たくさんのページから同じスタイルシートの適用ができるようになります。今回紹介したものから主なものをすべて網羅した例を紹介します。
{{
= index.htmlの例 =
<html>
<head>
<link href="/img/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>リンゴに関することは、<a href="http://www.apple.com/">アップル</a>を見てください。</p>;
<p class="teststyle">バナナもありました。</p>
<p id="teststyle">パイナップルもありました。</p>
<table><tr><td>試験</td></tr></table>
</body>
</html>
}}
{{
= style.cssの例 =
a:link { color:red }
a:visited { color:blue }
a:active { color:green }
a:hover { color:orange }
table { font-size: 32px; }
p { font-size: 12px; }
.teststyle { font-size: 48px; }
#teststyle { font-size: 36px; }
}}
! 応用例
スタイルシートには、適用範囲について細かく指定することができます。classやidを用いることでも、十分な可能性を感じることでしょう。classやidでは、さらに細かな指定ができるので紹介します。
{{
p.teststyle { font-size: 48px; }
div.teststyle { font-size: 12px; }
p#teststyle { font-size: 48px; }
}}
上述の例では、pタグを用いた部分に対して、文字の大きさに48pxを指定していますが、一方でdivタグに対しては12pxを指定しています。pとdiv、それぞれのタグにおいて、classにteststyleを指定したとき、それぞれの指定がなされることになります。classの他、idでも同じ使い方ができますが、idは1箇所しか使えないので、classのような恩恵はありません。
|
| 文書番号 |
06651 |
| 日付 |
2006.05.04 |
| 参照数 |
374 |
|
