ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib

この記事の表題の < div > と < table > には < > と div、table の間にスペースが入っています。前回の「HTML ページ内タブに似た動作 < div > と < table >」も同様です。なぜスペースを入れたかというと、編集画面ではなく閲覧しようとした時の表示が乱れたからです。スペースを入れたら正常に表示されたので、このようにしてあります。

・・・ブログに <div> とか書かれるとは思っていないだろうけど、これ、エスケープもれではないかな・・・

さて、不思議な現象が起こりました。<table> の style display を block とすると <tr> の幅がテーブルの幅よりも狭くなってしまう事があるという現象です。常に起こるのではなく、そうなる【事がある】という事です。どうやらテーブル内に表示される内容によって起こったり起こらなかったりするようです。
style display の初期値は空なので、表示したテーブルに対して style display=''; とすると意図した動きになりました。style display='' がどのように解釈され、どのように動作するのか分かりませんが、意図した動きになったので「良し」としましょう。
いくつかのブラウザで試しても結果は同じなので、仕様の問題なのか使い方の問題なのか？？？？ブラウザの動作は複雑で、パラメータの「相互作用」なんか奇怪なので、こういう事もあるかな、と思います。

スマホ版を作っていますが、問題は画面が小さいことです。画面幅が狭いのが問題ですね。昔々の MS-DOS 時代は横幅６４０ピクセルでしたが、それよりも狭い。そこで適当に改行を入れるなどして幅を狭く作るわけですが、大きな（情報量の多い）ページだと当然極端に縦長になってしまいます。そのページにアクセスした人にとって本当に必用な情報はページ内の一部だけである事が殆どなんですが、「必用な情報」が何であるかは場合によって異なるでしょう。ページを分割してもいいんですが面倒。ページ内にあるパラメータは簡単にアクセスできますが、ページをまたがると HTML のパラメータで受け渡さなくてはならなくなります。

ページ内にタブがあって、タブをクリックすると表示内容が変わるページがありますね。そのようなページは「１つのページ」で、部分的に表示、非表示としているんだそうです。これならばページ間でのパラメータの受け渡しは不要。やってみる事にしました。調べてみると

<div id="ID1">タブ１に対応する表示内容</div>

<div id="ID2">タブ２に対応する表示内容</div>

などとし、表示したい物は style display = block、そうでない物は style display = none とすればＯＫのようです。なんだ、簡単じゃないかと思ったのですが・・・
Reclib のＤＢではアライメントのために <table> を多用しています。この方法、今では【推奨されない】そうですが、修正するには工数が大きすぎます。最初にやったのは、適当な位置に <div> </div> を挿入してブロックを作り、それに対して JavaScript で style.display="none" などとする方法です。
<table>

    <div> <tr> <td> </td> </tr>  </div>

    <div> ・・・ </div>

</table>

動かしてみると全くダメ。原因調査のために

<div style="color:red;"><table><tr><td>文字列</td></tr></table></div>

などとやってみましたがダメ。表示される文字列は黒のままで、赤くはなりません。<table><div><tr><td>文字列</td></tr></div></table>　ダメ

<table><tr><div><td>文字列</td></div></tr></table>　これもダメ

<table><tr><td><div>文字列</div></td></tr></table>　これはＯＫ

ググっていたら「DivおよびTableは両方ともブロックレベルの要素です。そのため、ネストすることはできません。」というのが見つかりました。知らなかった、というより、やってみた事がなかった。確かにネストしていますね。でも <td><table>....</table></td> は可能なんです。これもネストしているのでは？？何にしても動かないのではしょうがない。

結局 <table> を分割する事にしました。
<table id="table1">   // タブ１で表示するもの

    <tr> <td> </td> </tr> </table>
<table id="table2">   // タブ２で表示するもの

    <tr> <td> </td> </tr> </table>
などとし、JavaScript で table1, table2 の style display を操作するとＯＫでした。

こんな事は常識かもしれませんが、私にとっては常識ではなかった・・・参考になれば幸いです。

２回目のワクチン接種から２４時間経過しました。

今朝はやたら早く目が覚めました。なんと午前４時。昨日は早く（２０時ごろ）寝たので、こんなものかとも思いますが、１回目の接種後は夜は「ひたすら寝ていた」状態だったので、少し意外でした。

起きた時、接種部位に鈍痛を感じました。前回よりはマシみたい。それ以外問題なし。「鈍痛が出てきたという事は、ちゃんとワクチン入ってたんだ・・・」などと「しょーもない」事を考えながらネットを見たりＤＢをいじったりして遊んでいると、やたら眠くなりました。７時ごろから２時間ほどお昼寝。午後は午後で２時間ほどお昼寝。

今現在、接種部位の鈍痛は残っていますが、だいぶ気にならなくなりました。ストレッチしても大した事はない（ストレッチしてみようかと思う程度には回復した）

・１回目の接種から２回目接種までの３週間

特に問題はなかったのですが、考えてみたら「何となく元気がない」といった感じでした。目立ったのは睡眠時間が長くなった事かな。睡眠時間を記録していた訳ではないので、どの程度長くなったかは書けませんが、長くなったように思えます。

それ以外には問題なし。明日問題がなければ、ワクチンネタの書込みはこれで終わります。

コロナワクチンの２回目の接種を受けました。【２回目の方が副反応が厳しい】とかの記事があったので心配していましたが・・・

・接種直後・・・何ともない。前回あった接種部位の鈍痛も殆どない。その他、問題なし。

・今（接種後１時間半）・・・同上。ワクチンを生理食塩水だかで薄めて・・・おい、まさか生理食塩水１００％じゃないよね、と思うくらいなんともない。これ以上書く事がない。でも、早目に寝る予定です。