風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

TABLE の TD 要素内全てをチェックボックス化したいが……

html css

HTMLのチェックボックス要素（input[type="checkbox"]）で表示される□は、閲覧環境によっては小さく表示されてしまい、チェックを入れたり外したりしにくい場合がある。

その場合の対処法として、

  1. チェックボックスそのものをCSSで拡大する（参考：チェックボックスやラジオボタンを大きくする方法: 小粋空間、チェックボックスを大きくしたい - Qiita）
  2. LABEL 要素を用いて、有効な範囲を拡大する
  3. チェックボックスの代替として、画像＋JavaScript 等でなんとかする

といった方法があると思われる。

で、2. の手法でやろうとしたのだが、条件を

  • チェックボックスを、TABLE 内の TD 要素下に置く
  • TD の高さや横幅は不定
  • TD 内部全体を有効範囲としたい
  • チェックボックスそのものは、TD要素の上下左右中央に表示

のように定めたところ、どうやって CSS を書けばよいのかわからなくて、悩んでしまった。




    td {
        position: relative;
    }
    
    label {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: lime;
    }
    
    input[type="checkbox"] {
        display: block; /* 無くてもよい模様 */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

どうにも、冗長な書き方をしている気がしてならない。

もっとシンプルな記述方法を知りたい……ご存知の方はご教示いただきたい。

【覚書】 Twitterのタイムラインなどで、表示位置（スクロール位置）を固定したまま、ポップアップ表示させる方法

css

Twitter 原寸びゅーで、原寸画像をオーバーレイ（ポップアップ）表示させる際、タイムラインのスクロール位置はそのままにするためにはまっていたので、覚え書き。
つくづく、CSS は苦手やわぁ……。

ヘッダ及び表示範囲に相当する要素を、position: fixed を指定することで固定する、ところまではすぐ思いついたのだが、原寸画像が表示範囲よりも大きい場合にどうすればよいのかが当初は思い付かなかった。

苦肉の策として、オーバーレイ表示時には、

  • 表示範囲を、position: absolute で BODY の上端に合わせる
  • タイムラインについては、ネガティブマージンを設定して、見かけ上、オーバーレイ表示したときと同じ位置のものが表示されるようにする

のようにして対処していた（0.1.5.500まで）。

しかし、どうしても無理があったので、パフォーマンスが悪く（反応がにぶく）なってしまった。

その後、

  • 表示範囲は、position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; を指定
  • BODY には、overflow-y: hidden; を指定

のようにしておけば、原寸画像を表示している範囲だけをスクロールさせることが出来ることに気付き、対応。

パフォーマンスについても改善されたように思われる。

なお、このようにした場合、表示範囲の操作（スクロール）に関しては（ブラウザでBODY(HTML)の標準的なキー操作として用意されている）[Space][Home][End]等のキーによる移動は効かなくなるので、自前で用意する必要があった。