106 Comment / Trackback

レスポンシブでサイトを作ることが増えています。
予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。
ワンソースで考えたほうが運用は効率的だと思うから。

Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいあります。その後いくつかレスポンシブでサイトを作ってみて、よく使うスニペットだったり、覚えておくと便利なプラグインをいくつか蓄積してきてます。
そんなわけで、今回はレスポンシブコーディングのスニペットを備忘録としてまとめてみました。

JavaScriptで画面幅を計算するとき

CSSではMedia Queriesを使って以下のように画面幅によってスタイルを変えます。

/* 画面幅1000pxまで */
@media screen and (max-width:1000px) {
/* スタイルを記述 */
}

/* 画面幅320pxから640pxまで */
@media screen (min-width:320px) and (max-width:640px) {
/* スタイルを記述 */
}

jQueryでやる場合は、$(window).width(); で画面幅を取れますが、ブラウザによってスクロールバーの幅を取れなかったりします。なので、以下のように書いたほうがうまくいきます。

/* 画面幅1000pxまで */
if (window.matchMedia('(max-width:1000px)').matches) {
/* JavaScriptを記述 */
}

/* 画面幅320pxから640pxまで */
if (window.matchMedia('(min-width:320px) and (max-width:640px)').matches) {
/* JavaScriptを記述 */
}

ただし、Window.matchMedia() はIE10以上から対応なので要注意。

画面のリサイズが終わった時にイベントを実行

ブラウザを伸び縮みさせてしまうのはWebデザイナーの性であって普通の人はそんなに頻繁にブラウザの伸び縮みなんてさせないでしょうけど、画面伸縮時の処理を $(window).resize(function() { …とやってしまうと、画面を伸縮させている間じゅう常にイベントが発生してしまいます。
もちろん、画面の伸び縮みと同時に動いてほしいイベントもありますが、画面がリサイズした後に走ればいいイベントは以下のように書いたほうがブラウザへの負担が少ないでしょう。

var timer = false;
$(window).resize(function() {
  // 画面リサイズ中に同時に行うイベントを記述
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
  // 画面サイズが変わり終わったあとに実行するイベントを記述
  }, 200);
});

[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

スマホ版は改行位置を変えたい時

PC版は意味の区切れがよいところで改行したいけど、スマホ版だとおかしいから改行を無くしたい時ってある。そんなときは、<br>タグを display:none; にすればOK。

br {
display:none;
}

SVG画像の代替表示

ようやく躊躇なくSVGが使えるようになってきた気がします。だけど、IE8はまだ捨てられないかも。
CSSの背景画像なら、IEの条件分岐コメントを使ってIE8以下にだけ代替画像を読ませればよいですね。

<!--[if lte IE 8]>
<!-- ここに書いたコードはIE8以下に適用される -->
<![endif]-->

ちなみにIE9もSVG1.1をフルサポートしているわけではないみたい。

IE Teamのプログラムマネージャが語るIE9とSVG | Web標準Blog | ミツエーリンクス

あと、<img>タグで書かれたSVGはHTMLを書き換えてやる必要があります。
僕の場合、<img>タグに独自データ属性を使って data-nosvg=’png’ みたいに代替画像の拡張子を指定しといてjQueryで置き換えちゃいます。

HTMLは以下のようなイメージ。

<!-- data-nosvg にSVG画像を書き換える画像の拡張子を指定する（ファイル名はSVGと同じ） -->
<img src="/img/image.svg" data-nosvg="png" alt="代替テキスト" width="100" height="100" />

そしてjQueryはこう。このJavaScriptもやはりIE8以下にだけ読み込ませてやります。

// 拡張子 .svg を data-nosvg で指定した拡張子に置換
$(function() {
  // 画像置換
  $('img').each(function() {
    // data-nosvgに設定した拡張子を取得
    var extension = $(this).attr('data-nosvg');
    if (extension != undefined) {
      // SVG画像を置換
      $(this).attr('src', $(this).attr('src').replace(/^(.+)(\.svg)$/ , '$1.' + extension));
    };
  });
};

SVG画像の圧縮処理

パンくずをフリックで横スライドするように

ブロック要素全体をクリックできるように

以上、最近コーディングしててよく使うスニペットやプラグインたちでした。
たまにはこんな備忘録エントリーも。

Trackback

http://writing-mode.com/20150303/responsive/trackback/