おはようございます！
8月20日 火曜日。曇り（天気予報は雨のち晴れ）。
最高気温35℃。あと数日でしょうか、こんな気の滅入る気温を書くのも。。。
今日は早速学びを開始いたします。
今日の教材はこちら、
よしやっていこう…
CHAPTER３ Webのデザインを作る！CSSの基本
クラスとIDを使った指定方法
◆クラスとIDとは
クラス（class）とID（id）はタグの中に記述できる属性の１つ。CSSと紐づけることでその部分だけデザインを変えることができる。
クラスは複数の要素に適用できるのに対し、IDは一つの要素にのみ適用される。
◆クラスを使った書き方
CSSファイルに「．（ピリオド）クラス名」を書き、適用させたいスタイルを記述。そして、HTMLファイルにてタグにclass属性を追記し、設定したクラス名を記述。
※クラスは、複数の要素の割り当てることができ、同じクラス名を持つ要素は同じスタイルや機能を共有する。
＜CSS記述例＞
p {
color: rgb(134, 134, 134);
}
.blue {
color: blue;
}
＜HTML記述例＞
<p>クラスを指定しない場合の文字は灰色だよ</p>
<p class=”blue”>クラスを指定した場合は青文字だよ</p>
実装すると
◆IDを使った書き方
IDを使う場合もクラスと同様だが、IDの場合は「#（ハッシュ）ID名」を書き、適用させたいスタイルを記述。そして、HTMLファイルにてタグにid属性を追記し、設定したID名を記述。
※ID名は、ページ内で一度しか使用できない。同じID名を複数の要素に割り当てることはできない。
＜CSS記述例＞
p {
color: rgb(134, 134, 134);
}
#red {
color: red;
}
＜HTML記述例＞
<p>IDを指定しない場合の文字は灰色だよ</p>
<p id=”red”>IDを指定した場合は赤文字だよ</p>
<p id=”red”>※IDを指定しているけど、2回目だから無効だよ</p>
実装すると
なんだってーーー！！！？
あれ？
1回しか使えないんじゃないんかいな。。
なんか設定をミスってないかよく確認すれど、間違いはなさそう。。。
Copilot！htmlで、同じIDを別のタグ内で使えちゃってるんだけどなんで？
HTMLの仕様では、IDはページ内で一意であるべきですが、ブラウザは柔軟にエラーを処理するため、同じIDが複数の要素に割り当てられていても表示を続けます。これは、ブラウザがユーザーに対してできるだけ多くのコンテンツを表示しようとするためです。
ただし、同じIDを複数回使用することは推奨されません。以下のような問題が発生する可能性があります：
１．CSSのスタイル適用の問題: 同じIDを持つ複数の要素に対してスタイルを適用する際、予期しない動作が発生することがあります。
２．JavaScriptの操作の問題: JavaScriptでIDを使って要素を操作する場合、最初に見つかった要素のみが対象となり、他の要素が無視されることがあります。
３．アクセシビリティの問題: スクリーンリーダーなどの支援技術が正しく動作しない可能性があります。
したがって、IDはページ内で一意にすることをお勧めします。もし複数の要素に同じスタイルや機能を適用したい場合は、クラスを使用するのが良いでしょう。
なるほどね～。
ほんとはエラーだけどブラウザ側が柔軟に処理しちゃうんだね。。
簡単なやつは表示できちゃうということか。
ブラウザ「今回は簡単なやつだったから処理しといたけど、難しくなっちゃうと無視するかもしれないからね。それに予期しない動作が発生するかもしれないからID使うのはページ内では一つのIDに対して一回だけにしてね。」
ってことかな。
りょうかいでっす
◆タグ名とクラスやIDをセットで指定する書き方
CSSにて、「タグ名.クラス名」や「タグ名#ID名」のようにタグ名に続けてクラス名やID名を書くと、そのタグでしか反映されない限定的なものになる。
まず、2種類のタグに同じクラス（.クラス)を記述すると、
＜CSS記述例（.クラス名）＞
.red {
color: red;
}
＜HTML記述例＞
<h1 class=”red”>クラス（.red）を指定したh1タグの文字だよ</h1>
<h2 class=”red”>クラス（.red）を指定したh2タグの文字だよ</h2>
実装すると
次に、2種類のタグに片方のタグ名を設定した「タグ名.クラス名」を記述すると、
＜CSS記述例（タグ名.クラス名）＞
h1.red {
color: red;
}
＜HTML記述例＞
<h1 class=”red”>クラス（.red）を指定したh1タグの文字だよ</h1>
<h2 class=”red”>クラス（.red）を指定したh2タグの文字だよ</h2>
実装すると
なるほど、やってみてわかったことはHTMLの記述は変えてないってことね。
この実験は、IDでも同様と。
一応、CSSの記述例だけ残しておくと、
＜CSS記述例（タグ名#ID名）＞
h1#red {
color: red;
}
「.」が「#」になると急に違和感があるけど、まあ慣れるしかない。。
慣れって大事だな。。
◆クラス名とID名のルール
クラス名、ID名は自分で決めることができるが、いくつか決まり事があり、ルールを守って名前をつけないとCSSが反映されないので注意。
＜命名ルール＞
・1文字目はアルファベットで始める必要がある
・使用文字は、「英数字」「-（ハイフン）」「_（アンダースコア）」
・空白（スペース）を入れない
※一般的には小文字を使用すること。
※「英数字」「-（ハイフン）」「_（アンダースコア）」以外の特殊文字は避けること。日本語のクラス名やID名でも対応されるが、ブラウザによってはエラーが起きてしまうようなので英数字を使用すること。
また、一般的なベストプラクティスは、
・一貫性：プロジェクト全体で一貫した命名規約を使用
・可読性：他の開発者が理解しやすい名前を指定
・BEM命名規則：BEM（Block, Element, Modifier）という命名規則を使用することも一般的とされている
↓
＜BEM命名規則とは＞
BEM（Block, Element, Modifier）命名規則は、CSSクラス名を一貫してわかりやすくするための方法。BEMは、要素の構造と関係を明確にすることで、コードの可読性と再利用性を向上させる。
BEMの基本構造
１．Block（ブロック）
２．Element（エレメント）
３．Modifier（モディファイア）
クラス名例
ブロック：block
エレメント：block__element ※アンダースコア２つ
モディファイア：block–modifier または block__element–modifier
CSS記述例
.card {
border: 1px solid #ccc;
padding: 16px;
}
.card__title {
font-size: 24px;
margin-bottom: 8px;
}
.card__button–primary {
background-color: blue;
color: white;
}
.card__button–secondary {
background-color: red;
color: tomato;
}
◆１つのタグに複数のIDやクラスをつける
１つのタグに対し、複数のクラスやIDを記述することができる。
＜クラス３つの場合＞
<p class=”blue␣text-center␣small”>複数の場合、半角スペースで区切る</p>
⇒「blue」「text-center」「small」の３つのクラスを半角スペースで区切る。
＜クラスとIDの場合＞
<p class=”blue”␣id=”main”>複数の場合、半角スペースで区切る</p>
⇒クラスとIDを半角スペースで区切る。
◆クラスとIDの違い
＜同じHTMLファイル内で使用できる回数＞
これは前述のとおり。
＜CSSの優先順位＞
クラスとIDでスタイルを指定した場合、優先されるのはID。
＜CSS記述例＞
#blue {
color: blue;
}
.orange {
color: orange;
}
＜HTML記述例＞
<h1 id=”blue” class=”orange”>クラスとID、優先されるのはIDのblue</h1>
実装すると
※CSSの記述順、HTMLの記述順を逆にしたとて、優先順位は変わらない。
おっけ。１セクション分学び完了です。
よっしゃーい
教材のCOLUMNをよくみたら有用そうなことが書いてあったので学びます。
＜ IDを使ってページ内リンクを作成 ＞
ID属性を使って同一ページ内にリンクを作成することもできる。
<a href=”#contents”>[サブコンテンツ]を見る</a>
・・・メインコンテンツ・・・
<div id=”contents”>
<p>[サブコンテンツ]</p>
</div>
なかなかの有用性なんじゃなかろうか。
今までCOLUMNは無視してたけど、無視できんな。。
今日はしっかりとした学びが出来たんじゃないでしょうか。
ボリュームもまあまああるし。
ここでブレーイク！
Copilot！１つのブログの適切な文字数ってどのくらい？
ブログの適切な文字数については、記事の内容や目的によって異なりますが、一般的な目安をいくつか紹介しますね。
■一般的な目安
・ニュース記事: 300〜500文字
・ガイド記事: 1,500〜2,500文字
・リスト記事: 1,500〜2,000文字
・トピックについての詳細記事: 2,500〜3,500文字
・研究報告書: 3,500〜5,000文字
・専門家によるインタビュー記事: 1,500〜2,500文字
■重要なポイント
・内容が重要: 文字数よりも、読者が求める情報をしっかりと提供することが大切です。
・SEO対策: 文字数が多いほどSEOに有利と言われることもありますが、実際には内容の質が重要です。
・読みやすさ: 長すぎる文章は読者にとって負担になることがあるので、適度な段落分けや見出しを使って読みやすくすることが大切です。
ブログの目的やターゲットに合わせて、適切な文字数を選ぶと良いでしょう。
＜参照サイト：conoha.jp xserver.ne.jp bing.com ynmarketing.jp＞
なるほど～、ボリュームがデカけりゃいいってもんじゃないんだね～。
そすか～
これから夕飯のボリュームについて検討するためこれにて終了です。
おつかれさまでした～(´・ω・)ノ
コメント