スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコード ブレ
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or requir
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
Following on from last week's article in which I briefly discussed css pixel sizing, I decided to look into the different ways you can declare your font size with CSS. Meet the Units # There are several different ways you can declare the size of a font in CSS. Broadly speaking, the units fall into one of two categories - absolute and relative. Absolute units are fixed and (mostly) relate to some p
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Designer & Developers 各デバイスの表示が確認できる。操作も可能。 Responsive Roulette ブラウザ上で各サイズの表示を確認できる。 The Responsinator 各デバイスの表示が確認できる。 Juice’r 各デバイスの表示が確認できる。操作も可能。 Screenfly 各デバイスの表示が確認できる。操作も可能。 Responsive Design Testin
「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。 そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。 では、ウェブサイトの制作
Responsive Nav ? Responsive Navigation Plugin レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」。 PC、タブレット、iphone等でそれぞれ美しいメニューを提供してくれるJSライブラリ。1.7KBと軽量で依存ライブラリなどはなく単体でう使えます。 シンプルですが十分に使えそうですね 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ナビゲーションが斬新な３０のサイト スマホでの面白いトップナビゲーションの見せ方チュートリアル 目次のナビゲーションを自動生成してくれるjQueryプラグイン「TOC」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
Media Query Snippetsは、任意のデバイスに対応する為のMedia Queriesのコードを一覧にしてコピペ出来るようにまとめているWebサイトです。チートシート的に使えて良さそうですね。 Media Query Snippets
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
スマートフォン向けの 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>に見えるのが隠し味になっていま
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
Different font sizes for different reading distances are currently achievable by assuming a device’s form factor using @media queries. Long term, this is probably not ideal — that is, until reading distance-detection techniques, like the one you are testing right now, become more feasible. In the meantime, use Size Calculator by Nick Sherman and Chris Lewis to calculate the physical or perceived f
先日、Responsive Grid Systemの仕様変更について記事を書かせて頂きましたが、あの反応としてやっぱりいくつかコメントもらったのが、逆に分かりにくくなったという物。 まぁ、従来の作り方とは大分変わったので、グリッドシステムとして僕の中で大事な要素の一つである『周りとの共有しやすさ』という面ではちょっと難ありかなと思うのが正直な所。一度慣れてしまえばこんな効率の良い作り方も中々無いかなと思う反面、やはり直ぐに順応するのは微妙に難しいかなとも思うわけです。 そんな経緯もあって、先日から今まで以上に他のグリッドシステムも目を通すようにしていて、今は個人ベースのプロジェクトとか小規模な物であればResponsive Grid Systemで良い物の、他の選択肢も一応用意しといた方がいいかなと思っている今日このごろです。 というわけで、今日はそんな感じでこれまでいくつか目を通して来た
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く