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

HTMLの要素にインラインCSSスタイルを適用する方法

HTML要素に直接CSSを記述してスタイルを適用する方法を「インラインスタイル」と呼びます。インラインCSSスタイルを設定するには、style属性を使用します。以下がその基本構文です。

構文

<element style="mystyles">

ここで mystyles の部分には、1つ以上のCSSプロパティを指定します。複数のプロパティを設定したい場合は、セミコロン（;）で区切って記述します。

使用例

次のコードを実行すると、HTML要素にインラインCSSスタイルを適用できます。この例では、h1要素に対して文字色を白、背景色を黒に設定しています。

<!DOCTYPE html>
<html>
   <body>
      <h1 style = "color:white;background-color:black">Tutorialspoint</h1>
      <h2>Simply Easy Learning</h2>
      <p>We provide free learning content.</p>
   </body>
</html>

ポイント

インラインスタイルは、特定の要素だけに手軽にスタイルを適用できるのがメリットです。一方で、コードの再利用性や保守性が低下しやすいというデメリットもあります。スタイルの記述量が増えてきた場合は、外部スタイルシート（CSSファイル）や内部スタイルシート（<style>タグ）の活用も検討するとよいでしょう。

  1. HTMLで内部CSS（スタイルシート）を使う方法をわかりやすく解説

    内部CSSとは？CSSはHTML文書にさまざまな方法で適用できます。その一つが「内部CSS（Internal CSS）」と呼ばれる手法で、<style>タグを使用するのが特徴です。<style>タグは<head>〜</head>タグの中に記述します。この方法では、1つのページに対して個別のCSSスタイルを定義することが可能です。外部スタイルシートファイルを作成せずに手軽にスタイルを適用できるため、単一ページのみで完結するデザインや、簡単なデモ・テストページを作成する際によく使われます。サンプルコード以下のコードを実行すると、HTMLで内部CSSを

  2. HTMLでインラインCSS（スタイルシート）を使う方法を徹底解説

    インラインCSSとは？ HTMLでインラインCSSを使用するには、style属性を使います。style属性は、個々の要素に対して直接スタイルを指定するための属性です。font-family（フォントの種類）、font-style（フォントのスタイル）、text-decoration（文字装飾）、direction（文字の方向）など、さまざまなCSSプロパティと組み合わせて利用できます。 style属性の注意点 style属性で指定したスタイルは優先度が最も高く、他のスタイル指定を上書きします。具体的には、以下のようなスタイル指定よりも優先されます。 <style>タグ内に記述さ