A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/style below:

<style>: ã‚¹ã‚¿ã‚¤ãƒ«æƒ…å ±è¦ç´ - HTML

<style>: スタイル情報要素

Baseline Widely available *

<style> は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

試してみましょう 
<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  This text will be green. Inline styles take precedence over CSS included
  externally.
</p>

<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

<style> 要素は文書の <head> 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて <link> 要素を使用することをより推奨します。

文書に複数の <style> および <link> が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。

<link> 要素と同じ方法で、 <style> 要素に media 属性を付けてメディアクエリーを含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。

属性

この要素にはグローバル属性があります。

media

この属性はスタイルを適用するメディアを定義します。値はメディアクエリーであり、省略した場合の既定値は all です。

nonce

style-src コンテンツセキュリティポリシー内のインラインスクリプトをホワイトリストに入れるために使われる暗号ノンス（ワンタイム番号）です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

title

この属性は代替スタイルシートのセットを指定します。

blocking Experimental

この属性は、クリティカルなサブリソースの取得時に、特定の処理をブロックすべきであることを明示的に示します。@import でインポートされたスタイルシートは、ふつうクリティカルなサブリソースと見なされますが、一方で background-image やフォントはそうとはみなされません。

非推奨の属性
type 非推奨;

この属性は指定すべきではありません。指定した場合、許可される値は空文字列か text/css と大文字と小文字を区別せずに一致するものだけです。

例 単純なスタイルシート

以下の例では、文書にとても単純なスタイルシートを適用します。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
結果 複数の style 要素

この例には、2 つの <style> 要素が含まれています。 — 競合する宣言は、詳細度が同じであれば、後の <style> 要素が優先されることに注意してください。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
結果 メディアクエリーが含まれるもの

この例では一つ前に作ったものに対して、2 番目の <style> 要素に media 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
結果 技術的概要 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4