スマホサイトでリストを2行・余白なし・レスポンシブにしたい


スマホサイトのメニューを作成しようとしています。
全部画像で6x2の12ボタンです。
(ソースは後で記入します。)
この状態で、以下の問題があります。
1.リストを2行にしたため間に余白が入ってしまう。
2.スマホサイトなのでレスポンシブ化したいんですけど、画像サイズをパーセント表示(100÷6=16%)にすると、余白なしどころかもっと小さくなってしまう。
この2点をどうにか解決できないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2016/07/21 14:29:01
  • 終了:2016/07/22 11:56:24
id:master-3rd

以下ソースです。
<div class="top_m">
<ul class=menu>
<li><a href="#ca01" class="scroll"><img src="c01.png" width="107" height="107"/></a></li>
<li><a href="#ca02" class="scroll"><img src="c02.png" width="107" height="107"/></a></li>
<li><a href="#ca03" class="scroll"><img src="c03.png" width="107" height="107"/></a></li>
<li><a href="#ca04" class="scroll"><img src="c04.png" width="107" height="107"/></a></li>
<li><a href="#ca05" class="scroll"><img src="c05.png" width="107" height="107"/></a></li>
<li><a href="#ca06" class="scroll"><img src="c06.png" width="105" height="107"/></a></li>
<br clear="all" />
<li><a href="#ca07" class="scroll"><img src="c07.png" width="107" height="106"/></a></li>
<li><a href="#ca08" class="scroll"><img src="c08.png" width="107" height="106"/></a></li>
<li><a href="#ca09" class="scroll"><img src="c09.png" width="107" height="106"/></a></li>
<li><a href="#ca10" class="scroll"><img src="c10.png" width="107" height="106"/></a></li>
<li><a href="#ca11" class="scroll"><img src="c11.png" width="107" height="106"/></a></li>
<li><a href="#ca12" class="scroll"><img src="c12.png" width="105" height="106"/></a></li>
</ul>
<script>
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
</script>



■CSS
.top_m {
display: block;
position: fixed;
width: 100%;
z-index: 1000;
padding:0;
margin:0;
}
.top_m ul{list-style:none;
padding:0;
margin:0;
}
.top_m li{float: left;
padding:0;
margin:0;
}

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/07/21 21:39:06

こんな感じでどうでしょう(変更点だけ抜粋)。

<div class="top_m">
    <ul class=menu>
        <!-- ★ img から width と height を削除 -->
        <li><a href="#ca01" class="scroll"><img src="c01.png" /></a></li>
            ...
    </ul>
</div>

<style>
    ...
.top_m li {
    float: left;
    padding:0;
    margin:0;
    line-height: 0;     /* ★ LI の line-height をゼロに */
}
.menu img {
    width: 16vw;        /* ★ 幅の単位は vw で */
}
</style>
id:master-3rd

返答ありがとうございます!
line-heightを0にするのと、単位をvwですね!

2016/07/22 11:56:16

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/07/21 21:39:06ここでベストアンサー

こんな感じでどうでしょう(変更点だけ抜粋)。

<div class="top_m">
    <ul class=menu>
        <!-- ★ img から width と height を削除 -->
        <li><a href="#ca01" class="scroll"><img src="c01.png" /></a></li>
            ...
    </ul>
</div>

<style>
    ...
.top_m li {
    float: left;
    padding:0;
    margin:0;
    line-height: 0;     /* ★ LI の line-height をゼロに */
}
.menu img {
    width: 16vw;        /* ★ 幅の単位は vw で */
}
</style>
id:master-3rd

返答ありがとうございます!
line-heightを0にするのと、単位をvwですね!

2016/07/22 11:56:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません