• ベストアンサー

スマホだと<li>に・が出るのですが

Wordpressを使ってホームページを作成しています。 初心者です。 ショッピングサイトを作成する際 <ul>と<li>を使って、商品の画像、商品名、カートボタン、この3っつを横並びにした一行を作り、 それをいくつも重ねて、一覧表の中で買い物をできるような感じの物を作りました。 ところが、スマートフォンで見ると、 <li>を使ったところに・が入ります。 パソコンの方では、CSSでtable-cellと書いているので、それで・が見えないのだと思います。 何か改善の方法はありますか?

  • CSS
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
回答No.2

画面の幅によって読み込むCSSが異なるのかもね。 https://allabout.co.jp/gm/gc/396404/

ebiharu
質問者

お礼

そういう事ですか。 調べてみましたが、初心者でもあるし詳しい事までは分かりませんでした。 Iconic one というテーマを使わせて頂いているのですが、 そのテーマ自体のフォルダを見るとスタイルシートはstyle.cssの1つだけで設定していそうなのですが、 page-templatesというフォルダがあり、その中に、full-width.phpというファイルがあり、何となくですが、このファイルで画面サイズを見て、判断しているっぽいです。 すみません、よく分からないので、あくまでも推測ですが・・・ うーん、初心者には簡単には直せそうにないですね。 回答、ありがとうございました。

その他の回答 (2)

回答No.3

AndroidとPCあればスマホで実際に見ている画面をデバック出来ます。 http://qiita.com/hojishi/items/12b726f8b02ef3d713e4 chromeの開発者ツール使えば、実際にそこの部分にどんなcssがあてられているのか見ることが出来ます。 が、ちょっと難しいかもですね。 以上、補足情報でした。

ebiharu
質問者

お礼

せっかく手順まであるのですから、やってみようと思い、 教えて頂いたURL先の手順を踏んでみました。 準備の段階で、 「PC に Google USB Driver をインストールする 」ここをクリックすると、「ここをクリックして Google USB ドライバの ZIP ファイルをダウンロードします (latest_usb_driver_windows.zip)」という内容が書いてあるページに飛ぶのですが、ここがダウンロードできず断念しました。 クリックしてもダウンロードが始まらないのです。 ファイル名だけで検索すると、危険なサイトに繋がりました、という警告がノートン・アンチウィルスより出されたので止めました。 せっかく前に進めそうだったのに、残念です。 回答、ありがとうございました。

回答No.1

「・」などを非表示にするのなら CSSで list-style: none; にしておけば、 PC/スマホどちらでも見栄えに違いは無いのでは。

ebiharu
質問者

お礼

うーん・・・ 追加してみたのですが、変化無いです。 検索したら、list-style-type:none; というのもあったので、こちらもやってみたのですが、変化無しです。 スマホだけ・が付いて見えます。 回答、ありがとうございました。

