CSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法

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

クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE8以下には対応していないようです)。

主に使うCSSのテクニックは、:checked擬似クラスと隣接セレクタの+(もしくは、関節セレクタの~)
:checked擬似クラスはチェックボックスやラジオボタンがチェックしている要素を表す擬似クラスで、例えば、以下のようにするとチェックボックスのオンオフでボタンの表示・非表示が切り替わります。

CSS

HTML

続きを読む

CSS3のnth-childやnth-last-childを使って途中の連続した要素を指定する

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

CSS3から追加されたnth-childやnth-last-childという擬似クラス。前者が前からの要素を指定する擬似クラスで後者が後ろからの要素を指定する擬似クラスとなります。
この二つのよく見る例が、:nth-child(3)と一つだけの要素を指定したものや、:nth-child(2n)と偶数番目の要素だけ指定したものをよく見ますが、連続した要素を指定することもできます。
例えば、最初の5つを指定したい場合は下記のようになります。

上記の書き方だと、liタグの最初の5つの要素の背景を赤にするとなります。逆に、6つ目以降だと下記のようになります。

後ろからで考えたい場合は、nth-childの部分をnth-last-childとするだけです。

ところで、上記の例は確実に最初か最後を指定しなけければいけませんが、途中の連続した要素を指定したい場合ということが、稀にあるかもしれません(あまりないとは思いますが)。
続きを読む

セレクトボックスの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で動作サンプルを作ってみました。
説明不足なんで使い方は分かりにくいかもしれませんが、いろいろいじって確かめてみてください。

CSSの優先度:クラスはプラス10点,IDはプラス100点

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

1年ぐらい前まで知らなかったのですが、CSSにはクラスで指定するかIDで指定するかによって優先順位が違うようです。
CSSの優先順位~CSSテクニック~

どうやら、クラスではプラス10点、IDではプラス100点で、点数の高い方が優先されるらしい。ということはつまり、クラスが11個、IDが1個指定してあって、11個分のクラスと1個のIDでCSSを指定すると、11個分のクラスで指定した方が優先されるのか。と思って試してみた。

HTML

CSS

“あいうえお”の文字の色は青になるはず。

結果:

あいうえお

何で赤なんだよ!

いや待て。そういえばどこかでこの数値は16進数と聞いたことがあるぞ。あということは、クラスが17個だったらそっちが優先されるはず。

HTML

CSS

“かきくけこ”の文字の色は青になるはず。

結果:

かきくけこ

やっぱり赤になる・・・。何か間違ってるのだろうか・・・。