kfujitoの徒然（ｂｙ浮沈子）

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


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

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

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

まあいい。

今後は気を付けよう。

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

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

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

（スタイルシートの class と id の違いと使い分け）
https://allabout.co.jp/gm/gc/23897/

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

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

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

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

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

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

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

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

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

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

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

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

（重ねて表示する！CSSのz-indexの使い方【初心者向け】）
https://techacademy.jp/magazine/8645

「z-index: 値;」

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

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

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

（CSSのposition:absolute;とは？要素を思いのままに配置する方法）
https://www.sejuku.net/blog/53016#relativefixed

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

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

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

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

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

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

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

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

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

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

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

フッターの配置につては、スマホによる操作では、コンテンツへのアクセスを妨げることになってしまっている。

実機によるチェックしかできないので、一通りのコンテンツを作り上げたのちに、しっかりバックアップを取ってからチャレンジしよう。

今日の段階で、表題の「浮沈子の部屋」に貼っていたリンクをはがした。

サイト内のどこにいるかという、ブレッドクラム（パンくずリスト）が出来たからな。

そろそろ、コンテンツの中身を書いていかなければならないだろう。

その際には、動的表示を行うために、実験室で試している仕掛けを盛り込むことも考えている（消えるボタンとかね！。ポチっとすると、隠れていたコンテンツが現れるというわけだな）。

そう、仕掛けを入れ込むために、仕方なくコンテンツを書く感じだな（そんなあ！）。

そういう、本末転倒なホームページがあったっていいじゃん！？。

いつまで経っても、３ページのままじゃ仕方ないけどな・・・。