- 締切済み
ホームページビルダー15 テンプレートの編集
ホームページビルダー15で自社のホームページを作成しています。 ８月下旬までに完成させろとの社長命令により CSSプロフェッショナルテンプレートを使用しております。 初心者の為、HTMLやCSSの入門編参考書を読みながらの作業で、 なんとか、おおまかな所までは完成させられそうなのですが、 どうしても乗り越えられない壁ができました。 それはメニューリストをプルダウン化させることです。 自分なりにいろいろ調べてはいるのですが、 いまいち理解できません。 例えば、某掲示板で私と同じ質問があり、 回答者の方が http://html.datura.jp/2009/07/pulldown.html を参考にして、CSSをコピーしてメモ帳に貼り付け→名前を保存→menu.css menu.cssファイルをホームページフォルダ内に移動する スタイルシートマネージャを起動→外部スタイルシートの追加→menu.cssを指定 これでhtmlファイル内に <link href="menu.css" rel="stylesheet" type="text/css"> が追加され、 CSSファイルがリンクとして呼び込まれます。 と回答し、質問者の方が「助かりました！」と納得されております。 ところが、私も同じようにしてみたところ 何も変わりません。 私の勉強不足もあるのだと思いますが、 そこから何かを変えたりしなければならないのでしょうか？ ちなみに私は、言われたままにしているのですが… なんとか、テンプレートのHTMLとCSSをいじって プルダウン化を実現させたいです。 少し時間もなく、焦って質問させていただきました。 できれば、手順を追って、細かく教えていただけますと助かります。 ご面倒かと思いますが、何卒よろしくお願い申し上げます。
- azumakengo
- お礼率25% (1/4)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
ファイルをまとめるとこんな感じ。 <!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" id="sixapart-standard" xml:lang="ja" lang="ja"> <head> <STYLE type="text/css"> <!-- ul#pulldown-menu, ul#pulldown-menu li, ul#pulldown-menu li ul, ul#pulldown-menu li ul li { margin: 0; padding: 0; background: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; zoom: 1; } ul#pulldown-menu a { color: #FFF; text-decoration: none; } ul#pulldown-menu a:link, ul#pulldown-menu a:visited { background: #000; } ul#pulldown-menu a:hover, ul#pulldown-menu a:active { background: #666; } ul#pulldown-menu li { float: left; position: relative; margin: 0 1px; width: 10em; height: 2em; font-weight: bold; line-height: 2em; } ul#pulldown-menu li a { display: block; width: 10em; height: 2em; text-align: center; } ul#pulldown-menu li ul li { float: none; margin: 0; font-weight: normal; } ul#pulldown-menu li ul, ul#pulldown-menu li ul li ul { display: none; } ul#pulldown-menu li:hover ul { display: block; position: absolute; z-index: 100; } * html ul#pulldown-menu li:hover ul { vertical-align: bottom; } ul#pulldown-menu li:hover ul li ul { display: none; } ul#pulldown-menu li ul li:hover ul { display: block; position: absolute; top: 0; left: 10em; z-index: 200; } --> </STYLE> </head> <body> <ul id="pulldown-menu"> <li><a href="#">検索エンジン</a> <ul> <li><a href="http://www.yahoo.co.jp">Yahoo!</a> <ul> <li><a href="http://image-search.yahoo.co.jp/">画像検索</a></li> <li><a href="http://search.yahoo.co.jp/video">動画検索</a></li> <li><a href="http://blog-search.yahoo.co.jp/">ブログ検索</a></li> <li><a href="http://map.yahoo.co.jp/">地図</a></li> </ul> </li> <li><a href="http://www.google.co.jp">Google</a> <ul> <li><a href="http://images.google.co.jp/">画像検索</a></li> <li><a href="http://video.google.co.jp/">動画検索</a></li> <li><a href="http://maps.google.co.jp/">地図</a></li> <li><a href="http://news.google.co.jp/">ニュース</a></li> </ul> </li> <li><a href="http://www.bing.com/">Bing</a> <ul> <li><a href="http://www.bing.com/?scope=images">画像検索</a></li> <li><a href="http://www.bing.com/?scope=video">動画検索</a></li> <li><a href="http://www.bing.com/?scope=news">ニュース</a></li> <li><a href="http://www.bing.com/maps/">地図</a></li> </ul> </li> </ul> </li> <li><a href="#">SEO</a> <ul> <li><a href="#">URL登録</a> <ul> <li><a href="http://submit.search.yahoo.co.jp/add/request">Yahoo!</a></li> <li><a href="http://www.google.co.jp/addurl/">Google</a></li> <li><a href="http://www.bing.com/docs/submit.aspx">Bing</a></li> </ul> </li> <li><a href="#">カテゴリ登録</a> <ul> <li><a href="http://dir.yahoo.co.jp/">Yahoo!</a></li> <li><a href="http://www.google.co.jp/dirhp">Google</a></li> </ul> </li> <li><a href="#">更新を通知</a> <ul> <li><a href="https://siteexplorer.search.yahoo.co.jp/">Yahoo!</a></li> <li><a href="https://www.google.com/webmasters/tools/">Google</a></li> <li><a href="http://www.bing.com/webmaster/WebmasterManageSitesPage.aspx">Bing</a></li> </ul> </li> </ul> </li> <li><a href="#">Validation</a> <ul> <li><a href="http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html">Another HTML</a></li> <li><a href="#">W3C</a> <ul> <li><a href="http://validator.w3.org/">HTML</a></li> <li><a href="http://jigsaw.w3.org/css-validator/">CSS</a></li> </ul> </li> </ul> </li> </ul> <br style="clear: both;" /> </body> </html> ｃｓｓを外部ファイル化するなら <STYLE type="text/css">～</style>の～の部分をmenu.cssというファイルにする。<head>内に <link href="menu.css" rel="stylesheet" type="text/css"> を入れるです。
- Z31
- ベストアンサー率37% (735/1957)
次のサイトの「JavaScript編」を参考にしてみてください。 http://www.wsb.jp/hpb/
- siotan88
- ベストアンサー率37% (176/466)
メニューリストをプルダウン化とは、プルダウンメニューからのリンクのことですね。 ＨＴＭＬソースタブからＨＴＭＬ編集をするとできます。 次のサイトにサンプルが示されていますので、アレンジしてみるとよいでしょう。 ぜひ、お試しください。
補足
siotan88様、迅速な対応、恐れ入ります。 私の言葉足らずな部分もあるのですが、 プルダウンではなく、正しくは「ドロップダウン」でした。 （メニューにカーソルを持って行くと、サブメニューが垂れ下がるようなやつです）。 しかし、このプルダウンの作り方も今後は参考になると思います。 ありがとうございます。 もし、お時間あるようでしたら、「ドロップダウン」のやり方も お教えいただけたらと思います。 お願いします。
補足
Z31様 夜分の回答、恐れ入ります。 私はJava Scriptの事に関しては無知で、 出来るかどうかはわかりませんが、 来週、出社した際には是非チャレンジしたいと思います。 頑張ります！