レッド ■ ワン: red-one

see also : MORI LOG ACADEMY: 納得がいかない足し算

桁が増えることを何故難しく感じるのだろうか。11や12も、8や9と同じく、1つの数字なのに。ただ、表記が2文字になっているだけのことである。数字を表記する方法の問題なのに、何故計算がややこしくなる（と感じる）のだろうか。…（中略）
　さて、5＋5＝10は、気持ち良く覚えられる。また、5＋6＝11もその恩恵によりまずまずだ。6＋6＝12も手が届く範囲というか、まだまだ人に優しい。ところが、6＋7＝13がいけない。一気に難しくなる。これが、桁を越える足し算における最初の難関といえるだろう。

MORI LOG ACADEMY より転載


　これを読んだとき，ふと懐かしさを覚えた．　小学一年生のときを思い出した．　記憶が掘り起こされたといってもいいかも．
　これと同じ疑問に陥ったことがある．　（まあ，一方的な共感でしかないのですけど）

　小学生のときの数字の認識としては（今でもそうかもだけど），1～10 を３分類していた．
つまり，

　1 ～ 3 ≒ 1　　（小さい）
　4 ～ 6 ≒ 5　　（中くらい）
　7 ～ 10 ≒ 10　（大きい）

と，頭の中で変換して数字の大小を理解していた．

とすると，命題の式＜6 + 7 = 13＞は，脳内ではこう変換される．

　約 5 + 約 10 = 約 10

と．
　すると，ここで疑問が生まれる．　約 5 と約 10 を合わせてなんで，約 10 なるんだ？

　『6』も『7』も中くらいには大きい値である．　瞬間的に直感として，２数を足すとより大きな値になりそうだと錯覚してしまう．
　しかし，導き出される『13』という答えでは数の印象が優先して，6 + 7 よりも小さい数字だと一瞬認識してしまう（『1』も『3』も小さい数であるため）．　一度感覚で認識した情報を計算で訂正（or 否定）する作業を施すこととなり，違和感が発生するのだろう．

# うーん，微妙に解には届いてないような気がしますが，勝手に自問自答しました．

　多分，9 や 8 では，-2, -1 をした方が速いということに気付く．
　つまり，7 だけが宙ぶらりんなのだ．

更新 at 2007 12 03

　サンプル２，３において IE6 でテーブルが崩れていたものを修正．
CSS コードの修正はありません．

マウスオーバしたテーブルの行・セルをハイライト表示

　CSS のみで，マウスオーバしたセルのスタイルを変更する方法を紹介したいと思います．

※ただし，IE6には対応していません．
※Firefox 1.5, 2.0 で動作確認しております．　IE7, Opera, Safari3.0(Win版) で動作確認しました．

HTML コード：

<table>
<thead> <tr><th> aaa </th><th> bbb </th><th> ccc </th><th> ddd </th></tr> </thead>
<tbody>
  <tr><td> a1 </td><td> b1 </td><td> c1 </td><td> d1 </td></tr>
  <tr><td> a2 </td><td> b2 </td><td> c2 </td><td> d2 </td></tr>
  <tr><td> a3 </td><td> b3 </td><td> c3 </td><td> d3 </td></tr>
  <tr><td> a4 </td><td> b4 </td><td> c4 </td><td> d4 </td></tr>
</tbody>
</table>

元となるHTMLソースコードは上記のような一般的なもの．　もとソースに手を加える必要はございません．


CSS コード：

/*  テーブルのスタイル  */

table, table * {
  border-collapse: collapse;
  border: 1px solid #ddd;  /* テーブルのボーダの色 */
}
th, td {
  width: 3em;
}
thead th {
  background: #69d;  /* 第一行目（項目名）のセルの色 */
}
  th:first-child {
    background: #88d;  /* 左上のセルの色 */
  }

td:first-child {
  background: #ccc;  /* 一列目のセルの色 */
  text-align: center;
}

tfoot td {
  background: #6d9;
}
  tfoot td:first-child {
    background: #8d8;
    text-align: center;
  }

/* マウスオーバしたセルのスタイル  */

tbody tr:hover td {
  background: #dff;  /* 列のハイライト色 */
}
tbody tr:hover td:first-child {
  background: #cdf;  /* 第一行目のハイライト色 */
}

tbody tr:hover td:hover {
  background: #acf;  /* セルのハイライト色 */
}

　上部はテーブル全体のスタイル指定，下部がハイライト部分のセル・行のスタイル指定になります．
色味等は好みで変えましょう（青字部分）．


以下が実際にスタイルを適用したテーブルのサンプルになります．


縦の列（カラム）へのハイライトには対応していません．
なんとかしたい・・・．

テーブルの内容部分のみをスクロールする

　＋αの部分．
　テーブルが巨大になってしまった場合，第一列（ヘッド：項目名部分）を固定して，ボディ部分のみをスクロールさせる方法がある．
それを，HTML には全く手を加えず，CSS のみで表現する手法を提案．

使用する HTML コードは上記と同一．
特別なカスタマイズはいりません．
※ こちらは Firefox ブラウザにしか対応していません．

CSS コード：

tbody {
 height: 200px;
 overflow: auto;
}

tbody タグに高さを指定（例では200px）して，はみ出る部分はスクロールするようにする．

フッタも付けるとこのような感じ．

テーブルの内容部分のみをスクロールする　改良

　上記のコードの場合，table の高さの解釈により，無駄な枠線（ボーダ）が表示され，見苦しいものとなる．
この現象を回避する為に，CSS を一部書き換える．

CSS コード：

table {
 background: #ddd;
 border-spacing: 1px;
}
th, td {
 width: 3em;
 background: #fff;
}

border-collapse や border の指定は消します．　枠をボーダではなくて，セル間の空白で表現．
以下のようになります．

横スクロールバーが出てきてしまうのは・・・見逃してください．

ref.
• 参考：web creators 2008年1月号 目次»

--
１２月になりました．　やりたい事が増えてきた．