- ベストアンサー
スマホだと<li>に・が出るのですが
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
画面の幅によって読み込むCSSが異なるのかもね。 https://allabout.co.jp/gm/gc/396404/
その他の回答 (2)
- muuming2001
- ベストアンサー率23% (202/845)
AndroidとPCあればスマホで実際に見ている画面をデバック出来ます。 http://qiita.com/hojishi/items/12b726f8b02ef3d713e4 chromeの開発者ツール使えば、実際にそこの部分にどんなcssがあてられているのか見ることが出来ます。 が、ちょっと難しいかもですね。 以上、補足情報でした。
お礼
せっかく手順まであるのですから、やってみようと思い、 教えて頂いたURL先の手順を踏んでみました。 準備の段階で、 「PC に Google USB Driver をインストールする 」ここをクリックすると、「ここをクリックして Google USB ドライバの ZIP ファイルをダウンロードします (latest_usb_driver_windows.zip)」という内容が書いてあるページに飛ぶのですが、ここがダウンロードできず断念しました。 クリックしてもダウンロードが始まらないのです。 ファイル名だけで検索すると、危険なサイトに繋がりました、という警告がノートン・アンチウィルスより出されたので止めました。 せっかく前に進めそうだったのに、残念です。 回答、ありがとうございました。
- Zephir_rihpeZ
- ベストアンサー率71% (385/536)
「・」などを非表示にするのなら CSSで list-style: none; にしておけば、 PC/スマホどちらでも見栄えに違いは無いのでは。
お礼
うーん・・・ 追加してみたのですが、変化無いです。 検索したら、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>
- 締切済み
- HTML
- 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 }
- ベストアンサー
- JavaScript
- 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を教えて下さい。 よろしくお願いいたします。
- 締切済み
- 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
お礼
そういう事ですか。 調べてみましたが、初心者でもあるし詳しい事までは分かりませんでした。 Iconic one というテーマを使わせて頂いているのですが、 そのテーマ自体のフォルダを見るとスタイルシートはstyle.cssの1つだけで設定していそうなのですが、 page-templatesというフォルダがあり、その中に、full-width.phpというファイルがあり、何となくですが、このファイルで画面サイズを見て、判断しているっぽいです。 すみません、よく分からないので、あくまでも推測ですが・・・ うーん、初心者には簡単には直せそうにないですね。 回答、ありがとうございました。