SlideShare una empresa de Scribd logo
1 de 36
Descargar para leer sin conexión
レスポンシブ Webデザイン【発展編】
                    2013年 2月7日
             Knock! Knock! 勉強会
※ 本資料は、Knock! Knock!サイ で実践したこ
                      ト      とを紹介する のです。
                                   も
  この内容が「正解」ベスト プラクテ ス」 うわけではあ ません。
           「      ・     ィ とい      り
  また、自社サイトだから可能な実験的ケースである ともご理解く
                              こ      ださい。
本日のお題

1)JavaScriptによるHTML要素のイ ルード
                       ンク
2)JavaScriptによるHTML要素の変形 差し替え
                        ・
3)今後の課題
レスポンシブWebデザイン【発展編】
W eb




       5
W eb

W eb/DTP

   W eb

             W eb   S
Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
レスポンシブWebデザイン【発展編】
1)JavaScriptによるHTML要素のイ ルード
                       ンク
レスポンシブWebデザイン【発展編】
news.html


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




passedEvent.html
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
2)JavaScriptによるHTML要素の変形 差し替え
                        ・
SVG形式
SVG(Scalable Vector Graphics)

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

               参照 : http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
ただし、IE8以下は非対応…
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
変形
グローバルナビの変形
・スマホ画面は、 しても縦方向に長く りがち
        どう          な
・スクロールしたときに、上まで戻るのも面倒
・そもそも画面上部のボタ ンは押しにくいよね?
 → スマホ用に要素を変形する、 う
                とい アプローチ
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
nav要素を変形するJavaScript 2)
                   (
$("nav.menuOn span").toggle(
   function(){      ↑ 対象をク ックするたびに要素の状態を切り替え
                            リ

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

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

);
とか書いてました。toggleイ トが廃止される
                ベン      までは…
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");
    }
});
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;
  }
}
こんな感じで、モバイル用のCSSも記述します
ナビゲーシ ンも外部フ イ
      ョ     ァ ルをイ ルードし
                 ンク   ては?
 → JSがオフだっ ? SEO的に
          たら      まずいよね?
3)今後の課題
画像のRetina
        (HiDPI)対応
DevicePixelRatio(viewport上の1pxとデバイス上で使用される実px数の比率)

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


                        ※ HiDPI → High Dot Per Inch。高解像度
PC-スマホの切り替え機能
・通常のRWD(Media Queries利用)では、
 ス リーンサ ズで強制的にレイ トが変わっ ま
  ク    イ             アウ     てし う
・しかし、スマホでもPC用の画面で見たいこともある
 → 切り替えボタンで表示をコントロールしたい
モバイ ・ ァース !
   ル フ   ト
・このサ トは
    イ “PCフ ァースト”
 → 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

Más contenido relacionado

La actualidad más candente

AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化Kon Yuichi
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScripthideaki honda
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明schoowebcampus
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へMuyuu Fujita
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?Yuki Ishikawa
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発Shuichi Takaya
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」Naoyuki Kataoka
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejslion-man
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門spring_raining
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、ReactのベストプラクティスとバッドプラクティスKohei Asai
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリAtsushi Tadokoro
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会VOYAGE GROUP
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門Atsushi Tadokoro
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころAyumi Goto
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?IRI MO
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始めynaruta
 
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するChart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するiPride Co., Ltd.
 

La actualidad más candente (20)

AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejs
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
React.js + Flux
React.js + FluxReact.js + Flux
React.js + Flux
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
Learning jQuery
Learning jQueryLearning jQuery
Learning jQuery
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始め
 
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するChart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
 

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

Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたShumpei Shiraishi
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】Yasuhito Yabe
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Kazunari Hara
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tipsyoshikawa_t
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみKohei Kadowaki
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7Naoki Matsuda
 

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

Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 
Study Intro Backbone
Study Intro BackboneStudy Intro Backbone
Study Intro Backbone
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 

Más de Yasuhito Yabe

Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Yasuhito Yabe
 
20131206 静岡web制作界隈ゆく年くる年2013
20131206 静岡web制作界隈ゆく年くる年201320131206 静岡web制作界隈ゆく年くる年2013
20131206 静岡web制作界隈ゆく年くる年2013Yasuhito Yabe
 
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術Yasuhito Yabe
 
静岡Web制作界隈 ゆく年くる年 2012
静岡Web制作界隈 ゆく年くる年 2012静岡Web制作界隈 ゆく年くる年 2012
静岡Web制作界隈 ゆく年くる年 2012Yasuhito Yabe
 
あらためて考えるCMS選択 2012
あらためて考えるCMS選択 2012あらためて考えるCMS選択 2012
あらためて考えるCMS選択 2012Yasuhito Yabe
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Yasuhito Yabe
 
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編Yasuhito Yabe
 
jQueryでiTunes Store風スライドショーを作ってみる
jQueryでiTunes Store風スライドショーを作ってみるjQueryでiTunes Store風スライドショーを作ってみる
jQueryでiTunes Store風スライドショーを作ってみるYasuhito Yabe
 
Web制作者のためのWebマーケティング用語と計算式
Web制作者のためのWebマーケティング用語と計算式Web制作者のためのWebマーケティング用語と計算式
Web制作者のためのWebマーケティング用語と計算式Yasuhito Yabe
 
Knock! Knock! サイトができるまで
Knock! Knock! サイトができるまでKnock! Knock! サイトができるまで
Knock! Knock! サイトができるまでYasuhito Yabe
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012Yasuhito Yabe
 
みんビズ その傾向と対策
みんビズ その傾向と対策みんビズ その傾向と対策
みんビズ その傾向と対策Yasuhito Yabe
 
20111001 adobe edgeとhtml5_css3_javascrit
20111001 adobe edgeとhtml5_css3_javascrit20111001 adobe edgeとhtml5_css3_javascrit
20111001 adobe edgeとhtml5_css3_javascritYasuhito Yabe
 
a-blog cms 事例紹介(TalkNote Vol.1)
a-blog cms 事例紹介(TalkNote Vol.1)a-blog cms 事例紹介(TalkNote Vol.1)
a-blog cms 事例紹介(TalkNote Vol.1)Yasuhito Yabe
 

Más de Yasuhito Yabe (15)

Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)
 
20131206 静岡web制作界隈ゆく年くる年2013
20131206 静岡web制作界隈ゆく年くる年201320131206 静岡web制作界隈ゆく年くる年2013
20131206 静岡web制作界隈ゆく年くる年2013
 
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
 
静岡Web制作界隈 ゆく年くる年 2012
静岡Web制作界隈 ゆく年くる年 2012静岡Web制作界隈 ゆく年くる年 2012
静岡Web制作界隈 ゆく年くる年 2012
 
あらためて考えるCMS選択 2012
あらためて考えるCMS選択 2012あらためて考えるCMS選択 2012
あらためて考えるCMS選択 2012
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
 
jQueryでiTunes Store風スライドショーを作ってみる
jQueryでiTunes Store風スライドショーを作ってみるjQueryでiTunes Store風スライドショーを作ってみる
jQueryでiTunes Store風スライドショーを作ってみる
 
Web制作者のためのWebマーケティング用語と計算式
Web制作者のためのWebマーケティング用語と計算式Web制作者のためのWebマーケティング用語と計算式
Web制作者のためのWebマーケティング用語と計算式
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
 
Knock! Knock! サイトができるまで
Knock! Knock! サイトができるまでKnock! Knock! サイトができるまで
Knock! Knock! サイトができるまで
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
 
みんビズ その傾向と対策
みんビズ その傾向と対策みんビズ その傾向と対策
みんビズ その傾向と対策
 
20111001 adobe edgeとhtml5_css3_javascrit
20111001 adobe edgeとhtml5_css3_javascrit20111001 adobe edgeとhtml5_css3_javascrit
20111001 adobe edgeとhtml5_css3_javascrit
 
a-blog cms 事例紹介(TalkNote Vol.1)
a-blog cms 事例紹介(TalkNote Vol.1)a-blog cms 事例紹介(TalkNote Vol.1)
a-blog cms 事例紹介(TalkNote Vol.1)
 

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