10.flexbox アレンジ編01
flexbox を使ってアレンジデザイン 01
javascript で可変伸縮デザイン
リキッドデザインに効果的な Flex Box レイアウトですが、PC と スマホ
両方のリキッドデザインを考える時、レイアウトの問題と同時にBox要素(div 等) の縮尺も行いたい場面が出てきます。
画像などの image 要素を埋め込んだ場合は比較的に簡単ですが、background-image を使用した場合や、Box 要素の縦横比を縮尺したい場合などは、javascript を併用する事で簡単に可能となります。
更に jquery も活用すれば初心者でも簡単に作る事が出来ます。
基本構造をデモで紹介していますので、動作を試してみてください。
画像などの image 要素を埋め込んだ場合は比較的に簡単ですが、background-image を使用した場合や、Box 要素の縦横比を縮尺したい場合などは、javascript を併用する事で簡単に可能となります。
更に jquery も活用すれば初心者でも簡単に作る事が出来ます。
基本構造をデモで紹介していますので、動作を試してみてください。
Navi Open
Close Navi
ads by google
デモと概要
デモ・サンプル では、1,「image
を直接埋め込む + font-size + box要素のmargin にvw を使用」
2,「image を
background で表示 + 縦横サイズと font-size + box要素のmargin にvw
を使用」
3,「image を background で表示 + 各数値を
javascript で制御」
以上の３種類の手法を例に作成してみました。
結果的に３種類とも一見同じ動きに成りましたが、vw を使用した場合にブラウザが未対応の物が有る様です。
又 Javascript を使用した例では、再読み込み・リサイズ 共に若干タイムラグが発生しました。 この問題はwindow load event に[window.addEventListener('load', function(){})]
window resize event に[window.addEventListener( 'resize', function() {})]を使用した際に発生し、同記述を[window.onload = function(){}],[window.onresize = function(){}]に変更する事で解消しました。
が、・・基本的にこの記述では、基本指定のサイズに対して倍率可変でサイズ変更を行っているため、倍率可変が生じた際の読み込み時には、必ずタイムラグが生じてしまいます。
この問題の解消については、未だ成し得てはいません。
又、当初書き入れていなかった、サイズ可変のボーダーラインである 800px 超の window size 時の対応について、倍率初期化(倍率 x 1.0)を書き加える事で、サイズ可変の両方向(縮小と拡大)にスムーズに対応する様になりました。
実用と言う観点ではあまり意味は無いとは思いますが・・・
各要素に対して[flex box]を指定する事で、センター寄せと最低限のサイズ対応の指定が不要になっています。
実際現役のプログラマーがどのような手法を使っているのかは知りませんが、flex box と併用する事で労力は少なくて済みますと言うのが実感です。
以上の３種類の手法を例に作成してみました。
結果的に３種類とも一見同じ動きに成りましたが、vw を使用した場合にブラウザが未対応の物が有る様です。
又 Javascript を使用した例では、再読み込み・リサイズ 共に若干タイムラグが発生しました。 この問題はwindow load event に[window.addEventListener('load', function(){})]
window resize event に[window.addEventListener( 'resize', function() {})]を使用した際に発生し、同記述を[window.onload = function(){}],[window.onresize = function(){}]に変更する事で解消しました。
が、・・基本的にこの記述では、基本指定のサイズに対して倍率可変でサイズ変更を行っているため、倍率可変が生じた際の読み込み時には、必ずタイムラグが生じてしまいます。
この問題の解消については、未だ成し得てはいません。
又、当初書き入れていなかった、サイズ可変のボーダーラインである 800px 超の window size 時の対応について、倍率初期化(倍率 x 1.0)を書き加える事で、サイズ可変の両方向(縮小と拡大)にスムーズに対応する様になりました。
実用と言う観点ではあまり意味は無いとは思いますが・・・
各要素に対して[flex box]を指定する事で、センター寄せと最低限のサイズ対応の指定が不要になっています。
実際現役のプログラマーがどのような手法を使っているのかは知りませんが、flex box と併用する事で労力は少なくて済みますと言うのが実感です。
image はHTMLで埋め込み、screen-width:800px 以下から image:width ,height とfont-size を全て[vw(viewport width : ビューポートの幅に対する割合)]で可変しています。注意点はHTML上でサイズ指定をしない事。
image は[background-image]で表示し、screen-width:800px 以下から格納先のbox要素の width ,height と font-size を[vw]で可変しています。
image は[background-image]で表示し、screen-width:800px 以下から格納先のbox要素の width ,height と font-size を[javascript]で可変しています。'load' と 'resize' 時に screen-width を取得し、対応する倍率に可変しています。
HTML
CSS
JS