The Responsinator is designed to test responsive websites on different device resolutions
最近話題の「レスポンシブ・ウェブデザイン」。仕事柄ウェブ制作にも触れるので、勉強がてらまとめてみました。 ウィンドウサイズに合わせて、自動的にページのデザインを最適化する技術を「レスポンシブ・ウェブデザイン」と呼びます。 これは実例を見て頂いた方が分かりやすいでしょう。例えばGoogleのAboutページ。 ウィンドウが最大の状態では、このようなデザインになります。 ウィンドウを狭めると、こんなデザインに自動的に変化します。スマホで見てもこのデザインになります。 他にはこんなサイトも。ウェブ制作会社のサイトです。 フルスクリーンだとこんな感じ。 ウィンドウを狭めるとこんな感じに。同じURLです。「OUR WORK」というナビゲーションが自動で追加されますね。 こちらのサイトもすごい。 大。 中。 小と変わります。 導入のメリット 代表的なメリットをまとめてみました。 運営の負担が軽くなる
2022年6月30日(木)モバイルgooの終了に伴い、サイトビューワの提供を終了いたします。 長年のご愛顧、誠にありがとうございました。 上記期間後はご利用ができなくなりますので、ご注意ください。 URLを入力して表示
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く