Advertisement
Advertisement

More Related Content

Slideshows for you(20)

Similar to レスポンシブWebデザイン【発展編】(20)

Advertisement

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

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