レスポンシブのCSS記述方法
2023年1月27日
あと残りの数日で1月の終わりが近づいてきてますね。
寒い中、体調には気を付けていますか？
日本のCOVID-19の終息はなかなか見えてこないんですね…
マスク生活はいつまで続くねん？
そろそろマスク生活から脱却したいのに！
世界のニュースを見る限り、ほとんどマスクしてない人が多いようなのは、こっちの見解でしょうかね？
日本だけマスク生活を続けてたら余計にしんどくならへん？
そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令するのいつぐらいになるねん？
海外のみんなもほぼマスクしとらんがな！
医療崩壊するのが怖いだけなんじゃないかな？
さてと、本題に入ろう！
レスポンシブのCSS記述方法
他業者がいろんなトラブルで、格安でこっちに仕事を依頼することが増えてきてます。
他業者がHTMLコーディングしたデータの中身を見ると、ホンマにド素人ですわ！
どこかで学んだのかわかりませんが…
～ちょっとした愚痴でゴメンね～
レスポンシブで行う時のCSSの記述方法
@media screen and (max-width: 1024px) {
/*
* 画面サイズが最大1024pxまで記述したいとき
* 主に、タブレットサイズの大きさ
* iPad が横モードに表示したときの大きさのサイズ
*/
}
@media screen and (max-width: 768px) {
/*
* 画面サイズが最大768pxまで記述したいとき
* 主に、タブレットサイズの大きさ
* iPad が縦モードに表示したときの大きさのサイズ
*/
}
@media screen and (max-width: 480px) {
/*
* 画面サイズが最大480pxまで記述したいとき
* 主に、スマートフォンサイズの大きさ
* スマートフォンが縦モードに表示したときの大きさのサイズ
*/
}
@media screen and (max-width: 380px) {
/*
* 画面サイズが最大380pxまで記述したいとき
* 主に、スマートフォンサイズの大きさ
* スマートフォンが縦モードに表示したときの大きさのサイズ
*/
}
@media screen and (max-width: 320px) {
/*
* 画面サイズが最大320pxまで記述したいとき
* 主に、スマートフォンサイズの大きさ
* スマートフォンが縦モードに表示したときの大きさのサイズ
*/
}ほかに最小値から最大値までの記述方法があります。
@media screen and (min-width:768px) and (max-width:1024px) {
/*
* 画面サイズが最小768pxから最大1024pxまで記述したいとき
*/
}HTMLファイルの中に、CSSを読み込む方法もあります。
<head>
<link rel="stylesheet" href="phone.css" media="screen and (max-width:480px)">
/* 画面サイズが480pxのスマートフォンを表示をさせたいとき */
</head>こっちでは基本的に、スタイルシートの中に、PC版を表示をさせて、その下にタブレット版やスマートフォン版を記述しています。
では、また！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日