CSSの埋め込み（内部スタイルシート）の基本と使い方
CSSは、HTML文書内の<style>タグの中に直接記述することで埋め込むことができます。この方式は「内部スタイルシート」と呼ばれ、外部CSSファイルを別途読み込む必要がないため、単一ページの表示速度向上が期待できます。
ただし、内部スタイルシートはブラウザにキャッシュされないため、ページがリクエストされるたびにスタイルが再度読み込まれるという点には注意が必要です。動的なスタイル定義には向いていますが、複数ページで共通のデザインを使う場合は、外部CSSファイルとして分離する方が効率的です。
内部スタイルシートは、<head>タグ内に配置した<style>タグの中に記述します。
基本構文
CSSをHTMLに埋め込む際の基本的な構文は以下の通りです。
<style> /*宣言*/ </style>
記述例1：テキストとボックスのスタイリング
以下の例では、article要素の文字スタイルと、div要素で作成したボックスの装飾を内部スタイルシートで定義しています。
<!DOCTYPE html>
<html>
<head>
<style>
article {
font-size: 1.3em;
font-family: cursive;
}
div {
float: left;
margin-left: 20px;
width: 30px;
height: 30px;
background-color: lightgreen;
box-shadow: 8px 5px 0 2px lightcoral;
}
</style>
</head>
<body>
<article>デモ用テキスト</article>
<div></div>
<div></div>
</body>
</html>
出力結果
上記のコードを実行すると、次のように表示されます。
記述例2：隣接セレクタを使った応用スタイル
次の例では、隣接兄弟セレクタ（div + div）を活用し、同じdiv要素でも位置によって異なる背景色・角丸・影を適用しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
margin-left: 20px;
width: 60px;
height: 30px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: lightgreen;
box-shadow: inset 5px 0 lightcoral;
}
div + div {
background-color: lightblue;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
出力結果
上記のコードを実行すると、次のように表示されます。
-
CSSの埋め込み（内部スタイルシート）の基本と使い方
CSSは、HTML文書内の<style>タグの中に直接記述することで埋め込むことができます。この方式は「内部スタイルシート」と呼ばれ、外部CSSファイルを別途読み込む必要がないため、単一ページの表示速度向上が期待できます。 ただし、内部スタイルシートはブラウザにキャッシュされないため、ページがリクエストされるたびにスタイルが再度読み込まれるという点には注意が必要です。動的なスタイル定義には向いていますが、複数ページで共通のデザインを使う場合は、外部CSSファイルとして分離する方が効率的です。 内部スタイルシートは、<head>タグ内に配置した<style>タ
-
CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法
CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro