[B! MediaQueries][css] astk_fのブックマーク

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

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。各デバイスのブレイクポイントに合わせたメディアクエリの書き方複数のブレイクポイントを使ったメディアクエリの書き方人気のフレームワークのブレイクポイントの設定レスポンシブの確認が簡単にできる最強ツール各デバイスのブレイクポイントに合わせたメディアクエリの書き方スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ

astk_f 2016/09/14

リンク

レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす

+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1

astk_f 2013/01/15

リンク

[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである | Unformed Building

この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。翻訳部分は次のセクションとなります。 CSS Media Query for Mobile is Fool’s Gold Ethan Marcotte の記事「Responsive Web Design」はウェブ開発者たちの想像力を刺激し、いくつかの後続の記事はモバイルに最適化されたウェブサイトを構築する方法として、CSS Media Queries をもてはやしました。私もまた「iPad Orientation CSS」という記事でこの流行に貢献した罪があります。残念な

astk_f 2012/08/19

リンク

スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark

最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介

astk_f 2012/02/07

リンク

レスポンシブwebデザインで制作する時のポイント

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