CSS

headerをメディアクエリを使わずに、スマホサイト(デバイス)に合わせてフレキスブルレイアウトにする方法

記事内に商品プロモーションを含む場合があります

メディアクエリを使って、横幅を指定することはできますが、できるだけメディアクエリも使わずに、横幅をデバイスに合わせてフレキシブルに調整するCSSを紹介します。

例えばPCで見たときに、横幅が960pxのheaderがあったとします。

header {
width: 960px;
}

これをレスポンシブ対応のフレキシブルレイアウトにするには、「横幅はデバイスの横幅に合わせるけど、広げすぎても最大で960pxより大きくはならないよ」というCSSを記述すれば良いです。

それには次のように記述します。

header {
width: 100%;
max-width: 960px;
}

すると、デバイスに合わせてheaderの横幅が変化するので便利ですよ。お試しあれ!

ABOUT ME
ゆう
エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。