狠狠撸

レスポンシブ Webデザイン【発展編】
2013年 2月7日
Knock! Knock! 勉強会

※ 本資料は、Knock! Knock!サイで実践したこ
トとを紹介するのです。
も
この内容が「正解」ベストプラクテス」うわけではあません。
「 ? ィといり
また、自社サイトだから可能な実験的ケースであるともご理解く
こださい。

本日のお題

１）JavaScriptによるHTML要素のイルード
ンク
２）JavaScriptによるHTML要素の変形差し替え
?
３）今后の课题

レスポンシブ奥别产デザイン【発展编】

W eb

W eb/DTP

W eb

W eb S

Knock! Knock! ～静岡のWeb制作者のための勉強会～

１）JavaScriptによるHTML要素のイルード
ンク

news.html

seminarListOuter.html
sponsor.html JavaScriptによる
外部フイァルのイルード
ンク
（モバイル時に不要な要素を外出し）

passedEvent.html

２）スポンシブWebデザイ
レンの実装

外部フイ
ァルを読み込むJavaScript
$.ajax({ /slideshow/12th-knock-yaberwd2/16403345/→ jQueryのajax関数でリクエスト
url: "/inc/news.html", /slideshow/12th-knock-yaberwd2/16403345/→ 読み込むファイルを指定
success: function(news){ /slideshow/12th-knock-yaberwd2/16403345/→ 読み込み成功時の処理
$("#sidebar").prepend(news); /slideshow/12th-knock-yaberwd2/16403345/→ sidebarの先頭に挿入
}
});

参照 : http://js.studio-kingdom.com/jquery/ajax/ajax

２）JavaScriptによるHTML要素の変形差し替え
?

SVG（Scalable Vector Graphics）

SVGとは、 XMLによて記述されたベク
っターイメー
ジ言語のと、る
こあいはSVGで記述された画像形式
の事。 W3Cでオープン標準とて勧告さ
しれている。
ベターデータる画面表示では拡大や縮小をし
クによ
ても描写の劣化が起きない。
レスポンシブWebデザン向き
イ！

参照 : http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

ただし、滨贰8以下は非対応…

２）スポンシブWebデザイ
レンの実装

要素の属性値を変更するJavaScript


参照 : http://js.studio-kingdom.com/jquery/attributes/attr

グローバルナビの変形
?スマホ画面は、しても縦方向に長くりがち
どうな
?スクロールしたときに、上まで戻るのも面倒
?そもそも画面上部のボタンは押しにくいよね？
/slideshow/12th-knock-yaberwd2/16403345/→ スマホ用に要素を変形する、う
といアプローチ

nav要素を変形するJavaScript １）
（
$("nav").addClass("menuOn"); /slideshow/12th-knock-yaberwd2/16403345/→ nav要素にclass属性を付加
$("nav #navGlobal").hide(); /slideshow/12th-knock-yaberwd2/16403345/→ #navGlobalを非表示に
$("nav #navSub").hide(); /slideshow/12th-knock-yaberwd2/16403345/→ #navSubを非表示に
$("nav").prepend(" /slideshow/12th-knock-yaberwd2/16403345/→ ナビゲーションを展開するボタンを挿入
<span class="navOnOff">
<img src=/slideshow/12th-knock-yaberwd2/16403345/"/img/btn_nav.png"></span>"
);

参照 : http://js.studio-kingdom.com/jquery/effects/hide

nav要素を変形するJavaScript ２）
（
$("nav.menuOn span").toggle(
function(){ ↑ 対象をクックするたびに要素の状態を切り替え
リ

$("nav #navGlobal").fadeIn("1000");
}, function(){ ↑ グローバルナビをフェードイン

$("nav #navGlobal").fadeOut("1000");
} ↑ グローバルナビをフェードアウト

);

とか書いてました。toggleイトが廃止される
ベンまでは…

nav要素を変形するJavaScript ２）
（
$("nav").click(function() {
if ( $("nav #navGlobal.off")[0] ) {
$("nav #navGlobal").show()
.addClass("on").removeClass("off");
} else if ( $("nav #navGlobal.on")[0] ) {
$("nav #navGlobal").hide()
.addClass("off").removeClass("on");
}
});

nav要素を変形するタイ
スルシート
#container nav {
width: 100%; height: 44px; position: fixed;
bottom: 5px; left: 5px; z-index: 999;
.navOnOff {
color: rgb(255,255,255); text-align:center;
display:block; width:44px; height:44px;
background:rgba(51,51,51,0.8);
border-radius: 2px;
}
}

こんな感じで、モバイル用の颁厂厂も记述します

ナビゲーシンも外部フイ
ョァルをイルードし
ンクては？
/slideshow/12th-knock-yaberwd2/16403345/→ JSがオフだっ？ SEO的に
たらまずいよね？

画像の搁别迟颈苍补
（HiDPI）対応
DevicePixelRatio（viewport上の1pxとデバイス上で使用される実px数の比率）

? の比率に適した画像でないと、
こ画像表示が荒れる
?1系、 1.5系、 2系、 3系…
?DevicePixelRatioによる画像の出しわけ
/slideshow/12th-knock-yaberwd2/16403345/→ JavaScript / サーバーサド / 仕様も策定中…
イ

※ HiDPI /slideshow/12th-knock-yaberwd2/16403345/→ High Dot Per Inch。高解像度

PC-スマホの切り替え機能
?通常のRWD（Media Queries利用）では、
スリーンサズで強制的にレイトが変わっま
クイアウてしう
?しかし、スマホでもPC用の画面で見たいこともある
/slideshow/12th-knock-yaberwd2/16403345/→ 切り替えボタンで表示をコントロールしたい

モバイ ? ァース！
ルフト
?このサトは
イ “PCファースト”
/slideshow/12th-knock-yaberwd2/16403345/→ PCサトあきで、
イりスマホへの最適化を検討
?スマホでのユーザビリテなど、
ィ検討課題が残る状況
?特にスマートデバイら
スなではのコンテキストは重要

https://www.facebook.com/studyMeeting.shizuoka

日時 : 2013年 6月15日（土）
会場 : グランシップ（静岡市）
comimg soon...

http://www.cssnite-kofu.com/vol2/

実装に困っら
たご連絡ください！

本日はあがとございま
りうした
ご連絡?ご質問など下記までお願いします
E-mail : info@hamnaly.com
Facebook / Twitter : yabecchy

狠狠撸

レスポンシブ奥别产デザイン【発展编】

More Related Content

What's hot (20)

Similar to レスポンシブ奥别产デザイン【発展编】 (20)

More from Yasuhito Yabe (15)

レスポンシブ奥别产デザイン【発展编】