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

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

内部CSSとは？

CSSはHTML文書にさまざまな方法で適用できます。その一つが「内部CSS（Internal CSS）」と呼ばれる手法で、<style>タグを使用するのが特徴です。

<style>タグは<head>〜</head>タグの中に記述します。この方法では、1つのページに対して個別のCSSスタイルを定義することが可能です。

外部スタイルシートファイルを作成せずに手軽にスタイルを適用できるため、単一ページのみで完結するデザインや、簡単なデモ・テストページを作成する際によく使われます。

サンプルコード

以下のコードを実行すると、HTMLで内部CSSを使用する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
     <style>
        h1 {color: red;}
        p {font-size: 12px;}
     </style>
   </head>

   <body>
     <h1>Tutorials</h1>
     <p>We provide free tutorials for engineers and professional.</p>
   </body>
</html>

コードの解説

  • h1 {color: red;} … ページ内のすべての<h1>要素の文字色を赤色に設定しています。
  • p {font-size: 12px;} … すべての<p>要素のフォントサイズを12pxに指定しています。

このように、<style>タグ内にセレクタとスタイルを記述するだけで、そのページ全体にスタイルが反映されます。複数ページで共通のスタイルを使いたい場合は外部CSSファイルの利用を検討しましょう。

  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