※この記事は9年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
こんちは。
会社の昼休みです。
北海道は、この11月なのに雨が連日降ってます。
異常気象・・・。
さて、表題いってみよう。
スマホの利用者が増えている昨今。
コーダーも、一つの案件でサイトをほぼ二つ作るような感覚だ。
であるからして、スマホ特有のコーディングテクニックみたいのが必要になってくる。
その中で、一つやっかいなのは、"ブロックの高さ"の問題。
ブロック内要素によって、高さが決まるなら特に問題はないが、
中身が、position: absolute、だったりしたら、親ブロックの高さは少々やっかい。
CSSのメディアクエリーで指定する?
JavaScriptでCSSを変える?
むしろ、jQueryで後付けする?
ぶっちゃけ、どれも微妙・・・。
メディアクエリーだと、指定するデバイスに限りがある。
JSだと、読み込みスピードによってはやっぱり調整前が出てしまうし、だいたいにおいて書くのもめんどう。
CSSだけでできないだろうか・・・?
はい、できます!
(youtubeのあの広告風に)
.wrapperBlock { padding: 60% 0 0; position: relative; overflow: hidden; } .wrapperBlock .childrenBlock { position: absolute; }
そう、paddingで指定するのだよワトソン君!
中身は、absoluteだから、paddingが地球より大きい値でも大丈夫だ、問題ない。
(いや、PC殺す気か)
知ってる人は知ってると思うが、この、
marginとpadding、%値を指定すると、ページの横幅から値を算出する。
つまり、デバイス横幅が、320px(iPhone 4~5S、など)の時60%と指定すると、
192pxになってくれるわけ。
縦margin、paddingでも同じく横幅から算出する。
これは、Webページが、縦に伸びる性質を持つので、どんな高さになっても、値が変動しないように、との仕様だろう。
PCはウィンドウ幅変えれるけど、スマホは基本的には変わらない。
(横にしなくても見やすいように工夫するしね)
これが、height値だとそうはいかず、heightで%指定すると、
そのページ全体から(厳密にいえば親ブロックの大きさから)算出するので、ページの高さが変わると当然値も変わってしまう。
このテクニックを使えば、全デバイスによってイーブンの高さを指定することができるってわけ。
既にやってる人はいるかもしらんが、
思いついた時、俺天才、どやぁ・・・でした。
さて、メシ食いに行くか・・・・。
コメントする