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

HTMLでスタイルシートを使用する方法｜CSSの3つの記述方法と実例

スタイルシートは、HTML文書が画面上でどのように表示されるかを記述するために使用されます。CSSを活用すれば、HTML要素に対してさまざまなスタイルプロパティを簡単に指定できます。各プロパティは「名前」と「値」のペアで構成され、コロン（:）で区切って記述します。

CSSをHTMLに適用する3つの方法

HTML文書の中でCSSを使用するには、主に次の3つの方法があります。

  • 外部スタイルシート：スタイルルールを独立した.cssファイルとして定義し、HTMLの<link>タグを使って文書に読み込みます。複数ページで共通のデザインを管理したい場合に最適です。
  • 内部スタイルシート：HTML文書のヘッダー部分（<head>内）に<style>タグを記述してスタイルルールを定義します。単一ページだけで完結するスタイルに向いています。
  • インラインスタイルシート：style属性を使って、HTML要素に直接スタイルを記述します。特定の要素だけに個別のスタイルを適用したい場合に便利です。

なお、複数のプロパティを宣言する場合は、それぞれをセミコロン（;）で区切る点に注意してください。style属性を使えば、HTML要素や属性に手軽にCSSを追加できます。以下は、インラインスタイルシートで文字色を設定する例です。

HTMLでスタイルシートを使用する方法｜CSSの3つの記述方法と実例

サンプルコード

次のコードを実行すると、HTMLページにスタイルシートを追加することができます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML style sheet</title>
   </head>

   <body>
      <h1 style="color:red">
         Heading
      </h1>
      <p style="color:blue">
         This is demo text
      </p>
   </body>
</html>

この例では、<h1>要素の文字色を赤（red）、<p>要素の文字色を青（blue）に設定しています。このようにstyle属性を利用することで、要素ごとに異なるスタイルを簡単に適用できます。

実行結果

HTMLでスタイルシートを使用する方法｜CSSの3つの記述方法と実例

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali