HTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにする

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

HTMLのフォームのテキストボックスに、数値のみのキー入力してほしくないということもあると思いますが、そういう時のための実装を考えてみたので紹介。

HTML

JavaScript

続きを読む

セレクトボックスのbox-sizingの初期値はborder-box

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

HTMLのセレクトボックス(<select>タグ)の高さをCSSで変更してみたものの、なぜかうまくいかないという。

具体的にいうと、想定していた大きさよりも小さくなってしまうという自体に。
例えば、上記のサンプルではheightを25pxとしているのに、Google Chromeのデベロッパーツールでレイアウトを確認してみると、実際のコンテンツ領域は21pxとなっています。
boxmodel

IEで見てもFirefoxで見ても同じ。IE10のドキュメントモードをIE7にしても同じ。
おかしいなぁ。と思いながらデベロッパーツールのスクロールバーをあげてみるとこんな記述が。
boxsizing

box-sizingの初期値がborder-boxということってあるんですね。
というわけで、box-sizingをcontent-boxとすることによって、想定の動きとなりました。

2013/10/10追記:
もう少し調べてみると、ボタンもbox-sizingの初期値はborder-boxでした。
テキストボックスやテキストエリアはcontent-box。

CSSでのパーセント指定まとめ

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・)

一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。
で、CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。
だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。
というわけでまとめてみました。

色系

RGB値

“color”や”background-color”などの色の指定のプロパティで利用する。
それぞれ左から赤、緑、青の値を意味し、0%は0、100%はff(255)をあらわす。

HSL値

CSS3から追加した色の指定方法。
RGB値と同じく、”color”や”background-color”などの色の指定のプロパティで利用する。
左から、色相、彩度、輝度を表し、彩度と輝度を%で指定する。色相は色みを角度であらわす(なので、範囲は0~360)。
jQueryにおいて、HSL値で色を指定すると、rgb指定に変換されてしまうっぽい。

テキスト

font-size

親要素のフォントサイズに対する割合をあらわす。
100%なら、親要素のフォントサイズと同じ。0%なら、何も表示されない。100%より大きければ、親要素のフォントサイズより大きくなる

vertical-align

  • 説明:縦方向の揃え位置を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X%
  • 例:vertical-align:80%
  • 参考:vertical-align – CSS | MDN

その要素のline-heightプロパティの値に対する割合を表すよう。
baseline(初期値)を指定した時の場所を基準に、正の値なら上に、負の値なら下に移動する。
line-heightが100%(もしくは1.0)で、親要素と同じフォントサイズであれば、-100%の時に一段下に、100%の時に一段上になる。

line-height

フォントサイズに対する割合をあらわす。
100%とすると、行の高さが、フォントサイズと同じ高さになる。
なお、数値のみの表記にしてもフォントサイズと同じくフォントサイズに対する割合という意味になるが(1.0は100%と同じ)、子要素への影響が違ってくる。
パーセント表記だと子要素の行の高さは親要素の行の高さと同じになり、数値のみの表記だと子要素にも適用され、子要素のフォントサイズに対する割合となる。
例えば、親要素のフォントサイズが20px、子要素のフォントサイズが15pxのとき、親要素のline-heightを100%と指定すると子要素の行の高さは20pxになり、親要素のline-heightを1.0と指定すると子要素の行の高さは15pxになる。

text-indent

親要素の幅(width)に対する割合をあらわす。今回調べるまで、自分自身の幅と勘違いしてました。
このtext-indentを100%と指定した場合の利用方法として、CSSでテキストを画像に置き換える場合に使うことがある。
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス
つまり、text-indentを100%に、overflowをhiddenに、white-spaceをnowrapと指定してbackground-imageを指定すると、テキストが表示されず、画像のみが表示される。昔はtext-indentに-9999pxと指定する方法がよく利用されていたようなのですが(うちの会社のサイトにもそういう指定があります・・・)、それだとパフォーマンスが悪いということで編み出されたそうです。

横幅と高さ

width

min-width

max-width

  • 説明:幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。
  • 範囲:0以上
  • 指定方法:X%
  • 例:width:80%;
  • 参考:width – CSS | MDN

親要素の横幅(width)に対する割合をあらわす。
最近流行りのレスポンシブウェブデザインでは、widthをパーセント指定で表記することが多い(画面サイズと横幅の比率を同じにするため)。
昔の自分は、imgタグだと実際の画像サイズに対する割合だと勘違いしてたことがありますが、そんなことはありません(width属性も同じ)。
なお、親要素とぴったしあわせたいとwidthを100%と指定しても何か表示がおかしい場合、borderやpaddingの指定がないかチェックしましょう。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。(CSS おれおれ Advent Calendar 2012 – 05日目) | Ginpen.com

height

min-height

max-height

親要素の高さ(height)に対する割合をあらわす。
ブラウザの表示枠ぴったしにレイアウトしたい場合は、bodyすぐ下の階層のタグのheightを100%にするだけでなく、html要素とbody要素のheightも100%にする必要がある。
CSSの「height:100%」について – webデザイナーのナナメガキ

余白

margin

親要素の横幅(width)に対する割合をあらわす。
注意したいのが、上下マージンも高さ(height)ではなく、横幅に対する割合をあらわすということ。
なお、marginはマイナスの指定も可能。

padding

親要素の横幅(width)に対する割合をあらわす。
marginと同じで、上下パディングも高さ(height)ではなく、横幅に対する割合をあらわす。

ポジション

left

right

top

bottom

基準となるボックスの幅や高さに対する割合をあらわす。
50%にすると、要素の左上座標位置が、基準となるボックスの真ん中に表示される。
ボックスを上下左右中央位置に表示させたい場合は、leftに50%、topに50%と指定し、margin-leftにその要素のボーダーとパディングを含む幅を2で割った値のマイナス値を、margin-topにその要素のボーダーとパディングを含む高さを2で割った値のマイナス値をいれると上下中央配置になる。
ボックスを上下左右画面中央に – CSS HappyLife

背景

background-position

  • 説明:背景画像の表示位置を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X% Y%
  • 例:background-position:-10% 20%;
  • 参考:background-position – CSS | MDN

この指定は、『何かの割合』と、一言であらわすのは難しいです。
一見、ボックスの幅や高さの割合かとおもいきや、指定を”100% 100%”にすると、ボックスの外側の右下というわけではなく、ボックス内側の右下に表示されるからだ。
“50% 50%”だと、上下左右中央配置となる(ポジションのtopやleftでもこういう仕様だったら、上下中央配置が簡単だったのに!)。
しいていうなら、『ボックスの幅(padding含む。背景領域と同じ)から背景画像の幅を引いた値』の割合らわす。といったところ。
なお、background-positionには、横と縦を別々に指定する方法はないので注意。
後、一つだけの指定だと横方向のみ適用され、縦方向は50%とした時と同じ位置になります。ただし、初期値(何も指定していない時)は”0% 0%”と同じ位置です。

background-size

  • 説明:背景画像の大きさを指定する
  • 範囲:0以上
  • 指定方法:X% Y%
  • 例:background-size:50% 60%;
  • 参考:background-size – CSS | MDN

CSS3で追加されたプロパティ。
背景領域に対する背景画像の幅・高さに対する割合をあらわす。
“100% 100%”とすると、ボックスと同じサイズの背景画像となる。
実際の背景画像ファイルの大きさに対する割合ではないので注意。

ボーダー

border-radius

  • 説明:角丸を指定する
  • 範囲:0以上
  • 指定方法:X% / Y%(等)
  • 例:border-radius:50% / 50%;
  • 参考:border-radius – CSS | MDN

ボーダーボックスの幅と高さに対する割合の半径の楕円と同じ形の弧をあらわす。
/をつけることによって、水平方向と垂直方向の指定もできる。
一つだけの指定の場合は、水平方向・垂直方向とも同じになるようだけれども、その場合、50%以降は変化なし。
キレイな円を描きたいなら、widthとheightを同じにし、border-radiusを50%にすると円になる。
CSSで角丸を表現する方法をちょっと詳しく書いてみる │ Design Spice
なお、Androidの一部端末ではパーセント指定ができないそうなので注意。
Androidの一部端末では、border-radiusで%(パーセント)指定ができない – console.lealog();

