結論から言うと、自分の下らないミスなんですが
このブログの記事の中で、テーブルを使って表を作った際に、全体の幅に合わせてセルの幅が伸縮してくれず、妙な余白ができてしまう状態になっていました。
こんな感じ
通常は、こうならなければいけないはずなんですが
↓↓↓
一部のセルに幅を指定すれば、幅が指定されていないセルが自動で伸長して、幅にピッタリになるように埋めてくれるのが普通なんですが
↓↓↓
なってくれない
↓↓↓
この原因が長いこと分からなくて、違う方法で回避してたんですが(＋。＋;)
こうなる原因を、やっと、突き止めました。
結論としては、ブログ全体のスタイルの指定で、table に「display:inline-block;」が指定されていたということ。
これを、「display:table;」に変えればよかっただけだったんですね・・・orz
言い訳になりますが、初期の頃の記事に、文章の段組みレイアウトを、枠線のないテーブルで行っていた記事がありまして。。。
その時に、display に inline-block の指定を入れてしまったのですね。
そして、その後テーブル設定がうまくいかなくなって、文章の段組み以外ではテーブルを極力使わないという消極的回避方法をとっていた結果、テーブルについての理解が浅いまま来てしまったと。。。
テーブルは、単純に、display を block に変えればいいだけだと思いこんでいたのですが、テーブルの初期値は「display:table;」だったんですね・・・orz
このブログは「 simplicity2 」というテーマを使用させて頂いてますが
前にも書きましたが、simplicityにはスタイルの優先順位の問題がありまして。
いや、あるのが当たり前なんだろうと思いますが、たまたまなのか、そういうルールになっているのか分かりませんが、以前使っていたFC2ブログのテンプレートでは、そのような問題が起きなかったので、知らなかったのです。
苦しめられるのが、「H」タグや「TABLE」タグなど、いくつかのタグに、テーマ独自のスタイルが適用されていること。
そう、いくつかのタグに、何も指定されていない状態のいわゆる「初期値」と違う設定が適用されているのですね。
FC2で問題が起きなかったのは、テンプレートで使用するタグには必ずIDやCLASSを指定して、そのIDごとにスタイルが指定されていたのだと思います。無印のタグにスタイルを指定してはいけないルールだったのかも知れませんね。
言い訳にしかなりませんが、TABLEなど、いくつかのタグの使用で相当手こずってしまいまして、苦手意識ができて、そのまま長い間、ちゃんと勉強しないで来てしまったのでした・・・orz
今回、TABLEの正しい使い方が分かってきたので、ブログのスタイル指定を見直して、初期の頃のTABLEを使った記事を点検してみようと思います。。。(￣-￣)v
（※スタイルが適用されているタグについては、記事の中だけ、初期化してしまうという手があることに、今更ながら気がついた・・・）
コメント