Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: ResponsiveLayout

[CSS] Simple CSS Media Queries – デバイスごとのメディアクエリー生成サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。

[Web Design] Responsive Test – レスポンシブレイアウトのテストツール

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトの動作確認ツール。確認したいサイトのURLを放り込むだけで、様々なデバイスでの表示シミュレーションができます。指標としてはXLがPC、LGがiPadのランドスケープ、MDがiPadのポートフォリオ、SMがiPhoneのランドスケープ、XSがiPhoneのポートフォリオという感じです。Bootstrapとかの表示切り分けclassと基本的に同じ命名ルールなので分かりやすいです。サクっと複数デバイスでの確認をしたい時に便利ですね。

[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン

  • Pocket
  • このエントリーをはてなブックマークに追加

マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。

[Web Design] Responsinator – レスポンシブレイアウトの結果をまとめて確認できるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。

[Web Design] MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS – デバイスごとのブレイクポイントまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

メディアクエリーの、各デバイスごとのブレイクポイントをまとめた記事。レスポンシブレイアウト組む際、デバイスごとに微調整するのに使えそうです。紹介されているデバイスはiOS系では各種iPhoneとiPad、Android系ではGalaxy S3, S4, S5。まぁ一般的という意味でAppleとSamsungの各種デバイスが紹介されています。自分の場合は最近はブレイクポイント1箇所、ランドスケープでPCレイアウトで見せたい場合は767px以下、ランドスケープでもスマホレイアウトで見せたい場合は480px以下にしてます。ブレイクポイント何個も作ると作るのめんどいんですよね。

[Web Design] Responsive Patterns – レスポンシブレイアウトのパターンをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。

[Web Template] Beetle – Responsive HTML Template – レスポンシブレイアウト&パララックススクロールなHTML5テンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブ・レイアウトで、かつパララックス・スクロールにも対応したHTML5テンプレート。需要の多いこの2つに対応しているってのはなかなかナイスです。静的なHTMLテンプレートは無料で、Wordpressテーマとなっているものは48ドル(今現在)で販売されています。またマップのパーソナライズや、グリッドレイアウト、カルーセル(イメージスライダー)にも対応しているので、モダンなコンテンツ表示手法にはひと通り対応しているという印象。なかなかイイんじゃないでしょうかこれ。

[Logo Design] Responsive Logos – レスポンシブなロゴ

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブなロゴってなんじゃい?と思ったのでブラウザウィンドウの横幅をゴニョゴニョしてみたら、あぁそういう事ね、と納得しました。ロゴも実際、用途によっていろんなバージョンありますからね。レスポンシブ・レイアウトの手法でロゴの種類が変わるYOという実験的サイトです。ブラウザウィンドウを狭くすると、ロゴの中の要素が減っていくという手法が多いですね。作例の数はまだそれほど多くないけど、興味深い試みだなぁと思いました。