In this article, Vasilis van Gemert will show you several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but there are no “common” screen sizes. You’ll be able to use the theory in this article to better design your content for all different screen sizes. There are several tactics for deciding where to
ブレイクポイントの考え方 レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。レスポンシブウェブデザインの場合、ある画面サイズを境目として適用させるスタイルを切替えますが、この境目を『ブレイクポイント』といいます。 この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤しています。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えば問題ありませんでした。 しかし多様なデバイスが次から次へと出てくるようになり、PCやタブレット、スマートフォンだけでなく、テレビやウェアラブルタイプのデ
先日JSTORがレスポンシブウェブデザインによるモバイル対応した件[*1]についてのメモです． 表示パターン PCのブラウザでJSTORにアクセスしてブラウザの横幅を変えていくとこんな感じで表示が変わります．目視で気づいたかぎりでは以下の4パターンありました．手元のiPhone 4Sで確認すると縦表示・横表示ともにパターン1になります． パターン1（320px〜） 2枚目は矢印ボタンをクリックしてサイドメニューを表示させたもの．サイドメニューをメインカラムの下に持ってくるんじゃなく開閉ボタンを作るという方法はうまいなーと感心したんですがどうでしょう．隣のひとは「スマホで見てたらボタンに気づかないかも」と言っていてそれもそうかもと思ったり． パターン2（490px〜） 下部が2列になりました．ヘッダメニューも地味に変わってます（細かいなぁ）． パターン3（640px〜） サイドメニューが現れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く