こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

レスポンシブの横幅

スマフォとタブレット、PC …
レスポンシブデザインを考えるとき、それぞれ、
横幅のピクセル数はどれぐらいの範囲が良いのでしょうか…
ネットで調べても、"これだ !" という範囲がまったく分からないので、
教えて下さい。お願いします。
このサイトです。

http://sumikaikan.jp/

投稿日時 - 2015-12-04 09:12:20

QNo.9090445

困ってます

質問者が選んだベストアンサー

これだ!というものがないのです。デザインやターゲットにより適切な区切りが変わってきます。

ご提示のサイトを拝見しましたが、こだわる場所が違う様に思います。
粗っぽいですが、私なら、cssファイルは1つにします。リキッドレイアウトで、幅に応じてメニューの横の個数を変えるくらい(下記改造案)。

スマホはただ小さくすればいいというものではありません。メニュー等、指で押す場所は、リンク箇所が一つだけポツンとあるか、指で押せる充分な横と縦幅を必要とします。また、文字も大きめに表示するのが一般的です。でないと読めない豆粒の文字となったり、ちいさすぎて読むのに疲れます。

改造案ですが、おおざっぱですが以下の感じ。細かく作りこんでいませんし、既存の部分と重複がありますが、大意は伝わると思います。
head内のcssは<link rel="stylesheet" media="all" type="text/css" href="Norippy.css">のみに。
Norippy.css内の先頭行と最終行
つまり、
@media screen and (max-width: 1024px){
と}
を削除したうえで、最後に以下を追加してみてください。
body{
width:100%;
max-width:1024px;
}
div.top_logo {
background-image: url("site_logo.jpg");
height:0;
width: 100%;
background-size: 100% auto;
padding-top: 30%;
background-repeat: no-repeat;
}
div.main_menu {
width: 100%;
height:auto;
}
ul.menu {
padding: 0px;
overflow: hidden;
}
.main_menu .menu li{
width:25%;
}
.main_menu .menu li a{
background-color:#ffe8e8;
background-size: 100%;
background-image: url("sozai/menu_back_image.gif");
background-position:left center;
}
@media screen and (max-width: 500px){//ここの数値を変えることで、4列から2列への変換値を変更してください。
.main_menu .menu li{
width:50%;
}
div.main {
padding: 15px;
}
p{
font-size: 14px;
line-height: 1.7;
}
div.footer {
padding: 15px;
}
}

投稿日時 - 2015-12-04 23:09:41

補足

こんばんは。ありがとうございます。
そのように変えたところ、こんどはスライドショーのような画像がはみ出てしまいます。どうしたらその点を直すことができるのでしょうか ?
CSS をいじってしまい、混乱しています…
質問ばっかりで申し訳ないです…
http://sumikaikan.jp/

投稿日時 - 2015-12-05 00:05:15

お礼

ありがとうございました !
別件の問題が発生したので、いじってますが、どうしてもできなかったらまた質問してみます。

投稿日時 - 2015-12-05 20:02:20

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.2

div.top_logo だったのを差し替えられたのですね。そういうのを後出しというんですよ。2度手間なので、控えていただくのがマナーかなと思います。

#viewer {
margin: 0px auto;
width: 100%;
height: 0;
text-align: left;
overflow: hidden;
position: relative;
padding-bottom: 30%;
}
これを、全体にかかる場所にいれてください。

投稿日時 - 2015-12-05 01:28:36

補足

おはようございます。
この方法ですと、画像が小さくなるに連れて、
画像内の文字も小さくなってしまいます。
そこで、画像から文字を取り除いて、画像表示エリアに大きく文字を表示させるにはどうしたら良いでしょうか…
これも "後出し" でしょうか…関連性のある質問なので、こちらに書きますが…もしこれがマナー違反であれば、ご指摘下さい。以降気をつけます。

投稿日時 - 2015-12-05 05:42:55

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-