css, Web関連

レスポンシブ対応:background-imageに関するおぼえがき

このポストは文字数 約:1526文字、約 3分で読めます。

海外だと、ハンバーガーメニューなどが主流ですが、日本だとスマホの場合でも4個とか5個とかの横並びのナビゲーションを実装したいという場合が多々あるかと思います。
そんなときに、デバイスの幅が変わって崩れて発狂!!!にならないために。

ですので、主に背景画像どーとかというより横並びのボタンをレスポンシブ対応にさせたいときに使用しています。

menu
※一番左端のはキノコじゃなくてホームのボタンです、ホームの。
丸くしすぎたw

と、いうわけで参考:
background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに):Qiita
【CSS】デバイス幅に合わせたサイズ可変のメニューボタンをbackgroundで作る:creativememomemo

ちなみに、算数とか数学とかものすっごいニガテで・・・。

デバイスの幅○○ピクセル時のときの画像の高さ ÷ デバイスの幅 × 100 = 答え

なのですが、参考にしたところその1では、複数あったときの計算方法は書かれていませんでした。

んで、2つめのは、

今回は幅320pxの時に幅160px高さ50pxのメニューボタンを2つ×2段になるように並べました。なのでpadding-topの%は50÷320×100=15.625で15.625%としました。

と、書かれてるんですが・・・
多分算数ができる人なら一発でわかるのでしょうが・・・私わからずで

↑の計算しても、なんかおかしい

ことに。

最初の頃は、もう目で見て0.01%単位で調整してました。
(計算式のイミ・・・・)

で、そんなにしょっちゅう使うことも実はないので、「なるほど」と納得する → 忘れて以下ループ
の繰り返し。

じゃあ複数並んだところは・・・どうすれば?
という場合の計算式
デバイスの幅○○ピクセル時のときの画像の高さ × 並べたい個数 ÷ デバイスの幅 × 100 = 答え
これで、ばっちりです。

デバイスの幅○○ピクセル時の幅のときの高さとかどーやってだすんだよ

と思った方へ。

フォトショなり、イラストレーターなりでカンプ作っていると思います。
その幅を基準に高さを出せば問題解決です(笑)

忘れがちですが

heightを0にし忘れて「計算あってるのに、おかしいいい!!!!」
が、自分の中であるあるですので、忘れずに入れましょう・・・。

横に並べるときのcssベンリ技

display: tableとか%指定でも別にいいのですが、ここはやはり折角ベンリなものがあるので使いましょう。

calcです。
例えば、幅100%を5個で割りたい。
場合には
width:calc(100% / 5)
これだけで、メンドウくさい%やらpxやら考えなくても一発で計算してくれます。

ちなみに、計算式があっているのかどうかはわかりませんが、1pxあけたい(マージンで1px取る)という場合でも対応しています。

width:calc((100% - 4) / 5)

※4なのは、1pxあける箇所が4箇所なため。
これが3箇所なら3、などになります。
(割と適当な式でも、計算してくれるのでスゴいです)
なんか複雑な計算もできるらしいのですが、使ったことが無いので割愛・・・。

超ベンリなCalcの対応状況は以下で確認してください
http://caniuse.com/#search=calc

ちなみに、ハンバーガーメニューに関しては賛否両論あるようですね。
幅だの高さだのに悩まされなくて済むので、個人的には好きなのですが
解りづらい・見づらい・押しづらい からイヤだという意見もあるようです。
(あと数年したら、あの3本線だったり、タテに丸3つ並んでいるものはメニューである、と定着するとは思いますが)

この記事が気に入ったら
シェアしてね

Twitter で