- ベストアンサー
LI タグでメニュー
以下のホームページの「アトラクション」や「レストラン」「ショップガイド」などの中央のメニューをCSSとliタグで作成する方法を教えてください。 http://www.dreamagic.jp/tds/ よろしくお願いします。
- みんなの回答 （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; } *外枠の位置はＣＳＳで調整してください。
補足
二段目以降のメニューが右側によりませんでした
お礼
aegills様、大変丁寧なCSSとHTMLをどうもありがとうございました。 おかげで思っていたデザインが組めました。 お忙しい中ありがとうございました。