レスポンシブwebデザインに関する自分用メモ « ThinkChip
レスポンシブwebデザインについて勉強してみました。 勉強がてら簡単なテンプレートをつくってみたものの、いろんなところで躓きまくったので、制作過程で得た情報や注意点などを忘れないうちに全部まとめておこうと思います。 レスポンシブwebデザインとは １つのソース（html）をもとに、ウインドウサイズに応じてページのレイアウトを変化させる手法。 CSS3のMedia Queryでレイアウトを制御する。 基本的にはリキッドデザインだが、デバイスごとにレイアウトを変化させるため、ページ内の要素や配置、画像、フォントサイズなどを、設定したブレークポイントごとに調整する必要がある。 勉強したり参考にさせていただいたサイト →レスポンシブwebデザインで制作する時のポイント →CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き →レス
レスポンシブ・ウェブデザインとは？—メリット、デメリット、注意点を調べてみた｜イケハヤ大学【ブログ版】
最近話題の「レスポンシブ・ウェブデザイン」。仕事柄ウェブ制作にも触れるので、勉強がてらまとめてみました。 ウィンドウサイズに合わせて、自動的にページのデザインを最適化する技術を「レスポンシブ・ウェブデザイン」と呼びます。 これは実例を見て頂いた方が分かりやすいでしょう。例えばGoogleのAboutページ。 ウィンドウが最大の状態では、このようなデザインになります。 ウィンドウを狭めると、こんなデザインに自動的に変化します。スマホで見てもこのデザインになります。 他にはこんなサイトも。ウェブ制作会社のサイトです。 フルスクリーンだとこんな感じ。 ウィンドウを狭めるとこんな感じに。同じURLです。「OUR WORK」というナビゲーションが自動で追加されますね。 こちらのサイトもすごい。 大。 中。 小と変わります。 導入のメリット 代表的なメリットをまとめてみました。 運営の負担が軽くなる
レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsinator
レスポンシブwebデザイン 作り方1 | チース 札幌