-
Google Web Designer
デベロッパーのニベーシです
-
この動画では パーセントベースの
可変レイアウトを作成する方法を説明します
-
こちらのサンプルドキュメントは
-
すべての要素の位置とサイズが
ピクセルで指定されています
-
プレビューしてブラウザの
サイズを変更しても
-
レイアウトは調整されません
-
要素の位置とサイズは固定です
-
パーセントベースの
レイアウトに変更してみましょう
-
メインページのコンテナを
画面サイズに合わせて調整するには
-
[ビューポートに合わせる]
ボタンをクリックします
-
これでページの幅と高さが
100%に設定され
-
画面サイズに合わせて
ページが伸縮するようになります
-
要素ごとに左位置、上位置、幅、高さを
変えることもできます
-
黄色のdivをクリックして
単位のセクションで
-
左位置、上位置、幅、高さの単位を
パーセントに変更します
-
複数の要素を選択し
-
位置やサイズを
パーセント単位にすることもできます
-
下の3つの要素を選択し
単位を[%]に変更します
-
これで各要素の左位置と上位置、
幅と高さをパーセントに変更できました
-
状況によっては
要素の幅と高さは固定したまま
-
画面サイズに合わせて
位置だけ変えたい場合もあります
-
このロゴ要素を選択し
-
左位置と上位置は[%]に変更しますが
幅と高さはピクセルのままにします
-
ブラウザでプレビューしてみましょう
-
ブラウザのサイズを変えると
ビューポートに合わせて要素が調整されます
-
可変レイアウトを簡単に作成するには
-
選択ツールオプションバーの
可変レイアウトオプションを利用できます
-
別のファイルで見てみましょう
-
下の3つの要素はパーセントベースの
レイアウトになっておらず
-
単位がピクセルになっています
-
可変レイアウトオプションが
オンとオフの場合を比較してみましょう
-
まずオフにします
-
3つの要素を選択し
-
親コンテナの縦方向の
中央に位置揃えします
-
横方向は 親コンテナに合わせて
等間隔に配置しましょう
-
ではプレビューします
-
ご覧の通りブラウザのサイズを変えても
3つの要素は調整されません
-
先ほど設定した位置のままです
-
こうなってしまうのは
可変レイアウトをオフにすると
-
位置やサイズの設定が1回限りとなり
調整されないからです
-
可変レイアウトをオンにして
もう一度設定してみましょう
-
縦を中央揃え
横を等間隔にします
-
プレビューします
-
可変レイアウトをオンにすると
パーセントベースでの位置揃えとなり
-
要素同士や親コンテナとの相対で
各要素の位置やサイズが調整されます
-
この動画は以上です
-
ありがとうございました