関連するQ&A

  • css の float:left; を li 適用

    css の float:left; を li に適用すると <ul>   <li>AAA</li>   <li>BBB</li>   <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul>   <li>AAA</li>   <li>BBB     <ul>       <li>aaa</li>       <li>bbb</li>     </ul>   </li>   <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB     ●CCC      □aaa□bbb のように表示されます これを ●AAA●BBB●CCC      □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします

  • css li に入れ子で適用する範囲

    HTML の li にcssを適用する場合ですが 下のように入れ子の場合 A行に  #aaaaa {background-color:yellow;} B行に  #bbbbb {background-color:pink;} B行の部分だけはピンクになりますが A行の入れ子部分は黄色です このような入れ子状態で、A行一行のみ黄色にすることはできますか A行の下の <ul>に対して、別の cssを適用するなど なにか方法があれば教えてください よろしく、お願いします <ul>   <li>1st item</li>   <li>2nd item     <ul>       <li>2 - 1</li>       <li id="aaaaa">2 - 2    ...A行         <ul>           <li id="bbbbb">2 - 2 - 1</li>  ...B行           <li>2 - 2 - 2</li>           <li>2 - 2 - 3</li>         </ul>       </li>       <li>2 - 3</li>     </ul>   </li>   <li>3rd item</li> </ul>

  • liタグをCSSで指定して、レイアウトに用いています。背景色をつけたいのです。

    CSSでレイアウトして、サイトを作成しています。 <CSS部分> ul.box { zoom: 100%; list-style: none; padding: 0; margin: 0; } ul.box:after { height: 0; visibility: hidden; content: ""; display: block; clear: left; } ul.box li { float: left; width: 240px; background-color: #ffffff; border: solid 1px; padding: 1px; margin: 5px; <HTML部分> <ul class="box">     <li>テーマA</li>     <li>テーマB</li>     <li>Aの説明</li> <li>Bの説明</li> <li>テーマC</li> <li>テーマD</li> <li>Cの説明</li> <li>Dの説明</li> </ul> 以上のような感じです。HTML部分はこのULをさらに囲っている親要素があるのですが、それの幅があるので、横並びに2つ並んでいて、縦には4つboxが並んでいるような状態です。 ですので、ちぐはぐのような感じになっています。 問題はこのテーマとかかれているところだけに背景色をつけたいのですが、どうしてもできません。 http://htmltag.1.tool.ms/153/ こちらのサイトを見て <li bgcolor="#ffdddd">をやってみても色はつきません。 どうやればよいのでしょうか。 CSS自体変更した方がよいのでしょうか。

    • ベストアンサー
    • HTML
  • float:leftで<li>要素を横並びさせてから、中央揃えする方法は?

    HTML <dir id="footer">  <ul>   <li>個人情報保護方針</li>   <li>サイトマップ</li>   <li>組織概要</li>   <li>お問い合わせ</li>  </ul> </dir> CSS #footer ul li{float: left;} 上記の場合、li要素は横並びするのですが、 <div>要素の中で中央揃えするには どうしたらいいのでしょうか?

    • ベストアンサー
    • HTML
  • <li>タグでメニューを作った場合

    横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか

    • ベストアンサー
    • CSS
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか? ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • javascriptで、クリックしたらメニューが閉じるようにしたいです

    javascriptで、クリックしたらメニューが閉じるようにしたいです。 one two three ... と 横並びのメニューがあってそこをクリックするとプルダウンでメニューが 出てくるようなものをJavaScriptで作っています。 そこで、その横並びのメニュー・プルダウンで出てきたメニュー以外のところをクリックすると、 メニューが閉じるようにしたいと思っています。 どうやったらそのようにできるでしょうか。 ちなみにhtml, cssの概要は以下のとおりです(one, twoのプルダウンは省略) //html----------- <ul id="menu"> <li>one</li> <li>two</li> <li> three <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </li> </ul> //css---------- #menu li ul{ display: none }

  • inline-blockでliが横並びになりません

    inline-blockを使って<li>を横並びにしようとした所、IE、chrome、fox(最新版)で 確認すれば横並びにはなっていますが、Dreamweaver cs4で見ると縦並びのままで、 使用する予定のブログで確認しても縦並びのままです。 ブログのテンプレCSSも見直しましたが原因になりそうなのが見つからず、 Dreamweaverでも横にならないので何か間違っているのかなと思いますが、 何を間違えているのかがわかりません。。。 なお、liは入り子で使用するつもりなのですが、該当するliだけ横にするのは問題ありでしょうか? また、画像サイズは縦長・横長サイズが混在するので下記のようにしてますが、関係してるのでしょうか? イメージ的には添付画像のようなのを希望してます。 すいませんが、ご教授お願いします。 <style type="text/css"> li.e { display:inline-block; vertical-align:top; text-align: center; overflow:visible; width:150px; } li.e img { max-height:100px; width:150px; } </style> <ul> <li class= "h">あいうえお</li> <li class= "w"> <ul> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> あああああああああああああああああ</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> いいいいいいいいいいいいいいいいいい</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> うううううううううううううううううう</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> ええええええええええええええええええええ</a></li> </ul> </li> </ul>

    • ベストアンサー
    • CSS
  • <li>の画像およびテキストリンクのランダム複数表示

    javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul>  <li>   <dl>   <dt>商品1</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li>  <li>   <dl>   <dt>商品2</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>~~</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。

  • CSS で li を float させる方法

    リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか? コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}

    • ベストアンサー
    • HTML

専門家に質問してみよう