Q&A
SPというのは「SmartPhone」の略ということで良いでしょうか・・・？違ってたらごめんなさい。また、「最後の一行」がどれにあたるのかも明記してもらえると助かります。
SPで【縦横同じサイズ画像】を【背景画像】に設定しレスポンシブにいたしました。
しかし、なぜか最後の一行
<li><a href="https://dpoint.jp/ctrw/web3/chance/startup.html" target="_blank"><img src="https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg"/></a></li>
のコードを書き換えたり、liにdiv
<body> <ul class="table-ul"> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_01.jpg) no-repeat 0 0; background-size: 100%;"><a href="#"><div style="display: block"></div></a></li> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_02.jpg) no-repeat 0 0; background-size: 100%;"></li> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_03.jpg) no-repeat 0 0; background-size: 100%;"></li> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg) no-repeat 0 0; background-size: 100%;"></li> <li> <a href="https://dpoint.jp/ctrw/web3/chance/startup.html" target="_blank"><img src="https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg"></a> </li> </ul> </body> ```やaタグ ```ここに言語を入力 <body> <ul class="table-ul"> <a href="#"> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_01.jpg) no-repeat 0 0; background-size: 100%;"></li> </a> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_02.jpg) no-repeat 0 0; background-size: 100%;"></li> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_03.jpg) no-repeat 0 0; background-size: 100%;"></li> <li style=" background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg) no-repeat 0 0; background-size: 100%;"></li> <li> <a href="https://dpoint.jp/ctrw/web3/chance/startup.html" target="_blank"><img src="https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg"></a> </li> </ul> </body> ```を付け加えただけで表示がおかしくなります。 以下がソースになります。何かお分かりになりましたらご教授くださいますと幸いです。 ```ここに言語を入力 <ul class="table-ul"> <li style=" display: table-cell; vertical-align: middle; width: 25%; background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_01.jpg) no-repeat 0 0; background-size: 100%;"> </li> <li style=" display: table-cell; vertical-align: middle; width: 25%; background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_02.jpg) no-repeat 0 0; background-size: 100%;"> </a> <li style=" display: table-cell; vertical-align: middle; width: 25%; background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_03.jpg) no-repeat 0 0; background-size: 100%;"> </li> <li style=" display: table-cell; vertical-align: middle; width: 25%; background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg) no-repeat 0 0; background-size: 100%;"> </li> <li><a href="https://dpoint.jp/ctrw/web3/chance/startup.html" target="_blank"><img src="https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg"/></a></li> </ul>
そうです。スマートフォン対応です。
SPだけだと色々と意味ができてしまうのであまり省略されない方が良いかと思います。もう１点追記してますので、そちらもご一読願います。
ご指摘ありがとうございます！ただいま修正いたしました。
修正ありがとうございます。
「liにdivやaタグを付け加えた後」のコードも追記いただけませんか？
該当架所以外のCSSが影響しているかもしれません。読み込んで利用しているCSSの提示は可能ですか?
あ、コメントだとマークダウン使えないので、お手数ですが、質問本文に追記お願いします。
ただ、質問本文でも文字数制限があるので難しいところですね・・・
だ、だめでした。。。制限がありまして貼れなうようです。
サーバーに単体でUPしますので少々お待ちいただけますでしょうか
http://cdn.3ple.jp/plugin/feature/img/sample.css こちらが他のcssです。よろしくお願いいたします。
↑一部文字化けしちゃいましたが一例です。
コードは質問文に追記してください。
回答1件
0
自己解決
<style>
.d_1{
display:block;
width:100%;
height:0;
margin:0 auto;
padding-top: 184%;
text-indent: -9999px;
background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_01.jpg) no-repeat 0 0;
background-size: cover;
}
.d_2{
display:block;
width:100%;
height:0;
margin:0 auto;
padding-top: 184%;
text-indent: -9999px;
background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_02.jpg) no-repeat 0 0;
background-size: cover;
}
.d_3{
display:block;
width:100%;
height:0;
margin:0 auto;
padding-top: 184%;
text-indent: -9999px;
background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_03.jpg) no-repeat 0 0;
background-size: cover;
}
.d_4{
display:block;
width:100%;
height:0;
margin:0 auto;
padding-top: 184%;
text-indent: -9999px;
background:url(https://www.3ple.jp/media/2017/07/d_20_summer_sp_04.jpg) no-repeat 0 0;
background-size: cover;
}
.table-ul {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
.table-ul li {
display: table-cell;
vertical-align: middle;
width: 25%;
}
</style>
<body>
<ul class="table-ul">
<li>
<div class="d_1"></div>
</li>
<li>
<a href="https://dpoint.jp/ctrw/web3/chance/startup.html#flow04" target="_blank">
<div class="d_2"></div></a>
</li>
<li style="list-style: none; display: inline">
<a href="https://info.d-card.jp/std/campaigns/summerfes/cpn-summerfes.html" target="_blank">
<div class="d_3"></div></a>
</li>
<li>
<a href="https://dpoint.jp/ctrw/web3/chance/startup.html#flow03" target="_blank">
<div class="d_4"></div></a>
</li>
</ul>
投稿2017/07/24 10:31
総合スコア49
あなたの回答
tips
プレビュー
