CSS スタイルを HTML ページに追加する方法: 初心者ガイド

WBOY

リリース： 2024-09-05 06:48:03

オリジナル

932 人が閲覧しました

How to Add CSS Styles to an HTML Page: A Beginner

はじめに

あなたはキッチンで料理を準備する準備ができていると想像してください。肉、野菜、スパイスなどの主要な材料 (HTML) が目の前にあります。しかし、これらの食材を料理の傑作に変えるには、調理テクニック、調味料、盛り付けが必要です。ここで CSS (Cascading Style Sheets) が活躍します。 CSS は Web の「味付けアート」のようなものです。CSS がなければ、HTML ページは栄養価が高いものの、少し味気ないものになってしまいます。このガイドでは、CSS を使用して Web サイトを「味付け」し、単純な HTML 構造を次のようなものに変換する方法を説明します。視覚的に魅力的で調和のとれたページ。

CSS とは何ですか?

CSS (Cascading Style Sheets) は、Web デザインの「レシピ本」です。キッチンでさまざまな調理テクニックを使用して独特の風味を実現できるのと同じように、CSS を使用すると、HTML ページを無数の方法でスタイル設定できます。CSS の簡単な歴史: 1990 年代に誕生した CSS は、Web ページのデザイン方法に革命をもたらしました。「プレゼンテーション」(CSS) からの「構造」(HTML)。

CSS の使用例
ソースを使って料理に彩りを加えるのと同じように、CSS を使用すると、テキストに色を付けたり、要素を創造的に配置したり、ウェブページに芸術的なタッチを加えることができます。

HTML ページに CSS を追加する方法
キッチンで料理を作るのにさまざまな方法があるのと同じように、HTML ページに CSS を追加するには主に 3 つの方法があります。各方法には、プロジェクトのニーズに応じて長所と短所があります。

インライン CSS

これは、料理に直接塩をひとつまみ加えるようなものです。ちょっとしたスタイルの調整には使えますが、ごちそう全体に味付けをする必要がある場合には理想的ではありません。

例:

<p style="color: blue;">Blue text</p>

ログイン後にコピー

長所: 使いやすく、小さな変更もすぐに行えます。
短所: 大規模なプロジェクトでは保守が難しく、頻繁に使用すると混乱が生じる可能性があります。

内部 CSS:

これは、調理する前に特定の材料をボウルでマリネすることに似ています。単一ページに特定のスタイルを使用しますが、すべての変更はそのドキュメント内で行う必要があります。

例:

<style>
  p {
    color: blue;
  }
</style>

ログイン後にコピー

長所: すべてのスタイルが 1 か所にまとめられており、制御が簡単です。
短所: 1 ページにのみ適用され、複数ページの Web サイトには理想的ではありません。

外部 CSS:

これは、瓶の中で特別なソースを準備し、それをさまざまな料理に使用するようなものです。サイトのすべてのページに適用できる個別のスタイルシートです。

例:

<link rel="stylesheet" href="styles.css">

ログイン後にコピー

長所: 再利用可能で管理が簡単で、大規模な Web サイトに最適です。
短所: 複数のファイルを管理する必要がありますが、汎用性を得るために支払う代償はわずかです。

レシピに従うのと同じように、CSS には完璧なデザインを作成するために知っておく必要がある基本的な構文があります。

セレクター

セレクターは、スタイルを設定したい特定の「要素」です。特定のタイプ (段落の場合は p など) のすべての要素を選択したり、クラス (.class-name) または ID (#id-name) を使用したりできます。

例:

p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#main-title {
  font-size: 2em;
}

ログイン後にコピー

プロパティと値

プロパティはスパイスのようなものです。プロパティは変更する内容 (色、フォントサイズなど) を指定し、値は使用しているスパイスの量または種類 (赤、16 ピクセルなど) です。

例:

p {
  color: red; /* Property: color, Value: red */
}

ログイン後にコピー

外部スタイルシートの作成
基本的な構文を理解したので、次は「秘密のソース瓶」を作成します。これは、すべての HTML ページに適用できる外部スタイルシートです。

外部スタイルシートを作成する手順

styles.css という名前の新しいファイルを作成します。スタイルの作成を開始します:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  line-height: 1.6;
}

ログイン後にコピー

を使用して CSS ファイルを HTML ページにリンクします。のタグ:

<link rel="stylesheet" href="styles.css">

ログイン後にコピー

HTML ページに CSS を追加する:

これは、単純な HTML ページと外部スタイルシートを組み合わせて完成した「料理」を作成する方法の実践的な例です。

HTML:

My First Styled Page <link rel="stylesheet" href="styles.css">

Welcome to My Web Kitchen

This is my first HTML page with style!

ログイン後にコピー

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
}

ログイン後にコピー

真の「ウェブシェフ」になるためのベストプラクティス。従うべきベストプラクティスをいくつか紹介します。

意味のあるクラス名を使用します:
よく書かれたレシピと同様に、クラス名はその目的を明確に説明する必要があります。

スタイルシートを整理します:
整理整頓されたキッチンのように、コードをクリーンでコメント付きに保ちます。

過剰なインライン CSS を避ける:
ソルトを過剰に適用しないのと同じように、インラインスタイルを適用しすぎないようにし、メンテナンス性を高めるために外部スタイルシートを優先してください。