レスポンシブ

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

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

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

header {
width: 960px;
}

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

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

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

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

ABOUT ME
大城ゆう
エンジニア歴4年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事をしている。