CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
Sassでメディアクエリを効率的に管理するマップとmixin - Qiita
$breakpoints: ( 'sm': 'screen and (min-width: 400px)', 'md': 'screen and (min-width: 768px)', 'lg': 'screen and (min-width: 1000px)', 'xl': 'screen and (min-width: 1200px)', ) !default; 例えばsmがkeyでscreen and (min-width: 400px)がvalueになります。valueをクウォートで囲んで文字列として明示的に定義しておきます。 上述したmap-get()関数の$mapは定義したマップの$breakpointsにあたり、$keyはsmやmdなどにあたります。mixinは以下のように定義します。引数にkeyを渡してvalueをブレイクポイントとして取得できるようにしています。 @mi
MediaQueriesを横着して書く方法@Sass - Qiita
Sassのmixin機能を利用して、冗長なメディアクエリを簡単に書きます。 まずブレイクポイントは変数にします BootStrapの設定を参考に、４デバイスを想定しました。 実のところPCかスマホだけで十分！という場合も少なくないですが、せっかくなので４つとも使います。損はないです。 //== Screen Size $screen-xs: 480px !default; //Extra small screen(xs)->smartphone $screen-sm: 768px !default; //Small screen(sm) ->tablet $screen-md: 992px !default; //Medium screen(md) ->desktop $screen-lg: 1200px !default; //Large screen(lg） ->wide deskto
やるやんwindow.matchmedia - FICC Workbook
window.matchmediaとは簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。 ただ、IE9以下では使えません！スマホはバッチリ！(Android3以下…？知らない子ですね…。) 使い方とりあえず var widthMatch = window.matchMedia("(min-height: 500px)").matches; console.log(widthMatch); これで、高さの最小値が500pxあるかどうかがブール値で出てきます。 そして、主な使い方として // ウィンドウサイズでの処理 if (window.matchMedia("screen and (m
レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
Managing Responsive Breakpoints with Sass — SitePoint
When dealing with responsive design, you often find yourself defining a lot of media queries, checking various properties, with various values. Because it can quickly get messy, it is usually considered a good practice to use Sass (or any other preprocessor, for that matter) to handle responsive breakpoints. That being said, it has occurred to me there are lots of different ways to deal with this,
Mobile First With Bootstrap 3 | Envato Tuts+
Ok so a couple of weeks ago now, on its very own two-year anniversary, Mark Otto and the rest of the guys responsible for the develop and maintenance of Bootstrap announced the official release of the framework's third version, and it came on steroids. Let's see what we're getting. What's New? First off, the most important changes you're going to find in the new Bootstrap release is the support fo
CSS3のMedia QueriesをjQueryで代替する方法 @ WWWPArtisan
スマートフォンの利用者が多くなってきましたが、ウェブサイトのスマートフォンへの対応、みんなどうしているのかな？と思う今日この頃。 スマートフォンへの対応策の一つにCSS3のMedia Queriesを利用するというのがあります。簡単に説明すると、端末毎の表示可能領域の違いを利用してCSSを振り分けるって方法です。 正確には、ディスプレイやウィンドウのサイズに合わせたデザインを提供して、結果的にスマートフォンでも見やすい状態にするってことなんですけどね。 だから、スマートフォンに限らず全てのブラウザで利用できる技術なんですが、策定中のCSS3なので、当然、古いブラウザは対応していません。 そこで、Media QueriesをjQueryで代替する、言わばMedia jQueries的なものを紹介します。 まずはjQueryで以下のコードを作成。 function mediaQueryClas
最近流行のレスポンシブWebサイト制作でのあれこれ | SONICMOOV LAB
こんにちは。 デザイン以外もいろいろ幅広く担当しているデザイナーの”ら～は～”です。 2012年から流行ると言われて、今年の2013年にはより一般的になってくると言われてる。 そんなレスポンシブサイトの制作について、実体験ベースにあれこれを職種ごとに紹介したいと思います。 結構長くなります。最後までお付き合いください。 目次 はじめに ディレクター編 デザイナー編 コーダー編 さいごに 1.はじめに そもそもレスポンシブWebサイトって？？ PC、タブレット、スマートフォンなどを、 1つのHTMLでデバイスごとに表示を変更できる制作手法です。 主に使われる技術は、CSS3からスタイルのMedia Type 拡張である「Media Queries」です。 これはデバイスのスクリーンサイズ毎にスタイルを読み替えてくれる機能で、各種デバイスに応じて見せ方を変更できるというわけです。 ※ほかにもJ
【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ
問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> HTML5も！というときは、こちら。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecod
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
無料でMacでIEの表示テストをする方法
modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 追記：modern.IEの日本語版ページが開設されました。 ホーム | Internet Explorer の検証がより簡単に | modern.IE はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OSはWindows、Mac、Linux、仮想化ソフトウェアはVirtualBox、VMWare Fusion、Parallels、Virtual PCなどに対応しています。 ここではMacでVirtualBoxを使用してIEを起動させる方法を紹介しま
メディアクエリー - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
CSS Browser Selector + | A Cross-browser Responsive Design Helper
CSS Browser Selector + is a very small javascript which empowers CSS selectors. See an example: <html lang="pt-br" class=""> Best part no more hacks all compliant code Cross-browser Media Queries like helper Alternative method of mediaqueries for developing responsive design for older browsers. You can now write code for browser browser version platform platform version device device version min-w
レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
+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
Use CSS transitions to link Media Queries and JavaScript
A common problem in responsive design is the linking of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be useful to use JavaScript and pull in different content at the same time, eg higher quality images. With CSS transitions, specifically their transitionEnd events, we can marry up our media queries and JavaScript perfectly, without resorting to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5 Uses for Vertical Media Queries — SitePoint
Breakpoints And The Future Of Websites — Smashing Magazine