すべてのカテゴリ

前回のブログ投稿で、レスポンシブサイトでメディアクエリに触れましたので、今回ここを掘り下げてみようと思います。もうほとんどのクリエイターの方はメディアクエリ＠media screen and ( min-width: 768px ) {................}（768pixel 以上）＠media screen and ( max-width: 768px ) {................}（768pixel 以下）は、ご存じであると思いますが…ほぼこれで事足ります(笑)でも、メディアクエリは深堀りすると・・・結構色んな使い方ができるんですよね。今回はそこをご紹介いたします。※「＠」は、このブログでの都合上、全角を使用しております。ご了承ください。　（半角アットマークは禁止ワードに設定されているようです(^^;)）■複数条件の連結■AND条件・複数の条件を「かつ」で結ぶときは「and」キーワードを利用します＠media screen and ( min-width: 480px ) and ( max-width: 640px ) {................}　この場合、「画面の幅が、480px～640pxの場合」という意味になります■OR条件・複数の条件を「または」で結ぶときには、各条件を「, カンマ」で区切って記述します＠media screen and ( min-width: 480px ) , screen and ( max-width: 640px ) {................}　この場合、「画面の幅が、480px以下、または

Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。レスポンシブデザインを実装する上で、避けて通れない基本要素になります。この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。メディアクエリとは何かメディアクエリとは、**「画面の条件に応じてCSSを切り替える仕組み」**です。例えば、画面が小さいときはレイアウトを縦並びにするスマホでは文字を大きくするパソコンでは余白を広く取るといった制御を、画面サイズに応じて行えます。HTMLはそのままで、CSSだけを条件分岐できるのが大きな特徴です。基本的な考え方メディアクエリは次のような流れで考えると理解しやすくなります。まずは共通のCSSを書く特定の画面サイズのときだけ上書きするつまり、「全部に効くスタイル」＋「条件付きのスタイル」という構造です。この考え方を押さえるだけで、レスポンシブ対応がかなり楽になります。画面サイズ指定の基本メディアクエリでは、主に画面の横幅を条件に指定します。よく使われる考え方は次の2つです。① 〜px以下のときに切り替えるスマホやタブレット向けに使われることが多い指定です。「画面が小さくなったらレイアウトを変える」という発想になります。例としては、タブレット以下で2カラムを1カラムにするスマホサイズでメニューをハンバーガーにするなどが該当します。② 〜px以上のときに切り替えるこちらはPC向けに使われることが多い指定です。「画面が広い場合だけ、装飾や余白を増やす」といった使い方になります。よく使われるブレイクポイ