ほその日記

■[Life] 電源断！！ 13:19

ノートPCをぐいっと手前に寄せたら、電源コードがひっかかっていて、プツっと電源が落ちてしまいました！！私はノートのバッテリをはずしているので電源が遮断されたら保存していない作業内容の消失を意味します。普段なら「のぁーー」っと叫びたくなる所ですが、あまりに綺麗に「プツッ」という音がしたので笑っちゃいました(笑)

うーん、こういう時だけは無停電源装置としてバッテリが欲しくなりますけど、装着するとただでさえ重たいマシンがさらに重たくなっちゃうんですよね。なのでこんごマシンを手前にひくときは電源コードがひっかかっていないか、電源コードを押さえてから手前に引き寄せることにします。

またひとつおりこうになりましたっ！(笑)

■[Life] 一時期掲示板で流行っていた気がする 09:31

♡ → ♡

■[朝] 霧雨な日 08:47

おはようございます！今日もどんよりした天気で、小雨というには粒の細かい霧雨が降っています。ザーザー降るより、サラサラっと降る事の方が珍しいので、今日は珍しい天気！過ごしやすいというよりは、少し肌寒いくらいなので体を冷やさないようにしないといけませんね。さぁ、今日も一日がんばりましょう！

■[HTML] テーブルにExcelのようなスクロール機能を付加する その２ 00:34

その１はこちら

前回はCSSのみを使ってテーブルのヘッダを固定し、明細行のみをスクロールさせる方法を紹介しましたが、今回はそれの応用編です。今回のは、ヘッダを固定して明細行だけをスクロールさせるのは同じなのですが、横スクロール機能がついています。しかも任意の列だけは固定でスクロールしません。Excelでもウィンドウの固定等でできますね。なにはともあれサンプルをご覧ください。

http://hoso.homelinux.net/scroll2.html

原理としてはdivタグのスタイルにoverflowを指定してスクロールバーを出現させた後、onscrollイベントで他のdivタグをスクロールさせている(同期を取っている)という事です。このサンプルではonscrollとdivタグに書いていますが、onscrollプロパティに関数をバインドしてもスクロールと同時に指定した関数が呼び出されます。

document.getElementById('divTagId').onscroll = onscrollHandler;
function onscrollHandler() {
  //scrollTopやscrollLeftを同期するコード
}

通常横スクロールは使いづらいので採用しませんが、画面に表示したい列数があまりに多く、１行を２段にしても表示しきれない場合に、苦肉の策で横スクロールを提案しています。その時、全ての列がスクロールしてしまうと、後半のデータがどのデータにひもづいているのか分からなくなるので、キーとなる項目だけ固定表示させます。

横スクロールを使わない解決方法は、列数を減らす、列の幅を固定する、列の内容を切る、フォントを小さくする、１行を２段(〜３段)で表示する、アンカーをクリックすると詳細がポップアップ表示されるようにする、カーソルを乗せると詳細をフローティング表示する等考えられますので、要件に合った方法を提案・採用すると良いと思います。フレームやインナーフレームは弊害が多いので最初から選択肢に入れないのが私流です。

どこかで有効活用できそうでしたら是非お試しください〜。