2024-03-24

HTMLにCSSを適用(読み込み)させる方法

HTMLにCSSを読み込み方法

CSS（スタイルシート、Cascading Style Sheets）は、ウェブページやHTML文書のスタイルやレイアウトを定義するための言語です。HTMLが文書の構造を定義するのに対し、CSSはその文書の外観や装飾を定義します。

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。そんな時に必要になってくるのがCSSです。 HTMLにCSSを読み込み方法、大きく分けて次の3つの方法があります。

  1. 外部CSSファイルを使う方法
  2. style要素を使う方法
  3. style属性を使う方法

1. 外部CSSファイルを使うHTMLにCSSを読み込み方法

外部のCSSファイルを作成し、HTMLファイルからそのCSSファイルをよみこんで定義方法です。同じCSSファイルを複数のページで再利用できます。

HTMLへの読み込みは、以下のようにします。HTMLファイルの基本的な構造の参考記事はこちらです。

1.1 link要素で外部CSSファイルを読み込む方法

head内にlink要素を使って読み込む外部のCSSファイルを指定します。複数のHTMLページで外部CSSファイルをを読み込めば、同じレイアウトや装飾になります。この方法を使うのが基本です。

link要素で外部CSSファイルを読み込むHTML記述例

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

※ 「href=”styles.css”」は外部CSSファイルです。

link要素で複数外部CSSファイルを読み込むHTML記述例

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

※ 「href=”css/styles.css”」では[css]はフォルダで[styles.css]は外部CSSファイルです。

1.2 外部CSSファイル内で外部CSSファイルを読み込む方法

外部CSSファイル内で「@import」ルールを使用して別の外部のCSSファイルを読み込むことできます。複数のCSSファイルを1つのファイルにまとめることも可能です。グーグルフォントほかのフォントCSSファイルなどを利用するためにおおく使用されてます。

外部CSSファイルから外部CSSファイルを読み込む例

<!-- CSSファイル -->
@import url('styles.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap') ;

2. style要素を使う方法

HTMLファイル内でstyle要素使用してCSSコードを直接記述する方法です。style要素使用してHTMLファイル内で外部のCSSファイルを埋め込むこともできます。この方法では複数HTMLファイルに同じレイアウトや装飾を適用するために同じCSSコードを記述する必要となります。

style要素を利用してスタイルを定義するHTMLの例

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSSコード */
	h1 {
            color: blue;
        }
    </style>
　　<style> 
　　　/* importルール */
　　　@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
　　</style>
</head>
<body>
    <!-- HTMLコンテンツ -->
</body>
</html>

3. style属性を使う方法

HTML要素に直接style属性を使用してCSSコードを直接記述する方法です。これはインラインスタイルも呼ばれます。この方法は、style属性を使った要素だけで有効になります。このため、一部の色を変えたいなど、ページの一部でスタイルを変更する時に利用します。

style属性を使用して要素にスタイルを適用する例

<!DOCTYPE html>
<html>
<head>
    <title>Inline Style Example</title>
</head>
<body>
    <!-- style属性を使用して文字の色とフォントサイズを指定 -->
    <p style="color: red; font-size: 18px;">This is a paragraph with inline styles.</p>

    <!-- style属性を使用して背景色と余白を指定 -->
    <div style="background-color: #f0f0f0; padding: 10px;">
        <p>This is a paragraph inside a div with inline styles.</p>
    </div>
</body>
</html>

関連タグ一覧

記事一覧へ