toggle
札幌市東区でマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、プラモ制作などを行う就労支援事業所です。マスコットキャラクター、ミライクマ3兄弟のLINEスタンプ好評発売中!
2017-11-17

れすぽんしぶ~

こんにちは。まるたにです。

今日は・・・レスポンシブwebデザインのお話します・・・か。まだ私も完璧に出来るわけではないのでそんなに語れないですけども。
レスポンシブ用のプロパティが多すぎて全部が全部、説明しきれませんw
なので・・・はしょりながら説明します!

レスポンシブwebデザインはパソコン、タブレット、スマートフォン等あらゆるデバイスに最適化したwebサイトを単一のHTMLで実現する制作手法です。
スマートフォンの急速な普及により、webサイト制作の現場ではパソコン向けの従来型のwebサイトに加えて、スマートフォンの小さな画面でも見やすいようにデザインされた専用のwebサイトである「スマートフォンサイト」が登場しました。すでに海外を中心に大手企業サイトでも実際に利用されています。

例えばHTMLファイルが振り分けの為端末ごとに5種類あった場合、画像を1つ更新するたびに5つのHTMLを更新しなければなりません。また画像サイズや解像度などの細かい指定が必要ならば更新作業はさらに煩雑(はんざつ)になります。

レスポンシブwebデザインは「フルードグリット(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。

フルードグリッド ⇒ フルードグリッドはwebページの要素を罫線(けいせん)や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルートデザイン(Fluid Design)」を合わせたものです。
レスポンシブwebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に値を%に変換してフルートデザインに変更します。

フルートイメージ ⇒ フルートイメージはレイアウトの大きさに追随(ついずい)して画像のサイズを拡大・縮小する手法でCSSのみで実装できます。イギリスのコンサルティングファーム「Clearleft」のリチャード・ルター(Richard Rutter)氏によって提唱(ていしょう)されました。

メディアクエリー ⇒ メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件に合わせて別々のCSSを適用する技術です。レスポンシブwebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

Viewport(ビューポート)の指定

head要素内にある「meta name=”viewport”」はスマートフォン向けのviewportの設定です。
スマートフォンのブラウザの多くは「viewport」と呼ばれる仮想ウィンドウサイズが設定されており、設定されたviewportサイズにwebページを縮小して表示します。
viewportサイズは標準では➀のように設定されています。

————————————————-
 ios(phone)|safari |980px
————————————————-
 Android | Androidブラウザ | 800px
————————————————-
 Windows Phone | Mobile Internet Explorer | 1024px
————————————————-
 ー | Opera Mobile | 850px
————————————————-

phone3GSの解像度は320×480pxですので本来であればページの一部しか表示されないはずですが、実際にはwebページ全体が縮小されスクリーンサイズぴったりに表示されています。幅320pxのphoneがViewportによって幅960pxのウィンドウになりきって表示しているのです。
不思議な現象なのですがこれがスマートフォンのViewport機能です。

記述方法はHTMLのhead要素に
meta要素を使います。⇒<meta name=”Viewport” content=”プロパティ“>

Viewportのプロパティ

device-width ⇒ デバイスのスクリーンの幅に合わせる

device-height ⇒ デバイスのスクリーンの高さに合わせる

initial-scale ⇒ 最初の表示倍率を0~10.0の範囲で指定

minimum-scale ⇒ 最小の縮小率を0~10.0の範囲で指定

maximum-scale ⇒ 最大の拡大率を0~10.0の範囲で指定

user-scalable ⇒ ユーザーによる拡大・縮小の許可をyes(有効)またはno(無効)で指定

emによるサイズの指定

レスポンシブのセッティングを使って小さなウィンドウ程文字サイズが小さくなるようにする必要があります。

ウィンドウサイズによってフォントサイズを変えるといっても、すべての要素のフォントサイズや余白をいちいちウインドウサイズごとに記述していては面倒です。そこでレスポンシブタイプセッティングでは、font-size、レイアウト上下のmargin、paddingをすべて「em」という単位で指定します。
emとは、フォントの大文字の”М”の高さを基準とした相対単位です。

・px ⇒ 1pxを1とする大きさ。ディスプレイの解像度に依存する。
・em ⇒ 適用する要素のfont-sizeプロパティの値を1とする大きさ。font-sizeプロパティで使用するときは親要素のfont-sizeプロパティの値が1になる。

例えば基準となるfont-sizeが16pxとすると。

・0.5em₌8px
・1em₌16px(基準値)
・2em₌32px
・3em₌48px

基準値が12pxとすると。

・0.5em₌6px
・1em₌12px(基準値)
・2em₌24px
・3em₌36px

emに変換したいpx値÷基準となるfont-sizeのpx値です。

pxではなくemに採用する理由はhtml要素のfont-sizeを変更するだけで子要素(html要素以下のすべての要素)の指定値が連動して変更されます。
しかしpxでも全然いける人はいけると思います!




( ^ω^)・・・記述して疲れました。レスポンシブ恐ろしすぎる…ww
しかし時代はレスポンシブもしなきゃならなくなりました。

ここまでにします。また続き(多分。。。)の次回に。それでは。

関連記事