News


全世界100億人のProideファンの皆様、こんにちは!
ひっさしぶりにブログを書ける余裕ができました!
最後に書いたのが5月だから、半年近くさぼってしまいました。ネタは死ぬほどあるのですが、いいネタがあったら、ここで書くより、自分が運営しているプライベートのブログで書きた・・・ゲフンゲフン。ということで久しぶりのProide Monthly Reportの更新です!!

今日は相変わらずWeb業界で話題のレスポンシブウェブデザインで使えるテクニックを5つほど紹介します!

  1. background-imageで指定した画像を縦横比を維持してリサイズさせる
  2. tableをばらす
  3. PCとスマホで表示そのものを切り替える
  4. 特定のカラムだけ横幅を固定にする
  5. CSSのプロパティの初期化

1.background-imageで指定した画像を縦横比を維持してリサイズさせる

レスポンシブウェブデザインではブラウザやデバイスの横幅は可変であるものとしてコーディングします。通常のimgタグで指定される画像はCSSファイル内に

と記述するだけで、自動的に縦横比を維持した状態でリサイズさせることが可能です。それでは画像は画像でもCSSのbackground-imageで指定された背景画像を縦横比を維持してリサイズさせることは可能でしょうか? 

background-imageで画像を指定するためには、何らかのHTMLの要素に対してCSSで指定することになります。指定する横幅はいつも通り100%(横幅いっぱい)と指定すればいいのですが、高さに関してはそうもいきません。通常要素の高さというものは、要素の中身に含まれているコンテンツの量に応じて変化するからです。しかし、背景画像の横幅に応じて縦横比を維持した伸縮した場合、要素の高さというものは中身のコンテンツの量ではなく、その時々の要素の横幅に応じて決定されるべきです。つまり中身のコンテンツの量とは無関係です。

高さが固定であれば直接CSSにheightプロパティを指定できますが、画面幅に応じて縦横比を維持させるために横幅の縮小に応じて高さも小さくなってしまいます。そこでbackground-imageを指定する要素の高さをheightプロパティではなく、padding-topプロパティをつかって擬似的に要素の高さを指定することにします。

padding-topとは要素内の内側の上部の余白を指定するプロパティです。このpadding-topに%指定で値を設定すると、要素の横幅を基準とした高さを設定することができます。

20151029_001

上の例では横幅が500px、高さが375pxの画像ファイルを背景画像として使用した場合です。
この場合、高さは横幅に比べて75%の大きさを持つため、CSSで指定するpadding-topは75%となります。このように指定することにより、ブラウザをリサイズしたとき、画像の横幅が500pxの時は高さが375pxで表示され、さらに変化して横幅が320pxの時は高さが240pxになる、という感じに変化します。

サンプルとして画像のファイル名を「koala.jpg」としたときの、HTMLとCSSはこのようになります。(画像ファイルの大きさは異なります)

サンプルを見る

div.sample01が実際に背景画像を設定する要素です。widthとpadding-topの他に、background-size:cover;を追加することを忘れないでください。これは要素の大きさに応じて、background-imageで指定した画像ファイルを伸縮させるプロパティです。これを指定することで、imgタグで指定された画像ファイルの伸縮と同じようなデザインにすることができます。

2.tableをばらす

表組で使われるtableタグをレスポンシブに対応させる方法です。
HTMLで使われる表はExcelのシートのようになっているのですが、Media Queryを使うことで画面幅に応じてtableレイアウトを変化させることができます。ここでは一番よく使われるテクニックとして、display:block;を使ったサンプルを紹介します。

サンプルを見る

Media Queryで画面幅が768px以下の箇所に2カ所tdとtrのところに、
「display:block;」
と書かれた行があります。
このように書くことで、表としてレウアウトされた要素をただのブロック要素に変化させることが可能です。サンプルをブラウザで開いてみて、ブラウザの横幅を広げたり縮めたりしてみたらよくわかると思います。

3.PCとスマホで表示そのものを切り替える

同じHTMLでPCとスマホの両方に対応できるのがレスポンシブウェブデザインのメリットですが、どうしてもレイアウトの関係でPCとスマホで共用できるHTMLが書けない場合があります。そういうときはしょうがないので、HTMLにPC用の記述とスマホ用の記述を両方書いておいて、

・PCのサイズの時はスマホ用のHTMLを表示させない。
・スマホのサイズの時はPC用のHTMLを表示させない。

というやや強引なテクニックを用いるケースがあります。

表示の切り替えは、
display:none; /* 表示させない */
display:block; /* 表示させる */
と、displayプロパティで切り替えることができます。

サンプルを見る

CSSの上部(画面幅が769px以上の時)はスマホ用コンテンツを非表示にするため、

を書きます。
そしてメディアクエリ内部(画面幅が768px以下の時)はPC用のコンテンツを非表示にして、スマホ用コンテンツを表示させるため、

と書きます。
サンプルを開いて、ブラウザの横幅を広げたり縮めたりすると、書かれている文字が変化するのが確認できます。

4.特定のカラムだけ横幅を固定にする

ブログのレイアウトでよくある、左あるいは右にサイドバーがあって、反対側にコンテンツを記述するカラムがあるようなデザインで、画面幅を縮めた時に、サイドバーの横幅は固定だけど、コンテンツの横幅は画面幅に合わせて縮めるというデザインを実現します。

これは10年くらい前からあるテクニックで、昔はネガティブマージンを使って実装していました。最近はCSS3で追加された「calc」というものを使うときわめて簡単に実装することができます。

calcとは単位の異なる数値をごちゃまぜにして計算することができる関数みたいなものです。
例えばこんな風に使います。

こうすると、contentsの横幅が親要素の横幅(100%)引く200pxの幅を指定することができます。
これを使うと、タイトルで上げたようなサイドバーだけ横幅固定というものを簡単に実装できます。つまり、

20151029_002

と、このような考え方で使用できます。

サンプルを見る

5.CSSの初期化

レスポンシブウェブデザインでは上で紹介した4つのテクニックで使われているように、CSSを縦横無尽に記述する必要があります。通常のホームページでは固定された横幅でレイアウトをする機会が多いので、ある場所で書いたCSSを別の場所で上書きしていしたり、初期化したりすることは少ないのですが、レスポンシブでは画面幅に応じて同じセレクタのCSSを変化させたり、初期化させたりということをしょっちゅうやります。そこでよく使われるプロパティーを初期化するための値を紹介します。

・floatの初期化
float:none;
を使います。

・width heightの初期化
width:auto;
height:auto;
を使います。

・positionの初期化
position:static;
を使います。

・z-indexの初期化
z-index:auto;
を使います。

・max-width max-heightの初期化
max-width:none;
max-height:none;
を使います。

・背景色の初期化(透明にする)
background-color:transparent;
を使います。

以上、レスポンシブでよく使われる5つのテクニックを紹介しました。ここで紹介したテクニックは本当に基本的なものです。しっかりとマスターして、ちゃんとしたレスポンシブコーディングができるようになりましょう!

このエントリーをはてなブックマークに追加