Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
デバイスごとの表示環境を考えたWebサイトの制作手法《レスポンシブWebデザイン》 | hT DESIGN_ARTICLES
《レスポンシブWebデザイン》[Responsive Web Design]とは、Webサイトの閲覧環境（パソコン・iPad・iPhone・Android などのスクリーンサイズ）に応じて、ページレイアウトを動的に変更させる手法です。 このレスポンシブWebデザインは、2010年に欧米のブログ《A List Apart》で Ethan Marcotte氏の記事にて初めて紹介されています。 » Responsive Web Design また、モバイル主軸にWebデザインを考えることを《モバイルファースト》[Mobile First]と言い、スマートフォンのような小さなスクリーンサイズを優先してデザインするレスポンシWebブデザインも、その手段の一つとされます。このモバイルファーストという考え方は、スマートフォンの普及と共に多くのWebサイトで実践され初めているそうです。 今回はこのブログに
Responsive Data Tables | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In addition to the techniques below, see this roundup of additional explorations of this problem. Garrett Dimon: Data tables don’t do so well with responsive design. Just sayin’. He has a good point. Data tables can be quite wide, and necessarily so. A single row of data needs to be kept tog
Media Queriesを使うときに参考にしたいサイト
CSS3のMedia Queriesを使ってみたいと思ったので、関連サイトを集めてみました。 いつもどおり有名どころが多いので見ている方も多いかもしれません。 仕様・解説などMedia QueriesW3CにあるMedia Queriesの仕様。CSS3 Media Queries『Web Designer Wall』の記事。サンプル多め。Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks『CSS-Trick』sの記事。非対応ブラウザ用にjQueryを使ってスタイルシートを切り替える方法も紹介されている。ライブラリ・プラグインなどcss3-mediaqueries.jsCSS3 Media Queries非対応ブラウザでもMedia Queriesを使えるようにするためのJavaScriptライブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
