※ ChatGPTを利用し、要約された質問です(原文:レスポンシブデザインにする方法、参考サイト)
レスポンシブデザインにする方法、参考サイト
このQ&Aのポイント
レスポンシブデザインにする方法や参考サイトをまとめてください。
現在作成しているサイトをレスポンシブにするために、いくつかのサイトを調べていますが、まだ良い情報が見つかっていません。
レスポンシブデザインについて基本的な部分でつまずいています。htmlの<head>部分でのリンクの貼り方に問題があります。どこが間違っているのでしょうか?参考になるサイトも教えていただけるとありがたいです。
現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。
こちらのスキルとしては通常のサイト制作は仕事で請け負っています。
現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。
例えばつまずいているのは基本的な部分なのですが、
htmlの<head>部分に
<link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="css/layout.css">
<link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/tabletcss">
<link rel="stylesheet" media="screen and (min-width:480px)" type="text/css" href="css/smart.css">
と記述し、cssを3種類用意し、各cssに
@media screen and (min-width:480px) {
img{
max-width: 100%;
height: auto;
width /***/:auto;
}・・・以下各要素省略
}
とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。
リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか?
それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。
一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。
お礼
結局layout.css一つに@media screen and (max-width: 1000px) {}のように下に行くにつれ小さいブレイクポイントを指定して自己解決致しました。 しかしやり方は色々あると思いますので、次回スタイルシートを分ける時は回答者様の回答を参考にさせていただきたいと思います。 回答いただきありがとうございました。