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
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる
二〇一三年 長月 廿五日 水曜日 ■ たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる [/links] この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。 この記事は古くなっています。改訂版があります。 ウェブサイトをスマートフォンに対応させるために <meta name="viewport" content="..."> と指定することは、多くの人が知っていると思う。しかし、content の中身を何にするべきか本当に理解している人は、日本ではごく少ないようだ（かくいう私もつい最近まで理解していなかったのだから、大きなことは言えない）。 試しに「meta viewport」を Google で検索すると、以下のページが上位に出てくる。 Quick Tip: Don't Forget the Vi
ブラウザ上でホワイトボードを共有できる「Whiteboard Fox」を使ってみた
by Bryan & Lyn . SNSで「ここを図解したい！」と思った時や、遠隔地にいる人とちょっとしたミーティングがしたい時に、アプリやソフトウェアなしでURLを共有するだけで同じホワイトボードを使えるのが「Whiteboard Fox」です。 Whiteboard Fox - Simple Online Whiteboard http://whiteboardfox.com/ 実際にホワイトボードを使う様子は以下のムービーから確認できます。 「Whiteboard Fox」を使ってみた - YouTube アプリが必要でなく、ウェブサイト上でホワイトボードを使うことが可能なので、タブレット・スマホ・PCからアクセスできます。 ホワイトボードを使うには「Start Drawing」をクリック。 すると、方眼紙の横にメニューツールがある画面が表示されました。 デフォルト状態ではペンが選択
PHPでのデバイス分岐を簡易的に導入
モバイルの時は一覧での画像を小さいのを表示させよう！と考えた時に、デバイスの分岐が必要になった。そんなことを考えていた今日、なにやら人気記事にショートコードを利用する方法がでていました。 [WordPress]まだなら今すぐ入れたい！PC、スマホで表示を分けるショートコード ショートコード使えるのは便利だなーと思いつつも、エントリーごとで必要だったわけではないので、自分はもっと簡易な分岐を利用することにした。 WordPress 標準の関数 wp_is_mobile()WordPress には、3.4 からモバイルデバイスを分岐するための関数が導入されています。その関数を使い、簡易的に分岐させてしまいました。 PHP：簡易版分岐コード /** * Test if the current browser runs on a mobile device (smart phone, tablet
jQuery Finger
jQuery Finger unifies click and touch events by removing the 300ms delay on touch devices. It also provides a common set of events to handle basic gestures such as press, double tap and drag. Very small (< 0.5kb gzipped), it is focused on performance, is well tested and also supports jQuery delegated events. Getting started You can give it a shot by adding the script right after jQuery: <script sr
Cooky、特に飲食関連のビジネスやブログにぴったり
個人でも商用でも、そしてクライアントのプロジェクトでも無料で利用できる、スマートフォン・タブレット向けのサイトが簡単に作成できるjQuery Mobileを使ったテンプレートを紹介します。 Cooky -Free Mobile Site Template Cookyの特徴とラインセス Cookyのデモ(ページ） Cookyのデモ（エフェクト・テンプレート） Cookyの特徴とライセンス Cookyはスマートフォン・タブレット向けのサイトが簡単につくれるよう、ページやエレメントが一式揃ったテンプレートです。 その名の通り、特に飲食をベースにしたビジネスやブログなどを想定してデザインされています。 ValidなHTML5+CSS3で実装された11ページ。 グリッド、アコーディオン、リスト、ボタンなども用意。 レスポンシブ対応のスライダー。 コンタクトフォーム。 jQuery Mobile, G
PC、タブレット、スマートフォンで使えるUIフレームワーク「Kendo UI 」
多くの、端末がリリースされていて、端末間の表示を合わせるのはフレームワークを使わないと色々と面倒になってきました。今日紹介するのはPC、タブレット、スマートフォンで使えるHTML5ベースのUIフレームワーク「Kendo UI 」です。 基本的にはjsとcssで作られたフレームワークとなっていてjsとcssを読み込み、ルールに沿って、記述していく形になります。 詳しくは以下 用意されているUIはグラフやスムーズに閉開ウィンドウ、テーブル、スライダーなどなど、基本的なサイトデザインに利用できそうなユーザーインターフェイスウィジェットが多数要されています。 Kendo UIで利用できる一部のUIウィジェット 多くのフレームワークがリリースされていますが、自分に使いやすいもの、目的の達成できるかを考えて選択していきたいですね。「Basic usage」からKendo UIで実現できるユーザーインタ
これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton
商用利用も無料、Responsive Web Designに対応したWordPressのテーマファイルを紹介します。 ボタン、タブ、パネルなどのページでよく使用するエレメントをはじめ、さまざまなカラムも簡単にショートコードで利用できます。 デモページを幅600pxで表示 Skeletonの主な特徴 Formalizeを使用して各ブラウザ間のエレメントの相違に対応。 Skeletonを使用してMedia Queriesを使った可変カラムに対応。 Option Frameworkを使用してテーマオプションのカスタマイズが可能。 bbPressのフォーラムスキンをインクルード。 見出しや本文などバランスの取れたタイポグラフィ。 デモ：Typography and Elements スマートフォン用のマルチレベルのメニューをサポート。 テーマオプションパネルからフォントや背景画像を設定可能。 タブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