�禺画像]
コピペしたコードを弄ろうとして、クラスとＩＤの混在に悩む


水泳教室で泳いだら、右足のむくみが改善した。

まだ、多少違和感はあるけど、見た目には左右同じになった（左足もむくんできたんじゃね？）。

運動不足で、循環不全になっちまったようだな（なんで右だけ？）。

まあいい。

今後は気を付けよう。

足の血巡りは良くなったが、頭の方は相変わらずだ（血巡り、悪っ！）。

ホームページにパンくずリストを適用しようとしていて、ヘッダーの背景に重ねて表示しようとしているんだが、コピペしたコードでは、ヘッダーの方は<div ID="">とか書いてあって、ブレッドクラム（パンくずリスト）は<ol class="">になっている。

そもそも、ＩＤとクラスの関係がよく分らない。

（スタイルシートの class と id の違いと使い分け）
[URL]

「「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？」

こんな記事が書かれるくらいだから、世間一般の常識になっていないことは確かだな。

「■class：
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える。」

「■id：
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない。」

「CSSでは、装飾内容が重複(バッティング)した場合には、原則として「後に記述された方」が採用されます。」

「class側とid側とで装飾内容がバッティングした際にはid側が優先される」

これらの原則も知らずに、片っ端からコピペして作りつつある「浮沈子の部屋」・・・。

既に、リアルな部屋と同じく、カオス状態になってしまっている。

「規模の大きなソースでは、(特段の必要性がない限りは)class属性だけを使う方が無難かも知れません。」

とりあえず、今回のパンくずは、ＩＤ属性に直して実装した。

動きゃいいんだ、こんなもん！（そうなのかあ？）。

重ね合わせと位置決めが、今一つよく分らない。

（重ねて表示する！CSSのz-indexの使い方【初心者向け】）
[URL]

「z-index: 値;」

「値は整数で入力し、大きい数値のものほど手前に表示されます。」

「z-indexを使用するには、その要素にpositionプロパティでstatic(初期値)以外の値が適用されている必要があります。」

「autoを入力した場合は親要素と同じ値が設定されます。親要素でz-indexの指定がされていない場合は値は0となります。(初期値)」

（CSSのposition:absolute;とは？要素を思いのままに配置する方法）
[URL]

「absoluteを指定する要素の親要素にrelativeかfixedをつけることで、親要素を起点に配置することができます。」

いろいろと、あちこち弄りながらクリアした（フッターをページボディから切り離して、再定義した）。

フッターのところは、未だにうまくいかない。

浮沈子のパソコンの画面では、ちゃんと一番下に来ているのに、スマホやタブレットでは崩れてしまう。

まあ、どうでもいいんですが。

どーせ、自分のパソコンからしか見ないからな。

パンくずリストの設置は、思いのほか難航した。

クラスとＩＤについても学んだしな。

細かいところでは、プルダウンメニューも弄った。

第一層（横並びのメニュー）は、文字がセンターに配置されているが、第二層以下は、左寄せになっている。

ちょっと分かり辛いが、ここも苦労したところだ。