「CSS」@mediaで画面の幅を小さい順に使用する
書式
@media 種類 and (min-widthで幅を指定){処理コード}
@mediaで画面の幅を小さい順に記述します。
スマホやタブレットやPCに応じてCSSを分けて適用させることができます。
種類は、主にallまたはscreenまたはprintが使用されています。
allは全て、screenは画面、printはプリンタを表します。
使用例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> /*共通*/ #cft { background: yellow; } /*幅が250px以上のときに上書きで反映されます*/ @media screen and (min-width: 250px) { #cft { background: red; } } /*幅が600px以上のときに上書きで反映されます*/ @media screen and (min-width: 600px) { #cft { background: green; } } </style> </head> <body> <p id="cft">Study Skill</p> </body> </html>
結果
1.@media screen and (min-width: 250px) {処理コード}
画面の幅が250px以上のときに上記CSSを使用します
2.@media screen and (min-width: 600px) {処理コード}
画面の幅が600px以上の時に上記CSSを使用します。