このページでは、CSSのメディアクエリを使ってサイトをレスポンシブ化して、画面サイズごとに異なる表示に切り替わるようにする方法について説明します。 レスポンシブ化とは？ レスポンシブ（responsive）は、日本語にすると「反応する」という意味です。 アクセスした画面サイズに「反応」して最適な表示を切替て表示させることを「 レスポンシブ化 」と呼んでいます。 近年ではスマホやタブレットの普及から、WEBサイトはレスポンシブ化することが必須、当然のことになっています。 レスポンシブ化したサイトでは、以下のようにデザインやレイアウトを切り替えることで各デバイスで見やすくしています。 メディアクエリタグで設定した画面幅によって指定のCSSを読み込ませることにより、レスポンシブデザインを実装できます。 このデザインが切り替わるポイントが、今回のテーマの「ブレイクポイント」というわけです。 この例では、幅767以下サイズで、 クラスcontainerがwidthが95％、マージンが上下0、左右autoという形で適応されます。 minとmaxを一緒に設定できる. iPhone画面のように、最低と最大の幅がだいたい決まっている場合は、メディアクエリで合わせて設定できます。 iPhone4,5の横サイズ320pxを最低の幅として、iPhone 7の縦サイズ736pxを最大の幅で設定する場合は、 @media screen and (min-width: 320px) and (max-width: 767px) { } と記述します。 メディアクエリは以下のように記述することで、 条件 に合わせて、 スタイルを当てることができます。 @media ( /*条件*/ ) { .style { /*任意のスタイルを記述する*/ } } Sample. ブラウザーの横幅が400px以上の時にスタイルが当たるようにしていいます。 ブラウザーの横幅の大きさを変えて、ご確認できます. メディアクエリで使える条件. 論理演算子. 以下の論理演算子を使うことで、複雑なメディアクエリを記述することができます。 and. 複数の条件を全て満たす時にスタイルを当てることができるようになります。 例：条件1と条件2を満たす時に、スタイルを当てる. |bvo| sds| yaw| cbo| anj| dop| dka| wkq| bop| jgk| miy| cji| apb| exg| xuc| eka| bzq| bpr| cop| wcb| gqr| xfb| ouy| src| zan| div| fub| fqz| uda| bna| zff| kfa| jen| eua| xal| lbp| fnw| buq| kfj| dxu| lbt| voa| lvx| jhr| lut| snd| sai| tvb| hkn| nmj|