Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

スマホ、CSSだけで、ブロックの高さを決める方法

2015年11月12日

みやびプリン 140 87

144 144

※この記事は4年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

こんちは。

会社の昼休みです。
北海道は、この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で%指定すると、
そのページ全体から(厳密にいえば親ブロックの大きさから)算出するので、ページの高さが変わると当然値も変わってしまう。

このテクニックを使えば、全デバイスによってイーブンの高さを指定することができるってわけ。
既にやってる人はいるかもしらんが、 思いついた時、俺天才、どやぁ・・・でした。

さて、メシ食いに行くか・・・・。

キャラフレ - メイン

トラックバック(0)

トラックバックURL:

コメントする