レスポンシブのセンタリングレイアウトはwidthではなくmax-width 今回は、レスポンシブWebデザインの基本技として、サイト全体のレイアウトをセンタリング(中央寄せ)する方法をご紹介します。 センタリング(中央寄せ)のレイアウト 今回ご紹介するのは、例えばこんなレイアウトです。 【国産・天然】 フルーツマカロン|ま果ろん 公式通販サイト こちらのサイトを開いて、ブラウザの幅を変化させてみてください。 960pxまでは余白があり、それ以下では消えてしまいますね。 つまり、 PCで開いたとき→画面の大きさが十分にあるので、左右に余白を作ってサイト全体を見やすくする タブレット・スマホから開いたとき→画面が小さくなるのでコンテンツの可読性を保つために余白を消して画面いっぱいの幅に表示する というような使い方ができます。 実際にコーディングをしてみる 前置きが長くなりましたが、コードは非常
PC専用に作られたサイトをレスポンシブ対応させる場合、 画像で作られた見出しをどうするかということが問題になってくることがあります。 具体的には、 のように見出しがHTMLで組まれていた場合、 レスポンシブ化するときに、次のような方法では問題が出てきます。 画像を画面の横幅に合わせて拡大縮小する →横幅が小さくなったとき、文字が小さすぎて見えなくなる <h2>をoverflow:hiddenにして、画像をそのまま表示する →デザインによっては見え方が崩れる(一部が隠れて見えなくなるため) →文字が一部隠れてしまって見えなくなる →高解像度のデバイスで見たときに、画像がぼやけて見える <h2>の中をテキストにして(例:<h2>Title</h2>)、CSSの背景画像で置き換え、text-indent:-9999pxでテキストを隠しておき、 横幅の小さなデバイスで見たときに、背景画像を非表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く