2025年8月7日木曜日

W3.CSS コンテナーの使い方と塗りつぶし色の指定方法

コンテナーとカラー

コンテナーで表示してる
塗りつぶし色の指定方法

塗りつぶし色指定はなし

二つ目の赤色コンテナーです

h3タグに緑色指定しました

三つ目の青色コンテナーです

pタグに黄色指定しました

ソース　コード

cssの指定方法で、よく使われているクラスについて具体的に解説してください。

CSS（Cascading Style Sheets）のクラスは、HTML要素にスタイルを適用するための強力な方法です。クラスを使うと、複数の要素に同じスタイルを適用したり、特定の要素にのみスタイルを適用したりできます。

クラスの指定方法

クラスは、HTMLとCSSの両方で指定します。

1. HTMLでのクラスの指定

HTML要素に class 属性を追加して、任意の名前をつけます。この名前は複数指定することも可能です。

HTML
<p class="highlight">この段落はハイライトされます。</p>

<p class="highlight bold-text">この段落はハイライトされ、太字になります。</p>

2. CSSでのクラスの指定

CSSでは、クラス名の前に ドット（.） をつけて指定します。

CSS
/* highlightというクラスを持つ要素にスタイルを適用 */
.highlight {
  background-color: yellow;
}

/* bold-textというクラスを持つ要素にスタイルを適用 */
.bold-text {
  font-weight: bold;
}

よく使われるクラスの例

ここでは、実際のウェブサイトでよく見かけるクラスの例をいくつか紹介します。

レイアウト関連

ウェブサイトのレイアウトを整えるためによく使われるクラスです。

.container: コンテンツを中央に配置し、左右に余白を設けるためのクラスです。ウェブサイトの主要なコンテンツを囲む際によく使われます。
.row / .col: グリッドレイアウトシステムで使われるクラスです。コンテンツを列（col）に分け、それをさらに行（row）でまとめることで、柔軟なレイアウトを実現します。

コンポーネント関連

特定の部品（コンポーネント）にスタイルを適用するためのクラスです。

.button: ボタンにスタイルを適用するためのクラスです。ホバー時のアニメーションやクリック時の効果などをまとめて設定できます。
.card: 画像やテキストをまとめたコンポーネントにスタイルを適用するためのクラスです。角を丸くしたり、影をつけたりすることで、見た目を整えます。

ユーティリティ関連

特定の小さなスタイルを適用するためのクラスです。他のスタイルと組み合わせて使うことが多いです。

.text-center: テキストを中央揃えにするためのクラスです。
.m-1 / .p-2: 余白（マージンやパディング）を設定するためのクラスです。数字は余白のサイズを表します。
.hidden: 要素を非表示にするためのクラスです。

クラスを使用するメリット

再利用性: 一度CSSでクラスのスタイルを定義すれば、同じクラス名をHTMLの複数の要素に適用できます。
管理のしやすさ: スタイルを変更したい場合、CSSのクラスの定義を修正するだけで、そのクラスが適用されているすべての要素に反映されます。
柔軟性: 複数のクラスを1つの要素に適用することで、異なるスタイルを組み合わせることができます。