[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ | コリス

2016/09/12 472 users コリス プレー CSS メディアクエリ リソース

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレー... 続きを読む

レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス | コリス

2015/05/12 227 users デバイス タブレット スクリーンサイズ 操作 コリス

ブラウザやOSを問わずに、デスクトップ・スマホ・タブレット・テレビなどさまざまなデバイスのスクリーンサイズをシミュレートしてWebページの表示確認ができる無料オンラインサービスを紹介します。 操作は非常に快適で、ノースト...記事の続きを読む 続きを読む

レスポンシブ対応の変化するグリッドを各デバイスの見え方を確認しながら設計できるオンラインツール -Shoelace | コリス

2015/03/19 172 users Shoelace コリス タブレット グリッド 設計

スマホ・タブレット・デスクトップ、それぞれで変化するレスポンシブ対応のグリッドを確認しながら設計ができるオンラインツールを紹介します。 Shoelace 使い方は簡単、まずはページにアクセス！ 登録とかの面倒なことはあり...記事の続きを読む 続きを読む

なにこれ超便利！レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然！Adsenseの確認にもなるよ！ | なまら春友流

2014/02/10 655 users adsense GoogleAdSense なまら春友流

当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http... 続きを読む

レスポンシブWEBデザインのデザイン・設計上の注意点 | Web制作 | | SRE BLOG | SRE BLOG

2013/06/20 156 users レイアウト SRE BLOG 悩ましい問題 端末 事例

レスポンシブWEBデザインはその特徴から、レイアウトの自由度が低いと言われています。どのようなデザインにするのかは悩ましい問題とも言えるでしょう。 そこで今回は前回のレスポンシブWEBデザインの基本に続き、実際の事例とともにデザインや設計における注意点を紹介していきます。 １、各デバイスのサイズを把握しましょう！ レスポンシブWEBデザインの最大の特徴はなんと言っても、色々な端末から見れるというこ... 続きを読む

iPhoneやiPadなどをクレジット決済のレジ代わりにできる「Squareリーダー」を実際に使ってみました - GIGAZINE

2013/06/04 284 users GIGAZINE iPhone Squa Square 屋台

小さなお店や屋台などではクレジットカード端末を導入していないお店も多いのですが、高価な端末を購入しなくとも、iPhone・iPad・Androidを使って簡単にクレジット決済が可能になるのが「Square」。イヤホンジャックに差し込むタイプのリーダーとレジアプリを使って、カードをスワイプ、デバイスにサインを行うだけであっという間に決済が完了。売上の管理も各デバイスでできるようになります。 Squa... 続きを読む

ページを表示したスマフォやタブレットのいい感じのスクリーンショットを簡単に作成できる -PlaceIt | コリス

2013/01/07 105 users デバイス 手元 PlaceIt コリス スクリーンショット画像

手元の画像や指定ページとスマフォ・タブレット・ネットブック・デスクトップなどのさまざまなデバイスを合成して、いい感じのスクリーンショットを簡単に作成できるオンラインサービスを紹介します。 PlaceIt PlaceItの使い方は簡単で、手元のスクリーンショット画像をブラウザにドラッグするかURLでページを指定するだけで各デバイスに合成されます。 当サイトをキャプチャして、さくっと作ってみました。 ... 続きを読む

スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！ | コリス

2012/11/08 206 users コリス レスポンシブ タッチデバイス ナビゲーション 考察

スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデ... 続きを読む

スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか | コリス

2012/03/16 497 users コリス ダイアグラム ポートレイト ランドスケープ 下段

下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケープ（横置き）です。当初は各デバイスの高さ/幅のダイアグラムを作... 続きを読む