- ベストアンサー
LI タグでメニュー
以下のホームページの「アトラクション」や「レストラン」「ショップガイド」などの中央のメニューをCSSとliタグで作成する方法を教えてください。 http://www.dreamagic.jp/tds/ よろしくお願いします。
- ddmat312
- お礼率70% (362/513)
- HTML
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
たびたびすみません、#4です。 以前のだとli個々の高さが変わると対応できませんね… ということで、dlのheightをクラスで指定してあげてください。 (よく見ればCSS部分にも変な「｝」が…orz 訂正版を書いておきますね。 コード改 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css" media="all"> <!-- body{ font-size:75%; } ul{ display:block; margin:0px; padding:0px; width:660px; } li{ display:block; width:200px; margin:0px; float:left; } p{ background-color:#006699; color:#ffffff; border:1px solid #333232; text-align:center; line-height:2em; margin:0px 5px 0px 0px; } dt{ margin:0px; } dl{ margin:0px 5px 5px 0px; border:1px solid #333232; } dt{ margin:0px 0px 0px 5px; font-weight:bold; line-height:1.8em; } dd{ margin:2px 2px 2px 5px; } .height1{ height:18em; } .height2{ height:37em; } / / --> </style> <title>Untitled Document</title> </head> <body> <ul> <li> <p class="menu_title">アトラクションガイド</p> <dl class="height1"> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">レストランガイド</p> <dl class="height1"> <dt>レストラン一覧</dt> <dd>» テーマポート別レストラン</dd> <dd>» おすすめレストラン</dd> <dd>» 目的別レストラン</dd> <dd>» アルコール提供レストラン</dd> <dd>» ミラコスタでお食事！</dd> <dt>新レストラン特集！</dt> <dd>» デランシー・ケータリング</dd> <dd>» ロストリバークックハウス</dd> </dl> </li> <li> <p class="menu_title">ショップガイド</p> <dl class="height1"> <dt>ショップ一覧</dt> <dd>» テーマポート別ショップ</dd> <dd>» 目的別ショップ</dd> <dd>新ショップ特集！</dd> <dd>» タワー・オブ・テラー・メモラビリア</dd> <dt>オリジナルグッズ特集！</dt> <dd>» ジュエリーストラップ</dd> <dd>» オリジナルマウスタグ</dd> <dd>» オリジナルレザーカービング</dd> <dd>コレクションアイテム特集！</dd> <dd>» 1枚100円スーベニアメダル</dd> </dl> </li> <li> <p class="menu_title">スペシャルイベントガイド</p> <dl class="height2"> <dt>開催中のスペシャルイベント</dt> <dd>» さあ、祝祭の海へ。"東京ディズニーシー5thアニバーサリー"<br />(～2007年5月31日)</dd> <dd>» 東京ディズニーシー・スプリングカーニバル<br />(3月21日～5月31日)</dd> <dt>今後のスペシャルイベント</dt> <dt>過去のスペシャルイベント</dt> <dd>» スペシャルイベント一覧</dd> </dl> </li> <li> <p class="menu_title">ショー＆パレードガイド</p> <dl class="height2"> <dt>デイタイム・ハーバーショー</dt> <dd>» レジェンド・オブ・ミシカ</dd> <dd>ナイトタイム・ハーバーショー</dd> <dd>» ブラヴィッシーモ！</dd> <dt>花火</dt> <dd>» ディズニーマジック・イン・ザ・スカイ</dd> <dt>ステージショー(屋外)</dt> <dd>» ミート＆スマイル</dd> <dd>» オーバー・ザ・ウェイブ</dd> <dd>» ケープコッド・ステップアウト</dd> <dd>» リズミック・ピミエントス</dd> <dd>» プレシャストレジャー・オブ・アグラバー</dd> <dd>» ミュージック・フェスティバル・プログラム</dd> <dt>ステージショー(屋内)</dt> <dd>» ビッグバンドビート</dd> <dd>» ドナルドのボートビルダー</dd> <dd>» ミスティックリズム</dd> <dd>» サルサ！サルサ！サルサ！</dd> <dd>» ムジカ・メヒカーナ</dd> <dt>過去のショー＆パレード</dt> <dd>» ショー＆パレード一覧 </dl> </li> <li> <p class="menu_title">ゲストサービス施設ガイド</p> <dl class="height2"> <dt>ディズニーシー園内</dt> <dd>» パークインフォメーションボード</dd> <dd>» ゲストリレーション</dd> <dd>» 迷子センター／ベビーセンター</dd> <dd>» ベビーカー＆車イスレンタル</dd> <dd>» 三井住友銀行</dd> <dd>» コインロッカー</dd> <dd>» 救護室</dd> <dt>ディズニーシー園外</dt> <dd>» 東京ディズニーシー・インフォメーション</dd> <dd>» コインロッカー</dd> <dd>» ピクニックエリア</dd> <dd>» ペットクラブ</dd> <dd>» 団体窓口</dd> </dl> </li> <li> <p class="menu_title">便利なサービス</p> <dl class="height1"> <dt>無料サービス</dt> <dd>» ファストパス</dd> <dd>» シングルライダー</dd> <dd>» チャイルドスイッチ</dd> <dd>» プライオリティシーティング</dd> <dd>» バースデーシール</dd> <dt>有料サービス</dt> <dd>» ガイドツアー</dd> <dd>» フォトエキスプレス</dd> </dl> </li> <li> <p class="menu_title">攻略！ディズニーシー</p> <dl class="height1"> <dt>計画前にチェック！</dt> <dd>» ディズニーシー混雑状況</dd> <dd>» ディズニーシー混雑予想2006</dd> <dd>» 年間混雑スケジュール</dd> <dd>» 休止施設情報</dd> <dt>ディズニーシーの回り方</dt> <dd>» オープン直後の傾向と対策</dd> <dd>» ディズニーシーの裏技！</dd> </dl> </li> <li> <p class="menu_title">Enjoy! ディズニーシー</p> <dl class="height1"> <dt>もっと楽しむディズニーシー</dt> <dd>» キャラクターと写真を撮りたい！</dd> <dd>» エンターティナーに会いたい！</dd> <dd>» 誕生日・記念日をお祝いしたい！</dd> <dd>» いつもと違った遊び方をしたい！</dd> <dd>» ディズニーシー・トリビア</dd> <dd>» 東京ディズニーシー探訪</dd> <dt>お得に楽しむディズニーランド</dt> <dd>» プレゼント・記念品をもらおう！</dd> <dt>旅のしおりダウンロード</dt> <dd>» 「旅のしおり」を作ろう！</dd> </dl> </li> </ul> </body> </html>
その他の回答 (5)
- aegills
- ベストアンサー率70% (7/10)
すみません、＃４です。 liをfloatしって何でしょうね・・・ liをfloat:leftでお願いします。 ちなみに、サンプルの表示はIE8, FireFox3.5, Chrome2で確認しています。 IE6やIE7だと崩れるかもしれませんが、その辺はCSSハックするなり、Javascript使うなりで対処してください。
- aegills
- ベストアンサー率70% (7/10)
やっつけですが、これでいかがでしょう？ 1. ulのwidthを固定 2. liをfloatし、widthを固定 3. liのwidthとmarginの値を調整 4. その他よしなに 以下に該当部のみコード書いておきます。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css" media="all"> <!-- body{ font-size:75%; } ul{ display:block; margin:0px; padding:0px; width:660px; } li{ display:block; width:200px; margin:0px; float:left; } p{ background-color:#006699; color:#ffffff; border:1px solid #333232; text-align:center; line-height:2em; margin:0px 5px 0px 0px; } dt{ margin:0px; } dl{ margin:0px 5px 5px 0px; border:1px solid #333232; } dt{ margin:0px 0px 0px 5px; font-weight:bold; line-height:1.8em; } dd{ margin:2px 2px 2px 10px; } } / / --> </style> <title>Untitled Document</title> </head> <body> <ul> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> <li> <p class="menu_title">アトラクションガイド</p> <dl> <dt>アトラクション一覧</dt> <dd>» テーマポート別アトラクション</dd> <dd>» おすすめアトラクション</dd> <dd>» タイプ別アトラクション</dd> <dd>» 混雑度別アトラクション</dd> <dd>» 制限のあるアトラクション</dd> <dt>新アトラクション特集！</dt> <dd>» タワー・オブ・テラー</dd> <dd>» レイジングスピリッツ</dd> <dd>» アリエルのグリーティンググロット</dd> </dl> </li> </ul> </body> </html>
一応参考に。 アトラクションガイド アトラクション一覧 テーマポート別アトラクション おすすめアトラクション タイプ別アトラクション ・・・ の箇所ですよね？ 此処のCSSは以下。 table.menu h2 { color: #ffffff; font-size: 11px; background: #336699; font-weight: bold; padding: 4px; margin: 0px; border: 1px solid #223344; } table.menu td.on { background-color: #f8f8f8; font-size: 12px; line-height: 160%; padding: 5px; margin: 0px; border: 1px solid #cccccc; } コレを参考にして「リスト」に当て嵌めれば良いのでは？ 該当サイトの外部CSS。 http://www.dreamagic.jp/styles-site.css 該当HTML一部抜粋。 <table border="0" width="660" cellspacing="0" cellpadding="0" class="menu" summary="東京ディズニーシー"> <tr> <td><h2>アトラクションガイド</h2></td> <td width="6" rowspan="3"><img src="/img/spacer.gif" width="6" height="1" border="0" alt="" class="nm" /></td> <td><h2>レストランガイド</h2></td> <td width="6" rowspan="3"><img src="/img/spacer.gif" width="6" height="1" border="0" alt="" class="nm" /></td> <td><h2>ショップガイド</h2></td> </tr> <tr> <td valign="top" class="on"> <strong>アトラクション一覧</strong><br /> » <a href="attraction/" title="テーマポート別アトラクション">テーマポート別アトラクション</a><br /> » <a href="attraction/index_st.html" title="おすすめアトラクション">おすすめアトラクション</a><br /> » <a href="attraction/index_tp.html" title="タイプ別アトラクション">タイプ別アトラクション</a><br />
こう云う場合は該当する箇所のHTMLソースと参照先のCSSを確認。 CSSはclassやidで指定されてるので、直ぐに判明します。 此処で質問するよりも、実際のソースを確認。
補足
リンク先の箇所はcssデザインではありません。 このようなデザインのメニューをcssでお願いします。
該当のＨＰはＣＳＳデザインではありませが、あえてＣＳＳで書きます。 <ul class="menu-box"> <li>項目</li> <li>項目</li> <li>項目</li> <li>項目</li> </ul> css .menu-box { width:xxpx float:left; } .menu-box li { background: url(ブレットイメージ画像のファイル名) no-repeat left center; clear: both; list-style: none; color: #000000; margin: 0px; padding: 0px 5px 0px 10px; } *外枠の位置はＣＳＳで調整してください。
補足
二段目以降のメニューが右側によりませんでした
関連するQ&A
- <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
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- <li>リストで横メニューを作るわけ
CSSで作成する際、 <li>リストを横書きにしてメニューに使う方法をよく見かけます。 <li>リストを使わなくても同じような横のメニューは作れますが、なぜ、あえて<li>リストを使って作るのでしょうか。 <li>を使うとメリットがあるという理由があったら教えてください。
- 締切済み
- ホームページ作成ソフト
- <li>タグを使って横並びメニューボタンを作成する際ベストな手法とは？
CSSで、横並びのメニューボタンを作成しています。 （文字も画像にしています。） imgタグで並べるのではなく、liタグを使って、テキストは表示しないようにしたいと思い、下記のようなソースで記述しました。 /*htmlソース*/ <li class="tmenu01"><a href="sample">はじめに</a></li> /*cssソース*/ li.tmenu01 { display:block; width:126px; height:31px; background:url(image/menu01.gif) no-repeat; text-indent:-9999px; float: left; } しかし、text-indent:-9999px;とfloat: left;をいっしょに使用すると、背景画像・文字とも表示されなくなってしまいます。 いろいろネットを調べてみたのですが、文字を飛ばす+横並びのバージョンの解決方法が見つからず、方法がわかりません。 いい方法がありましたら、どなたか教えてください…m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- dreamweaver cs4 で<li>タグのcssについて
dreamweaver cs4 で<li>タグのcssの設定を以下のようにしました。 自分は下の図のように単語と単語の間を空けたいのですが、どうもうまくいきません。 設定方法ご存じの方、いらっしゃいましたら教えていただけたら嬉しいです。
- 締切済み
- ホームページ作成ソフト
- cssだけで縦書き的にliを並べる
すみません、質問させてください。 <ul> <li>1</li> <li>2</li> … <li>10</li> </ul> を、 1 6 2 7 3 8 4 9 5 10 と、並べる方法はありますでしょうか？ ただし、liの数は1～10の間で変動し、 ulは常に親要素の中央に配置させたいです。 ※liのwidthを100pxとした場合、 liの数が5以下の場合はulもwidthが100pxで親に中央配置、 liが6以上の場合はulのwidthが200pxになって親に中央配置。 cssだけで実装できる方法があればご教授ください。
- ベストアンサー
- CSS
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- <li>で並べたメニューのリンク色指定class
<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。 図のような状態で、MENUは（赤）、TOPは（青）と２種類の色分けをしたメニューバーを作っています。 それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが うまくいきません。 ●現在やっている方法 ・htmlでリストを組み、それぞれリンクタグにクラス指定 MENU（赤） … class="menu" TOP（青） … class="top" ・cssでclassのリンク色a、a:hoverを指定 【html】 <ul> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="top">TOP</a></li> </ul> 【css】 a.menu:link { color: #000000; border-left-width: 5px; border-left-style: solid; border-left-color: #ff0000; padding-left: 5px; font-size: 10px; margin-right: 10px; } a.menu:hover { color: #cccccc; border-left-width: 5px; border-left-style: solid; border-left-color: #ffc5c5; padding-left: 5px; font-size: 10px; margin-right: 10px; } …class="top"（青）も同じ感じ ---------------------------- クラスごとのリンク色指定がうまく認識されていない気がします。 記述が間違っているのでしょうか？それともそもそもこの方法が間違っているのでしょうか？ お恥ずかしながらこの場を借りて質問させて頂きました。 色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。
- 締切済み
- HTML
- JQueryで、liタグの背景に色を付けたい。
JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>
- ベストアンサー
- JavaScript
- スマホだと<li>に・が出るのですが
Wordpressを使ってホームページを作成しています。 初心者です。 ショッピングサイトを作成する際 <ul>と<li>を使って、商品の画像、商品名、カートボタン、この３っつを横並びにした一行を作り、 それをいくつも重ねて、一覧表の中で買い物をできるような感じの物を作りました。 ところが、スマートフォンで見ると、 <li>を使ったところに・が入ります。 パソコンの方では、CSSでtable-cellと書いているので、それで・が見えないのだと思います。 何か改善の方法はありますか？
- ベストアンサー
- CSS
お礼
aegills様、大変丁寧なCSSとHTMLをどうもありがとうございました。 おかげで思っていたデザインが組めました。 お忙しい中ありがとうございました。