徒然脱出日記
つまらない日々にサヨナラだ!!

徒然脱出日記



【WordPress】「モバイルフレンドリー計画」第二弾 画面の広さに合わせてデザインを変更! 【ViewPort】

【WordPress】「モバイルフレンドリー計画」第二弾 画面の広さに合わせてデザインを変更! 【ViewPort】


こんばんは! 「しょん」です。

 

前回は、「PC」と「スマホ」でテーマを変更できるように、

Multi Device Switcherを導入しました。

 

スマホ用のテーマではサイドバーをなくすことで、

縦長の画面に合わせたデザインになりました。

 

 

 

ただ、このデザインの横幅って980pxなんです・・・(980pxはぼくのケータイの横幅・・・

 

つまり!

980px以上の横幅の端末で見ると、下の様に両脇が寂しい感じに・・・

 

 

 

 

800pxの横幅の端末で見ると、横がはみ出してしまうんです!

 

 

横幅が寂しいのは100歩譲ってよしとして、

はみ出してしまうのはまずいですよね~(ー_ー)

 

 

できれば、どの横幅の端末絡みても、

画面にピッタリフィットしてほしいですよね!?

 

 

そこで必要になってくるのがビューポートの設定です!

 

 

今日はビューポートの設定方法を紹介したいと思います!

 

 


ビューポートとは


モバイルフレンドリーに関する一番最初の記事でこのサイトの問題点を挙げた際に、

問題点の一つとしてビューポートの設定がないことがありました。

 

そのときはビューポートってなに@q@?

って感じだったので、調べてみたんですが、、、

 

ぶっちゃけ今でもよくわかりませんww

 

「Webサイトにおける表示領域」だとか・・・

「meta要素のnameの属性の値にviewportを指定して、横幅や倍率を指定」だとか・・・

 

さっぱりわからん!

 

わかったことは、ぼくの理解力の低さと!!

 

とりあえず、

 

ビューポートの設定をしたら画面ぴったりにできる!!

 

ということだ!!

 

このことさえ分かってれば、もう大丈夫@q@b

 

 

 

 


ビューポートの設定方法


 

ビューポートの設定をするには<header>タグに下記の一文を追加しよう!

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

これで完璧!!

 

よし、グーグル先生に評価してもらおう!

 

なんか問題点全部解決した!w

 

でも、プレビューを見ると、

画像と文字がめっちゃかぶってるやん・・・

 

 

 


レイアウトの調整


 

ビューポートの設定を行った場合は、

pxで指定したレイアウトを

vw・vh・vmin・vmaxに変更しましょう。

 

 

1vwは画面の横幅の100分の1の長さになります。

なので、100vwは画面の横幅と同じ長さになります!

 

 

1vhは画面の縦幅の100分の1の長さになります。

なので、100vhは画面の縦幅と同じ長さになります!

 

 

1vminは画面の縦幅か横幅の短い方の100分の1の長さになります。

 

 

1vminは画面の縦幅か横幅の長い方の100分の1の長さになります。

 

 

これらはpxと違い、画面の解像度による影響を受けません!

 

 

 

これらを駆使することで、

モバイルの画面の解像度に影響されないレイアウトを作成することができます。

 

例えば、

記事の白い枠線の横の長さを

画面の横幅の90%くらいにしたいな~

 

とか思えば 90vwと書けば良いのです!

 

 

 

 


%とViewPort単位の違い


 

ここまで読むと%と同じでは?

と思いますよね?

 

%とviewport単位の違いは、ざっくり2点です。

 

 

1.スクロールバーの考慮

 

例えば、サイト全体の横幅を

 

width: 100%;

 

と指定した場合は画面の横幅一杯に広がります。

また、スクロールバーがある場合もスクロールバーを考慮して横一杯広がるので、

水平方向のスクロールバーが表示されることはありません。

 

↓width: 100%;の例

水平方向のスクロールバーは出ていませんね。

 

 

 

しかし、100vwと指定すると

垂直方向のスクロールバーがない場合は100%と同じように表示されますが、

 

垂直方向のスクロールバーがある場合は

スクロールバーの横幅の分が隠れている状態となり、

水平方向のスクロールバーが表示されてしまいます

 

↓width: 100vw;の例

水平方向のスクロールバーが表示されていますね。

 

 

 

2.%は親に対する比率

 

1vwという長さはどこで使っても同じ長さになります。

 

しかし、1%というのは親コントロールの1%となり、

同じ1%でも使う場所によって長さが異なります。

 

 

 

このように%とViewPort単位では若干の違いがありますので、

最適な方を選んで使用しましょう。

 

 

 


最後に


今回はビューポートを設定することで、

解像度が異なるモバイルへの対応を行いました。

 

そして、なんと!

 

ビューポートを設定するだけで、3つあった問題点がすべて解決しました!w

理由はよくわかりませんが・・・w

 

 

なので、とりあえず、モバイルフレンドリー計画は一旦終了ですww

 

 

でも、モバイルってものすごいたくさん種類があるので、

まだまだ、問題がたくさん出てきそうです。

 

今後、問題が出てきたらそのたびに修正し、

記事にしたいと思います!!

 

 

それじゃ、またノシ

 

 

 

 

 

 




コメント


コメント投稿