レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy
iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応しています。動作は非常に軽快で、スマホ・タブレットの複数のデバイスで同時に確認ができます。 Sizzyの動作デモ 現在用意されているデバイスは、8種類。 iPhone 4: 320x480 iPhone 5: 320x568 iPhone 6: 375x667 iPhone 7 Plus: 414x736 iPad Air: 768x1024 Nexus 6P: 411x731 Galaxy S4:
[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコード ブレ
![[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d19eb7832f21ddf4cde99e17c015e45e093986e9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021910.png)
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
モバイルの入力UIをデザインするための７つのポイント
Ning T.氏はProto.ioのコンテンツエディターであり、人類学者、ウェブデザイナー、そしてUXオタクでもあります。私は、猫やブルース、スウィング ダンス、そしてWes Anderson氏の映画が大好きです。 私たちはいまや、何をするにもスマホを使います。家の温度調節から医者の予約まで、労力をかけることなく手のひらの上で行おうとしているのです。スマホと数々のアプリによってそのような未来が来るのはほぼ確実と言っていいでしょう。 しかしながら、実際にはまだまだ問題点も残っています。私たちは割と頻繁に、スマホ入力の煩わしさに悩まされています。 例えば、絶望的に分かりにくいログイン画面や入力フォームなどです。そういうとき、私たちはスマホを使うことを諦めて、パソコンを使います。残念なことにスマホアプリやスマホ用のサイトはスマホユーザーが入力しやすいように最適化されているとはいえません。 Luk
グーグル新アルゴリズム向けのスマホ対応で押さえておくべきポイント | ベイジの社長ブログ
Googleから、モバイルフレンドリー（いわゆるスマートフォン対応、以下スマホ対応）であるかどうかを2015年4月21日以降の検索ランキングに反映する、という公式発表がありました。早急にスマホ対応をしないと流入が大幅に減るのでは、と脅威を感じているWeb担当者や制作者も少なくないでしょう。 そこでこのエントリーでは、現在スマホ対応ができていないWebサイトが、今回のアルゴリズム変更をどう判断すべきかのポイントを整理してみました。 企業サイトにおけるモバイル訪問比率の現状 弊社で実施している数多くのWebサイトに対するログ解析やヒアリング内容から、サイトタイプ別のモバイル流入比率はだいたい以下のようになっていると考えられます。 比率の少ないWebサイトでも20～30%に達し、モバイルと親和性の高いWebサイトでは80%前後まで至ることもある。ただし実際にはビジネスモデルやターゲット特性、掲載
スマホ最適化、やるなら今！ 現在は解消されているレスポンシブ・レイアウトの3つのデメリット – Handmade Future！
WordPressで運営しているブログのスマートフォン最適化には、レスポンシブ・デザインがおすすめです。 1年前にはデメリットとされていた、信頼性、選択肢、広告やコンテンツがはみ出す問題、ノウハウの蓄積不足も、現在は大部分が解消されています。 モバイル専用サイトでは「自分らしさ」を出しにくい 「オピニオン系ブログでもモバイルからのアクセスがパソコンを明確に上回るようになった」という記事を書きました。 あなたのブログ、知らないところで「何これ見にくい」って酷評されてますよ。 モバイル（スマートフォン＆タブレット）からのアクセスが過半数なのであれば、スマホ最適化に本腰を入れない理由はありません。というよりむしろ、パソコン環境は後回しにして、モバイル環境を基準にカスタマイズしなければ、本末転倒ですよね。 スマートフォン、タブレットに対応するには、大きく2種類の方法があります。一つは、現在主流の、
スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」
スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロード 公式サイトにある「DOWNLOAD SOURCE」をクリック。 ３．使い方 jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src
触りながら覚えるスマホ向け企業サイト設計の基礎知識
触りながら覚えるスマホ向け企業サイト設計の基礎知識：jQuery Mobileでスマホ向け企業サイト構築（2）（1/3 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。第2回は、簡単なスマホ向け企業サイトを設計するための基本事項を解説し、HTML5＋jQuery Mobileでの構築の手順を紹介します HTML5＋jQuery Mobileのサイト構築を触りながら作ろう 前回の連載第1回「スマホ対応初心者に送るjQuery Mobileの使い方“超”入門」はjQuery Mobileの概要や役立つ開発ツール、使い方、構造の基礎を紹介しました。 第2回はベーシックな企業サイトの構成を基にシンプルなサイト作成を紹介していきます。また、作成する中で登場する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
i-i-news.com