Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブWebデザイン【発展編】

1,462 views

Published on

「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて)

レスポンシブWebデザイン【基礎編】は下記URLです
http://www.slideshare.net/yabecchy/12th-knock-yaberwd1

  • Be the first to comment

レスポンシブWebデザイン【発展編】

  1. 1. レスポンシブ Webデザイン【発展編】 2013年 2月7日 Knock! Knock! 勉強会
  2. 2. ※ 本資料は、Knock! Knock!サイ で実践したこ ト とを紹介する のです。 も この内容が「正解」ベスト プラクテ ス」 うわけではあ ません。 「 ・ ィ とい り また、自社サイトだから可能な実験的ケースである ともご理解く こ ださい。
  3. 3. 本日のお題1)JavaScriptによるHTML要素のイ ルード ンク2)JavaScriptによるHTML要素の変形 差し替え ・3)今後の課題
  4. 4. W eb 5
  5. 5. W ebW eb/DTP W eb W eb S
  6. 6. Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
  7. 7. 1)JavaScriptによるHTML要素のイ ルード ンク
  8. 8. news.html seminarListOuter.html sponsor.html JavaScriptによる 外部フ イァ ルのイ ルード ンク (モバイル時に不要な要素を外出し)passedEvent.html
  9. 9. 2) スポンシブWebデザイ レ ンの実装外部フ イ ァ ルを読み込むJavaScript$.ajax({ → jQueryのajax関数でリクエスト url: "/inc/news.html", → 読み込むファイルを指定 success: function(news){ → 読み込み成功時の処理 $("#sidebar").prepend(news); → sidebarの先頭に挿入 }}); 参照 : http://js.studio-kingdom.com/jquery/ajax/ajax
  10. 10. 2)JavaScriptによるHTML要素の変形 差し替え ・
  11. 11. SVG形式
  12. 12. SVG(Scalable Vector Graphics)SVGとは、 XMLによ て記述されたベク っ ターイメージ言語の と、 る こ あ いはSVGで記述さ れた画像形式の事。 W3Cでオー プン標準と て勧告さ し れている。ベ ターデータ る画面表示では拡大や縮小をし ク によても描写の劣化が起き ない。 レスポンシブWebデザ ン向き イ ! 参照 : http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
  13. 13. ただし、IE8以下は非対応…
  14. 14. 2) スポンシブ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
  15. 15. 変形
  16. 16. グローバルナビの変形・スマホ画面は、 しても縦方向に長く りがち どう な・スクロールしたときに、上まで戻るのも面倒・そもそも画面上部のボタ ンは押しにくいよね? → スマホ用に要素を変形する、 う とい アプローチ
  17. 17. nav要素を変形するJavaScript 1) ($("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
  18. 18. nav要素を変形するJavaScript 2) ($("nav.menuOn span").toggle( function(){ ↑ 対象をク ックするたびに要素の状態を切り替え リ $("nav #navGlobal").fadeIn("1000"); }, function(){ ↑ グローバルナビをフ ェードイ ン $("nav #navGlobal").fadeOut("1000"); } ↑ グローバルナビをフ ェードアウ ト);
  19. 19. とか書いてました。toggleイ トが廃止される ベン までは…
  20. 20. nav要素を変形するJavaScript 2) ($("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"); }});
  21. 21. 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; }}
  22. 22. こんな感じで、モバイル用のCSSも記述します
  23. 23. ナビゲーシ ンも外部フ イ ョ ァ ルをイ ルードし ンク ては? → JSがオフだっ ? SEO的に たら まずいよね?
  24. 24. 3)今後の課題
  25. 25. 画像のRetina (HiDPI)対応DevicePixelRatio(viewport上の1pxとデバイス上で使用される実px数の比率)・ の比率に適した画像でないと、 こ 画像表示が荒れる・1系、 1.5系、 2系、 3系…・DevicePixelRatioによ る画像の出しわけ → JavaScript / サーバーサ ド / 仕様も策定中… イ ※ HiDPI → High Dot Per Inch。高解像度
  26. 26. PC-スマホの切り替え機能・通常のRWD(Media Queries利用)では、 ス リーンサ ズで強制的にレイ トが変わっ ま ク イ アウ てし う・しかし、スマホでもPC用の画面で見たいこともある → 切り替えボタンで表示をコントロールしたい
  27. 27. モバイ ・ ァース ! ル フ ト・このサ トは イ “PCフ ァースト” → PCサ トあ きで、 イ り スマホへの最適化を検討・スマホでのユーザビリテ など、 ィ 検討課題が残る状況・特にスマートデバイ ら スな ではのコンテキストは重要
  28. 28. 告知
  29. 29. https://www.facebook.com/studyMeeting.shizuoka
  30. 30. 日時 : 2013年 6月15日(土)会場 : グランシップ (静岡市) comimg soon...
  31. 31. http://www.cssnite-kofu.com/vol2/
  32. 32. 実装に困っ ら た ご連絡ください!
  33. 33. 本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy

×