シェアする
Writing CSS with the style Tag - Japanese Only
みなさまどうも。いかがお過ごしでしょうか。
続きましてstyleタグを使用してCSSを記述してみましょう。
前の記事でも解説しましたが、基本的にstyleタグはhead要素の中に記述するのがルールとなっています。
styleタグの記述方法は以下です。
<style>
/* ここにCSSを記述 */
</style>
上記のようにstyleタグの中にCSSを記述します。
では先程の記事と同じようにp要素の文字サイズを18pxにして太字にしてみましょう。
<style>
p {
font-size: 18px;
font-weight: bold;
}
</style>
style属性に記述した場合と違い、今度はセレクタの指定が必要になりますので注意してください。
style属性にCSSを記述するとそのデザインが適用されるのはそのstyle属性が記述してある要素のみでしたが今度はすべてのp要素に指定したデザインが適用されます。間違いやすいところなので気をつけましょう。
では先程のHTMLファイルに組み込みしてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>
p {
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<p>p要素にスタイルを適用するよ</p>
<p>ここも影響をうけるよ</p>
</body>
</html>
これを保存してブラウザで開いてみましょう。すべてのp要素のデザインが変更されていればOKです。
HTML4.01やXHTML1.0ではstyle要素に『text/css』という値をとったtype属性を記述する必要がありました。
<style type="text/css">
p {
font-size: 18px;
font-weight: bold;
}
</style>
そしてHTML4.01の場合はCSSに対応していない古いブラウザ対応の為、style要素にHTMLのコメントアウトが記述されている場合があります。(注意点としてXHTML1.0ではHTMLでコメントアウトされた部分はCSSを含めた全ての部分がコメント扱いとなりますので、XHTML1.0では下記のようなコメントアウトは不可となります。)
<style type="text/css">
<!--
p {
font-size: 18px;
font-weight: bold;
}
-->
</style>
これらのこと全てはHTML5及び現行のブラウザでは必要ありません。何も考えずstyle要素内にCSSを記述すればOKです。ただし古いブラウザ対応されたウェブサイトを修正するときなどは必要な知識となりますので頭の片隅に置いておいてください。
styleタグを使用したCSS記述の方法は以上となります。
次の記事では外部CSSを読み込んでみましょう。ではでは～。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
