classの使い方

CSSのクラスを学ぼう！初心者向け基本ガイド

クラスはウェブページの部分に名前をつけることができます。この名前のことをクラス名と言います。
つけた名前（=クラス名）を使って特定の部分を飾ったり、デザインしたりすることができます。

CSS のクラスセレクター (class selector) は、 class 属性の内容に基づいて要素を選択します。
参考：mdn web docs

クラス名は、HTMLの部分に特別な名前をつけることができます！例えば、「header（class=”header”）」や「sidebar（class=”sidebar”）」のような名前をつけることもできます。

クラスを使うと、ウェブページの特定の部分にだけデザインをあてることができます！文字の色を変えたり、背景をきれいな色にしたり、大きさを変えたりすることができるんです。

同じ名前のクラスに同じデザインを適用できます。

まずは、クラスを使う部分に名前を決めよう！例えば、写真の部分に「photo」という名前をつけましょう！

<div class="photo">
  <!-- ここに写真を追加するコードを書こう！ -->
</div>

次に、CSSを使ってクラスをデザインしよう！「photo」という名前に特別なデザインをかけるために、CSSを使います。

.photo {
  border: 2px solid #ff0000; /* 枠線を赤色にする */
  border-radius: 10px; /* 角を丸くする */
  box-shadow: 5px 5px 10px #888888; /* 影をつける */
}

プレビュー⇩

クラスを複数の要素で使えるので、同じデザインを効率的に適用することもできます。
クラスを組み合わせて、独自のスタイルを作り出すこともできるます。

クラスは１つだけでなく、複数の部分に使うこともできます。他にもたくさんのデザインを再現できるので、試してみるととても楽しいです！

クラスを使ってウェブページにデザインをあてることで、おしゃれなウェブページを作ることができます。クラスの使い方をマスターして、自分だけの素敵なウェブページを作ってみましょう！