JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

埋め込みCSSの書き方とサンプルコード｜style要素の属性も解説

埋め込みCSS（Embedded CSS）とは？

CSSのルールを<style>要素を使ってHTML文書の中に直接記述する手法を、埋め込みCSSと呼びます。<style>タグは、<head>〜</head>タグの内側に配置するのが決まりです。ここで定義したスタイルは、その文書内にあるすべての該当要素に対して適用されます。

外部のCSSファイルを読み込む方法と違い、1つのHTMLファイルだけで完結するため、小規模なページや学習用のサンプルを作るときに便利です。

埋め込みCSSのサンプルコード

以下は、埋め込みCSSを使った具体的な例です。このコードでは、ページ全体の背景色がオレンジ色になり、見出し（h1）は黄色の文字で左側に30pxの余白が付きます。

<!DOCTYPE html>
<html>
   <head>
      <style media = "all">
         body {
            background-color: orange;
         }
         h1 {
            color: yellow;
            margin-left: 30px;
         }
      </style>
   </head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

style要素の主な属性

<style>タグで指定できる主な属性は、次の2つです。

属性値説明
typetext/cssスタイルシートの言語をコンテンツタイプ（MIMEタイプ）として指定します。必須属性とされています。
mediascreen
tty
tv
projection
handheld
print
braille
aural
all		文書を表示する対象のデバイス（メディアタイプ）を指定します。デフォルト値は「all」で、省略可能な属性です。

補足：media属性の値には古い仕様に基づくものが含まれています。現在のHTML5では、音声出力を表す「aural」は非推奨となり、「speech」に置き換えられました。また、現代のWeb制作では、メディアクエリ（@media）を使って画面サイズやデバイスごとにスタイルを切り替えるのが一般的です。

  1. HTMLのbase要素のtarget属性とは？リンクのデフォルト表示先を一括設定する方法

    base要素のtarget属性とは HTMLの<base>要素におけるtarget属性は、ドキュメント内に含まれるすべてのハイパーリンクに対して、デフォルトの表示先（ターゲット）を一括して設定するための属性です。各リンクに個別にtarget属性を書かなくても、<base>要素で一度指定しておけば、ページ全体のリンクの開き方を統一できるのが大きな特徴です。 基本構文 target属性の基本的な構文は以下のとおりです。 <base target=_blank|_self|_parent|_top|frame> target属性に指定できる値 target属性

  2. HTMLのbase要素におけるhref属性の使い方｜ベースURLの設定方法を解説

    base要素のhref属性とは HTMLの<base>要素におけるhref属性は、ドキュメント内のすべての相対URLに対する基準URL（ベースURL）を設定するための属性です。<base>要素は通常、<head>セクション内に一度だけ記述します。 たとえば、ベースURLをhttps://example.com/tutorialsと設定した場合、/html、/java、/jqueryといった相対URLは、最終的に次のように解決されます。 https://example.com/tutorials/html https://example.com/tutoria