こんにちは やはです
ID属性どうでしたか？
色々試してみたりしてみましたか？
ここはとても重要でかつ
挫折しやすいポイントになります
頭に入れて
試して
結果を見直して
この流れをしっかりやっていきましょう
挫折しやすいポイントでもありますが
使い方をマスターすればとても便利な属性です
学習は慌てて行うものではありません
自分に適した学習ペースがあるので
ストレスがかからない勉強ペースでやっていきましょう
勉強を続けるコツは嫌にならない程度のペースで進めることです
ただでさえ嫌になる勉強なのに
そこで更に無理矢理続ける
やりたくなくなってしまいます
人間ですからね
気持ちが乗っている時が一番学習効率が高まるので
無理せずやっていってください
そのために、ブログの記事にしてますからね
いつでも読み返してください
前置きが長くなりました
それでは始めていきましょう
- CLASS属性について知ろう
- ID属性とCLASS属性の使い分け
- ID属性とCLASS属性の応用
- ID属性とCLASS属性の知識アップ
今回はこの内容でお話しします
前回お話ししたID属性と同様にとても重要です
更に後半は、この２つを同時に使っていきます
ここから難しくなってきます
しっかり理解できるまで
時間をかけて学んでいってください
CLASS属性は、ID属性同様
タグに固有の名前をつける事ができる属性です
イメージはID属性と同じイメージで構いません
ID属性とCLASS属性の大きな違いは
単体か複数か
と、いう事です
ID属性で
id="mozi"
と、属性をつけた場合
その他の部分には同じID属性「mozi」を
使えないとお話ししましたね
その部分のみスタイルを適用したい場合であれば
ID属性で何ら問題はありません
ですが、複数につけたい場合はどうでしょう？
わかりにくいので画像を踏まえて説明します
毎回使用しているHTMLコードです
この<h >にスタイルをつけたいとします
￥皆様が勉強したID属性でスタイルをつける場合
このようにID属性を１つ１つつけていかないといけません
更にCSSのプロパティはこの様に書かないといけません
大変ですね
こういった場合、CLASS属性を使う事で手間を省く事ができます
それではCLASS属性を使っていきましょう
書き方はID属性と似たようなものです
どこが変わったか見てみましょう
<h1 class="mozi"> YAHALIFE </h1>
<h2 class="mozi"> はじめてのHTML </h2>
<h3 class="mozi">環境導入編</h3>
この様にタグに属性を追加しました
「ID=""」の部分が「class=""」になっただけです
簡単ですね
これを行う事でこの３つのタグは
「mozi」というCLASS属性をつける事ができました
後はスタイルを適用させるだけです
CLASS属性は
CSSの場合「 . 」で表記します
「ドット」ですよ
.mozi{
color: blue;
font-size: 30px;
}
文字カラーとフォントサイズを変えてみました
ウェブで確認してみましょう
こう表示されます
この様に
CLASS属性とID属性は
複数と単体で使い分ける事ができます
CLASS属性は苗字
ID属性は名前
こんな感じで覚えてもいいかもしれませんね
簡単でしたか？
簡単でしたね
CLASS属性はID属性と類似している属性です
複数を選べる所以外
ほぼ同じと言っていいでしょう
- CLASS属性をつけることで部分的にスタイルを適用させる事ができる
- CLASS名は複数のタグにつける事ができる
- CLASS名は任意の名前をつける事ができる
- 大文字、小文字の区別がある
- 打ち消しではなく、上書き
前回と、ほぼ同じですね
ID属性を学んだ皆様なら、スッと入ったかと思います
皆様は前回と合わせて
ID属性
CLASS属性
を、学んでいきました
この２つを頭に入れた上で、次に進みましょう
ここから難しくなってきます
ゆっくり、自分のペースで
勉強を進めてください
ここからはこの２つを使う上で学んでいく事を解説していきます
今皆様の知識は
単体と複数
と、頭に入っているかと思います
ここからはこの２つを
更に深く深く学んでいきたいと思います
では、勉強していきましょう
いきなり前回の解説を覆す内容が出てきましたね
ID属性は固有の単体名だから他に付けれないって言ったじゃん
そう思いますよね
その通り
ID属性は固有の単体名なので同名でID名はつけれません
「同名のID名はつけれません」
同名の「ID名」はつけれません
つまり、同名のID名はつける事ができませんが
CLASS名とID名は属性が違うので同名でも可能という事になります
CLASS属性を苗字とすると
山田
ID属性が名前とすると
山田
苗字と名前は同じ言葉でも違いますよね？
そうです
苗字の山田と
名前の山田
組み合わせる事が可能です
文字だけで理解するのは難しいので画像を交えて考えましょう
２つの山田を用意しました
CSSでスタイルをつけましょう
ID属性を表す#yamadaにはカラーグリーンを
CLASS属性を表す,yamadaにはカラーレッドを指定しました
ウェブで確認してみましょう
こう表示されました
パソコンはとても賢いのです
私達からみたら同じ山田でも
コードを見る事で違う山田としっかり判断して
スタイルを適用してくれます
勿論同名を避けるのにこしたことはありません
しかしこの先プログラミングをしていく上で
#menuの中の
.menu
などの
使い方をする場面も出てきます
この使い方は今後学んでいく上で出てくることなので
今は覚える必要がありませんが
場面によっては使う時もあるかもしれないと
思っておいてください
お腹いっぱいかもしれません
後１回おかわりしましょう
- ID属性とCLASS属性は同タグに同時にいれる事ができる
また、ややこしいところが出てきましたね
今日はここをやっておしまいです
もう一踏ん張り頑張りましょう
今まではID属性とCLASS属性を分けてつけていました
しかし
ID属性は名前
CLASS属性は苗字
といってたくらいなので
フルネームもできるよね？ってなりますね
画像を交えて順を追って説明します
あえてややこしい表記にしておきますね
もう1度ここまでの記事を思い出しながら進めていきましょう
先ほどと同じコードです
上のID属性がついたタグにCLASS属性をいれる時は
この様に記述します
<h1 id="yamada">
この部分に
<h1 id="yamada" class="yamada">
と、追加しました
わざとややこしい名前をつけています
頭が痛くなりますが、この状態で覚えれば
ガツンと知識として残るので
頑張りましょう
それではスタイルをつけていきます
この様にスタイルを指定しました
ID属性の#yamadaには変わらずフォントカラーグリーンを
CLASS属性の.yamadaにはtext-decoration: underline;
とつけてみました
text-decorationは文字を装飾するスタイルです
今回はunderlineという事で
下線が入る様に指定しました
前回の様に両方にフォントカラーをつけなかったのには理由があります
理由については次回解説します
それでは、ウェブで確認してみましょう
この様に表示されました
両方の<h1>には
「.yamada」のアンダーラインが指定されています
そこにI
「#yamada」はID属性も追加されているので
フォントカラーのグリーンが指定されました
こういった形で
ID属性とCLASS属性であれば
同じタグに入れても共存してくれるのがわかります
フォントサイズは統一したいけど
この部分には色がを追加したい
この様な使い方をしたいときに便利ですね
ちなみに別名のID属性同士をいれる事はできないので注意してください
ID属性は別名だとしても１つのタグに１つだけです
覚えておいてください
じゃあCLASS属性は？
できます（笑）
今日のまとめ
- CLASS属性はID属性の複数ver
- ID属性とCLASS属性は同名可能
- ID属性とCLASS属性は同じタグに同時に入れる事ができる
- ID属性はタグの中に１つだけ
今回はどうでしたか？
CLASS属性の説明から始めて
２つの属性の知識レベルを１段階あげていきましたね
ここはかなりのつまづきというか挫折ポイントです
1人で学ぶのはとても難しい場所ですね
実際説明みながらでも難しいんですけどね
文章と画像だけではなかなか知識として頭に残りません
今回学んだことを自分のコードでどんどん試してください
それでわからなければ何回も読み返して
繰り返し繰り返し勉強して少しずつ知識の底上げをしていきましょう
それでどうしてもわからない所があればどんどんご連絡ください
説明が間違ってても連絡ください
ただ、わからないからとずっと頭を悩ませていると
嫌になってしまうので
頭に入らない時は一旦勉強から離れてリフレッシュしてください
頭がすっきりするとスッと頭に入りますよ
次回は
今回開設できなかったCLASS属性の補足
フォントカラーにしなかった理由
を解説したいと思います
これからも少しずつ勉強を頑張ってください
私もブログを頑張ります！
今日もお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。
