Download as PDF, PPTX
![２） スポンシブWebデザイ
レ ンの実装
要素の属性値を変更するJavaScript
<!--[if lt IE 9]> → IE9未満の場合だけ有効になる条件コメント
<script>
var logoSrc = → img要素のsrc属性を取得、 拡張子を書き換えて変数化
$(".logo img").attr("src").replace(".svg",".png");
$(".logo img").attr("src",logoSrc); → src属性の値を変更
</script>
<![endif]-->
参照 : http://js.studio-kingdom.com/jquery/attributes/attr](https://image.slidesharecdn.com/12thknock-yabe-rwd2-130207093628-phpapp02/75/Web-17-2048.jpg)
![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");
}
});](https://image.slidesharecdn.com/12thknock-yabe-rwd2-130207093628-phpapp02/75/Web-23-2048.jpg)
Uploaded byYasuhito Yabe
レスポンシブWebデザイン【発展編】
「12th Knock!」 第12回Knock! Knock! 勉強会（2013年 2月 7日、B-nest静岡市産学交流センターにて） レスポンシブWebデザイン【基礎編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd1
レスポンシブWebデザイン【発展編】
- 1. レスポンシブ Webデザイン【発展編】 2013年 2月7日 Knock! Knock! 勉強会
- 2. ※ 本資料は、Knock! Knock!サイで実践したこ ト とを紹介する のです。 も この内容が「正解」ベスト プラクテ ス」 うわけではあ ません。 「 ・ ィ とい り また、自社サイトだから可能な実験的ケースである ともご理解く こ ださい。
- 3. 本日のお題 １）JavaScriptによるHTML要素のイ ルード ンク ２）JavaScriptによるHTML要素の変形 差し替え ・ ３）今後の課題
- 5. W eb 5
- 6. W eb W eb/DTP W eb W eb S
- 7.
- 9.
- 11. news.html seminarListOuter.html sponsor.html JavaScriptによる 外部フ イァ ルのイ ルード ンク （モバイル時に不要な要素を外出し） passedEvent.html
- 12. ２） スポンシブWebデザイ レ ンの実装 外部フ イ ァ ルを読み込むJavaScript $.ajax({ → jQueryのajax関数でリクエスト url: "/inc/news.html", → 読み込むファイルを指定 success: function(news){ → 読み込み成功時の処理 $("#sidebar").prepend(news); → sidebarの先頭に挿入 } }); 参照 : http://js.studio-kingdom.com/jquery/ajax/ajax
- 13.
- 14.
- 15. SVG（Scalable Vector Graphics） SVGとは、XMLによ て記述されたベク っ ターイメー ジ言語の と、 る こ あ いはSVGで記述さ れた画像形式 の事。 W3Cでオー プン標準と て勧告さ し れている。 ベ ターデータ る画面表示では拡大や縮小をし ク によ ても描写の劣化が起き ない。 レスポンシブWebデザ ン向き イ ！ 参照 : http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
- 16.
- 17. ２） スポンシブWebデザイ レ ンの実装 要素の属性値を変更するJavaScript <!--[if lt IE 9]> → IE9未満の場合だけ有効になる条件コメント <script> var logoSrc = → img要素のsrc属性を取得、 拡張子を書き換えて変数化 $(".logo img").attr("src").replace(".svg",".png"); $(".logo img").attr("src",logoSrc); → src属性の値を変更 </script> <![endif]--> 参照 : http://js.studio-kingdom.com/jquery/attributes/attr
- 18.
- 19. グローバルナビの変形 ・スマホ画面は、 しても縦方向に長く りがち どう な ・スクロールしたときに、上まで戻るのも面倒 ・そもそも画面上部のボタ ンは押しにくいよね？ → スマホ用に要素を変形する、 う とい アプローチ
- 20. nav要素を変形するJavaScript １） （ $("nav").addClass("menuOn"); → nav要素にclass属性を付加 $("nav #navGlobal").hide(); → #navGlobalを非表示に $("nav #navSub").hide(); → #navSubを非表示に $("nav").prepend(" → ナビゲーションを展開するボタンを挿入 <span class="navOnOff"> <img src="/img/btn_nav.png"></span>" ); 参照 : http://js.studio-kingdom.com/jquery/effects/hide
- 21. nav要素を変形するJavaScript ２） （ $("nav.menuOn span").toggle( function(){ ↑ 対象をク ックするたびに要素の状態を切り替え リ $("nav #navGlobal").fadeIn("1000"); }, function(){ ↑ グローバルナビをフ ェードイ ン $("nav #navGlobal").fadeOut("1000"); } ↑ グローバルナビをフ ェードアウ ト );
- 22. とか書いてました。toggleイ トが廃止される ベン までは…
- 23. 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"); } });
- 24. 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; } }
- 25.
- 26. ナビゲーシ ンも外部フ イ ョ ァ ルをイ ルードし ンク ては？ → JSがオフだっ ？ SEO的に たら まずいよね？
- 27.
- 28. 画像のRetina （HiDPI）対応 DevicePixelRatio（viewport上の1pxとデバイス上で使用される実px数の比率） ・ の比率に適した画像でないと、 こ 画像表示が荒れる ・1系、 1.5系、 2系、 3系… ・DevicePixelRatioによ る画像の出しわけ → JavaScript / サーバーサ ド / 仕様も策定中… イ ※ HiDPI → High Dot Per Inch。高解像度
- 29. PC-スマホの切り替え機能 ・通常のRWD（Media Queries利用）では、 スリーンサ ズで強制的にレイ トが変わっ ま ク イ アウ てし う ・しかし、スマホでもPC用の画面で見たいこともある → 切り替えボタンで表示をコントロールしたい
- 30. モバイ ・ ァース！ ル フ ト ・このサ トは イ “PCフ ァースト” → PCサ トあ きで、 イ り スマホへの最適化を検討 ・スマホでのユーザビリテ など、 ィ 検討課題が残る状況 ・特にスマートデバイ ら スな ではのコンテキストは重要
- 31.
- 32.
- 33. 日時 : 2013年6月15日（土） 会場 : グランシップ （静岡市） comimg soon...
- 34.
- 35. 実装に困っ ら た ご連絡ください！
- 36. 本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy