タグ

レスポンシブに関するWebDesignScrachのブックマーク (26)

  • レスポンシブデザインに使えるjQueryプラグイン集 – creamu

    「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE

  • 【流行】 レスポンシブWebデザインについて思うこと 【誰得】 | soplog(そぷログ)

    レスポンシブWebデザイン、最近巷で賑わっているようですね。 私も自分なりに調べて使ってみましたが、巷で騒がれているような魅力や凄さは感じませんでした。 むしろ、この言葉に飛びついた社内の人間が「マルチ!低コスト!」とはしゃぎだすのが怖いくらいです。 私もちゃんと説明できるよう、備忘も兼ねて記事に残しておきます。 レスポンシブWebデザインとは PC・スマートフォン・タブレットなどの複数のデバイスに対して、HTML側はワンソースで対応した、デザイン・技術のことです。 Media Queries(メディアクエリ)を使う方法が一般的なようです。 (あまり触れられているのを見ませんが、PSPなどのゲーム機でもMedia Queriesは有効なのでしょうか?) 使用上のメリット 制作期間が短く済む 複数のデバイスにワンソースで対応できるので、別々に制作するよりは制作期間は短く済みます。 まぁ、ケー

    【流行】 レスポンシブWebデザインについて思うこと 【誰得】 | soplog(そぷログ)
  • レスポンシブなWEB制作のためのCSSフレームワークのまとめ

    様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー

    レスポンシブなWEB制作のためのCSSフレームワークのまとめ
  • レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach - かちびと.net

    もういくつも出回ってますので今更感 もありますが、個人的にはいくつあって も困らないのでご紹介。レスポンシブ Webデザイン設計用のシンプルなテンプ レート・The Goldilocks Approachです。 殆ど何もない状態なので使いやすい。 いろいろと便利なフレームワ-クはありましたけど、結局フレームワーク自体を自分で作らないとならなくなってくるのでその候補としてメモ。 シンプルなテンプレート。中身が無く、記述だけしていけばいい、みたいなやつです。IEに対応できるようにmodernizrが含まれています。 ケーススタディです。シンプルで1カラム。ちょっとしたプロダクトサイトなんかこういう感じですよね。 ブレークポイントも1つしか設定されてません。 @media screen and (min-width: 30em) and (max-width: 63.236em) そのため、複数

    レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach - かちびと.net
  • レスポンシブwebデザインで制作する時のポイント

    先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 (一部の図はセミナーの資料を元に作成してます。) 始めに:スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ(0からスマートフォンサイト用に構築) jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ

    レスポンシブwebデザインで制作する時のポイント
  • CSS Nite in Ginza, Vol.59フォローアップ|CSS Nite公式サイト

    CSS Nite in Ginza, Vol.59フォローアップ 記事公開日:2011年9月21日(水) 2011年9月14日(木)、アップルストア銀座で開催したCSS Nite in Ginza, Vol.59のフォローアップとして、松田 直樹さん(TSUDUMI)、鷹野 雅弘の『DreamweaverによるレスポンシブWebデザインの実装』のスライドと音声、動画をシェアします。 スライド(PDF、174ページ、42.8MB) 音声(MP3、61:17、29.4MB) なお、『効率的なサイト制作のためのDreamweaverの教科書』(CS5.5対応版)は明日発売です。こちらもよろしくお願いします。 終了エントリー Design Spiceさんのまとめ記事レスポンシブwebデザインで制作する時のポイントも併せてご覧ください。 ベストセッション20192019年、CSS Niteでは49回

    CSS Nite in Ginza, Vol.59フォローアップ|CSS Nite公式サイト
    WebDesignScrach
    WebDesignScrach 2011/09/26
    鷹野さんと松田さんの『DreamweaverによるレスポンシブWebデザインの実装』