styleとは
- ここで説明する style とは次の語句からなるHTMLの要素です。
- style
- 読み: スタイル
意味: 物の型や種類、様式、流儀など
style要素の概要
この要素は、HTML文書に対する表示や、文書の見栄え等をデザインするための CSS を記述する領域となります。
style 要素は、head セクションの中に記述します。
この要素には、開始タグと終了タグが必要です。
<style> </style>
CSS を使って要素にスタイル付けを行う方法は、この要素を使用する以外にもありますので、 このページでは、他の方法についても予備知識として紹介しておきます。
style 要素で CSS を記述する
ここでは、HTML 文書の head 要素内に style 要素を記述してスタイルを設定してみます。 サンプルコードでは style だけを別のコードとして記述していますが、HTML のコードに当てはめて読んでください。
サンプルコード: CSS
<style>
.clsFontSample{
color: ##white;
background-color: ##gray;
}
</style>
サンプルコード: HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> タイトル </title>
<style>
...
</style>
</head>
<body>
<p class ="clsFontSample">
これはスタイル適用後のサンプルテキストです。
</p>
</body>
</html>
これはスタイル適用後のサンプルテキストです。
サンプルではテキスト色をホワイト、背景色をグレーにしています。
今回はセレクターに class 属性名 ( clsFontSample ) を指定してスタイル付けを行いましたが、
id 属性名でも 要素名でもセレクターに使用できます。
- id 属性名をセレクターに使用する場合は id属性名の前に ( # ) シャープを記述します。
- class 属性名をセレクターに使用する場合は class 属性名の前に ( . ) ピリオドを記述します。
- 要素名をセレクターに使用する場合は普通に要素名を記述します。
セレクターについて詳しく知りたい方は、 セレクターの使い方 のページを参照してください。
style 属性で CSS を記述する
ここでは、要素の style 属性に CSS を記述してスタイル付けを行ってみます。 これは、単独の要素のみにピンポイントとしてスタイル付けをする場合には便利です。
詳しくは、 style 属性 のページを参照してください。
サンプルコード: HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> タイトル </title>
</head>
<body>
<p style="background-color: ##blue; color: ##white; font-size: 150%;">
このテキストが style 属性を使用したサンプルです。
</p>
</body>
</html>
このテキストが style 属性を使用したサンプルです。
style を CSS ファイルから読み込む
ここでは、このページのファイルとは別のファイル ( 拡張子が .css ) を作成して、リンクからスタイルデータを読み込む方法を実践しています。
別の CSS ファイルからスタイルを読み込む利点としては、 コンテンツのフォーマットとして同じスタイルを多数のページに適用することができます。 これにより、1ページごとに CSS を記述しなくてもよりので、手間や労力の軽減とミスの防止にも役立ちます。
方法としては、まず、HTML 文書の head 要素の中に link 要素を追加します。
link 要素の rel 属性はファイルとの関係性を表し、href属性でcssファイルの参照URLを指定します。
<link rel="stylesheet" href="〇〇.css">
動作サンプルとして、実際にリンクしたCSSファイルの設定で、このページのヘッダーを青系色のグラデーション色に変更しています。 また、下記のサンプルテキストの文字にも影を付けています。
サンプルコード: sample.css ファイル
header{
color: ##navy;
background: linear-gradient(#6af,#37f);
}
#idShadow{
text-shadow: 20px 10px ##darkgray;
font-family: Impact;
font-size: 60px;
}
サンプルコード: HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> タイトル </title>
<link rel="stylesheet" href="./sample.css" />
</head>
<body>
<header>
このページのヘッダー部分にスタイル付けしています。
</header>
<p id="idShadow"> Sample Text YWORK </p>
</body>
</html>