ボーダー関連だと他に、”border-image-slice”や”border-image-width”というプロパティもパーセント指定できるようなのですが、自分がよく分かってないうえに対応ブラウザも少ないみたいなのでパスします。
参考:border-image-slice – CSS | MDN
参考:border-image-width – CSS | MDN

変形

transform-origin

  • 説明:2D変形、または3D変形の原点を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X% Y%
  • 例:transform-origin:10% 20%;
  • 参考:transform-origin – CSS | MDN

変形を適用する要素の左上位置を0% 0%、右下位置が100% 100%となる。
例えば要素をtransform:rotate(回転角度)を使って回転させるとき、transform-originが”0% 0%”なら左上を軸の基準として要素が回転し、”0% 100%”なら左下を軸の基準として要素が回転する。

試しに、jsFiddleで動作サンプルを作ってみました。
説明不足なんで使い方は分かりにくいかもしれませんが、いろいろいじって確かめてみてください。

テーブルを複数行ごとにhoverでハイライトする方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

今の会社に入って数か月たったころ、前任者が作ったホームページのソースが分かりづらいので、新しく作り直したいという依頼を受けることになった。そのうちのいくつかのページにテーブルがあり、trごとにハイライトしているページが。どうやらJavaScriptでやっているようだったのだけれども、それを自分はCSSに書き換え。例えば以下のような感じで。

HTML

CSS

名前 ふりがな 年齢
中居正広 なかいまさひろ 39
木村拓哉 きむらたくや 39
稲垣吾郎 いながきごろう 38

しかし中には、データ数が多すぎて1セットで複数行になっているテーブルも。ソースを見てみると、どうやらtrタグの中に一つのtdタグを入れ、その中に新たにtableを入れてハイライトをつけているようだった。自分もそのやり方でいいのかと思ったら、これだと線の場所がバラバラことがあるといった問題らしいので、すべてを一つのテーブルで作ることに。いったいどうすりゃいいものか・・・。と少し考えて作ったのが下のようなもの。

HTML

CSS

名前 年齢 生年月日 血液型
ふりがな 出生地 愛称
中居正広 39 1972年8月18日 A型
なかいまさひろ 神奈川県藤沢市 中居くん
木村拓哉 39 1972年11月13日 O型
きむらたくや 東京都 キムタク
稲垣吾郎 38 1973年12月8日 O型
いながきごろう 東京都板橋区 ゴローちゃん

HTMLのテーブルにはヘッダーに該当する<thead>、フッターに該当する<tfoot>、そしてボディに該当する<tbody>の3つで構成されています。また、theadとtfootは同じテーブル内に一つしか記述してはいけないのですが、tbodyはいくつでも記述してもよいことになってるそうです。そのため、複数行をtbodyでまとめ、tbody上にマウスが乗ったらバックの色を変えるという処理をしてみました。なお、上記のタグを書かないと、tbodyと判断されます。そのため、theadタグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。

テーブルのセルをクリックしても、セル内のチェックボックスにチェックをつける方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

ネット上でアンケートをやっていると、<td>タグ内にチェックボックスがあることがあります。中には、そのセルの中のどこをクリックしてもチェックしてくれるものもあるのですが、チェックボックスをちゃんとクリックしなければチェックしないというのがほとんどです。

では、今回はセル内のどこをクリックしてもチェックボックスにチェックを入れる方法をお伝えします。親ノードが<div>タグとかだと、<label>で囲めばいいのですが、<td>タグだとその方法はできません。
 まず考えられるのが、以下のようなソースです。

分かりやすいように実際の表示では、幅高さともに100pxにし、上下中心位置に配置し、黒い単線をつけています。

では早速クリックしてみましょう。クリッククリック! おっ!できてるできてる。と思ってもらえたらうれしいです。
 ただ、これだと肝心のチェックボックスをクリックするとチェックがつかないときがあります。理由は単純、2度クリックするのと同じことをやっているからです(今確認してみると、OperaとIEではちゃんとチェックがつきました)。では、続いてこれの対処法を書いていきます。

そう、2度で戻ってしまうなら、3度クリックしたことにすればいいのです! この方法でも、IEやOperaでちゃんとチェックがつくようですし。

なんだか遠回しなような気もしますが、これ以外いい方法が思いつきません。もっといい方法があれば誰か教えてください。