この記事では、HTMLのclassを使って、どんなページでも簡単にデザインを変更する方法を学びます
<p> タグをデザインする
では早速以前作成した、HTMLの「絶品カレーの作り方」を使ってclassの使い方を学びましょう！
・HTMLの「絶品カレーの作り方」はこちらから→実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！
HTMLコードの中に <p> タグが３つあります
上の２つの <p> タグだけ、色と文字の大きさを変えたいのですが、
style.css で <p> タグをデザインします。cssファイルを開きましょう！
・cssファイルの作り方はこちらから→これで完璧！外部 CSS の作り方完全ガイド
<p> タグのみでデザインすると、
<p> タグは3つあるので、全ての <p> タグの色と文字の大きさが変わってしまいます。
classとは
class とは、複数のHTML要素に共通のデザインを適用するための名前です。
では、class名をつけましょう！
class名を付ける
html ファイルに切り替えます。上２つの<p>タグに名前を付けてあげましょう！
<p の後に半角スペースを入れます。次に class と入力すると、これですか？メニューが表示されるので、class 選択します。
“”が付いた表示になります
class のところは名前は何にしますか？という意味なので、
名前を付けてあげます。名前なのでなんでも良いです。練習なので、hanako(花子）でも大丈夫です！笑
茶色に変えたいので ” text-brown ” と私は入力しました！
２つ目の <p> タグにも同じ作業をして同じ名前を付けてあげましょう！
class 名が同じ text-brown になりました！次は css ファイルで、色と文字の大きさを変えてあげましょう！
更新して ⚪️ 白丸を X バツに変えましょう！
CSS の書き方
css ファイルに切り替えます。
・外部CSSの作り方はこちらから→これで完璧！外部 CSS の作り方完全ガイド
<p> タグの所を class 名である text-brown に変えます。名前の前にドット . を付けましょう！
. text-brown に変更しました。更新して Web表示させてみましょう！
class名を付けた上２つだけが、色と文字の大きさが変更されました！
text-brown（テキスト-ブラウン） という名前であって、文字をブラウンにするという意味ではありません。
color（色）の指定を blue（青）に指定すると
文字の色は指定されたblue（青）に変更されます。
今回は<p>タグを使って解説しましたが、他のタグでも同じようにclass名を付けて練習してみてくださいね。
まとめ
・class とは、複数のHTML要素に共通のデザインを適用するための名前
・css の書き方は、ドット . を前に付ける
・ class名を使えば、デザインが一気に変更できる
次回は、class と id の違いを めちゃくちゃ分かりやすく解説！
コメント