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

インラインCSSの基本と使い方|style属性でHTML要素にスタイルを適用する方法

HTML文書にスタイルを関連付ける方法には、主に「インラインCSS」と「外部CSS」の2種類があります。この記事では、そのうちのインラインCSSについて、基本的な書き方から具体例まで詳しく解説します。

インラインCSSとは?

インラインCSSとは、HTML要素のstyle属性を使って、その要素に直接スタイルルールを記述する手法です。ここで定義したスタイルは、記述したその要素にのみ適用され、他の要素には影響しません。

インラインCSSの基本構文

任意のHTML要素にstyle属性を追加することで、インラインスタイルを定義できます。一般的な構文は以下の通りです。

<element style = "...スタイルルール...">

style属性の詳細は次の表をご覧ください。

属性名値説明
style スタイルルール style属性の値は、複数のスタイル宣言をセミコロン(;)で区切って組み合わせたものになります。

インラインCSSの使用例

それでは、実際のコード例を見てみましょう。以下の例では、h2要素に対して文字色を指定しています。

<html>
    <head>
    </head>
    <body>
        <h2 style = "color:#800000;">これはインラインCSSです</h2>
    </body>
</html>

このコードでは、style属性にcolor:#800000;というスタイル宣言を指定することで、h2要素内のテキストがマルーン色(#800000)で表示されます。

複数のスタイルを指定する場合

セミコロン(;)で区切ることで、1つのstyle属性に複数のスタイル宣言をまとめて指定できます。

<h2 style = "color:#800000; font-size:24px; text-align:center;">複数のスタイルを適用</h2>

インラインCSSのメリットと注意点

インラインCSSは手軽に使える反面、以下のようなメリット・デメリットがあります。

メリット

  • 特定の要素だけに素早くスタイルを適用できる
  • 外部ファイルを読み込む必要がないため、単一のHTMLファイルで完結する
  • デバッグ時にどの要素にどんなスタイルが効いているか分かりやすい

注意点

  • スタイルの再利用が難しく、コードの重複が発生しやすい
  • HTMLとCSSが混在するため、保守性が低下する可能性がある
  • 大規模なサイトでは、外部CSSや内部CSS(styleタグ)の活用が推奨される

用途に応じてインラインCSSと外部CSSを使い分けることで、より効率的でメンテナンスしやすいWebページを作成できます。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"