O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.508 visualizações

Publicada em

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

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

  • Seja o primeiro a comentar

レスポンシブ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

×