Dreamweaver2004でリストを利用してナビゲーションバーを作成する方法

前へ 次へ
このQ&Aのポイント
  • Dreamweaver2004を使用して、リストを横に並べる形でナビゲーションバーを作成する方法について知りたいです。
  • ul要素とli要素にclass属性を付ける方法がわかりません。divタグではなく、<ul class='navi'>のような形でclass属性を付与する方法を教えてください。
  • タグを直接入力して試してみたらエラーが発生しました。書籍やインターネットで詳しい情報を見つけることができず、自学自習のため困っています。初歩的な質問ですが、どなたか教えていただけないでしょうか？
回答を見る
  • ベストアンサー

Dreamweaver2004でリストを利用してナビゲーションバーを作成しようとしていますがclass属性のつけかたが分かりません

初めてdreamweaverでweb制作を試みているビギナーです。Dreamweaver2004でリストを横に並べる形でナビゲーションバーを作成しようとしているのですが、どのように"ul"と"li"にclass属性を与えればよいのか分かりません。divタグではなく、<ul class="navi">というようにするには、Dreamweaver2004でどのように操作をすればよいのでしょうか？ ためしに直接タグ打ちをしてみたら、エラーが起きました（> <) 書籍でもネットでも出てこず、独学なので周りに聞く人もいなくてとても困っています。初歩的な質問でしたら恐縮ですがどうぞよろしくお願いします。

  • ktii
  • お礼率43% (14/32)

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

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

タグインスペクタのclassに入力すればclass属性をセットできます。 > ためしに直接タグ打ちをしてみたら、エラーが起きました（> <) どんなエラーですか？

ktii
質問者

お礼

＞タグインスペクタのclassに入力すればclass属性をセットできます。 できました！ありがとうございます！！！ 多分かなり基本的な質問でしたよね。お付き合い恐縮です。 私が購入Dreamweaver入門本２冊とも、タグインスペクタについて説明がなかったのが敗因でした。 ちなみにエラーは強制終了系のものでした。 タイミングが悪かったのかもしれません。。。 この度は本当にありがとうございましたm(_ _)m

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • Dreamwever2004でクラス属性を同じくするタグに対しそれぞれルールを作成する方法

    QNo.3129512の続きの質問です。 Dreamweaver2004でリストを横に並べる形でナビゲーションバーを作成しようとしているのですが仮にリストに「navi」というクラス属性をつけたとして、 ul.navi{・・・ ul.navi.li{・・・ ul.navi.a{・・・ ul.navi.a:hover{・・・ というように、クラス名を同じくするタグに対しそれぞれルールをつけたいのですが、これはDreamweaverでどのように操作すれば打ち込み可能でしょうか？ 新規スタイルシートルール作成ですと、ひとつのクラス名に対しひとつしかルールを設定できないような気がするのですが・・・何かやり方があるのでしょうか!？ 初心者ゆえ不躾な質問かもしれませんが、お助け頂ければ幸いです。 どうぞよろしくお願いします。

  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

  • Dreamweaverテンプレート機能：リピート領域の属性を個別に変更

    はじめまして。 アドビ・ドリームウィーバーのテンプレート機能について質問です。 例--------------------------------------------- <ul> <!-- TemplateBeginRepeat name="foo" --> <li class="bar"> <!-- TemplateBeginEditable name="hoge" -->編集可能<!-- TemplateEndEditable --> </li> <!-- TemplateEndRepeat --> <li>編集できない</li> <li>編集できない</li> </ul> ・リスト１行目のみ編集可能。 ・１行目はリピート領域。何行でも増やせる状態。 例のような状態とします。 本題ですが、 リピートされた<li>のclassを個別に変更したいと思っています。 ■結果例------------------ <ul> <li class="abc"> あいうえお </li> <li class="def"> かきくけこ </li> <li>編集できない</li> <li>編集できない</li> </ul> 上記のようにするにはどのような方法があるのでしょうか。 アドビヘルプを見る限り、属性の個別変更については書かれていないようなのです。 そもそも不可能なのでしょうか？ また代替案をご存じの方は教えていただけないでしょうか？ 宜しくお願いいたします。 ---------------------- [修正]→[テンプレート]→[属性を編集可能にする]を使った場合、 リピート部分の属性が一括変更となってしまいました。 <ul> <li class="abc"> あいうえお </li> <li class="abc"> かきくけこ </li>... 「一括」ではなく「個別」を希望しています。 ご教授お願いいたします。

  • classの中の<a>タグにidを追加

    div class内のaタグにidを追加できる方法がないかを模索しておりますが、検索では直に（タグ）にidやclassを追加する方法しか出てきませんでした。 もしかしたら、突拍子もないことを言っているかもしれませんが JavaScriptに詳しい方アドバイス宜しくお願い致します。 id、classを割り当てるためのメソッド attr(属性, 属性値) $(function(){ $('ul').attr('id', 'style-ul'); $('li').attr('class', 'style-li');}

  • CSS内で呼び出してる画像に対して、class属性をつけたい

    CSS内で呼び出してる画像に対して、class属性をつけたい お世話になります、CSSに関して下記のようなことは可能なのでしょうか。 とあるライブリにimgタグにclass属性を指定して使用するものがありました。 例：<img src="image.gif" class="○○"/> （クラスを指定すると画像にエフェクトがかかる） これをcssで下記のように呼び出している画像に対して適用することは可能でしょうか。 [cssファイル] #bkg .opt1 { background: url('画像のパス'); } [html] //こんな感じで呼んでいる <li class="bkg opt1"><span>image</span></li> CSS内でクラス指定ができないものかと色々試してみたもののうまくいきません・・ 適用方法、ヒント等教えていただけますでしょうか よろしくお願いします

  • cssで背景を重ねることができるのでしょうか？

    CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ホームページ上のナビゲーションバーがチカッと一瞬白くなる現象について。

    外部スタイルシートを使ってホームページのナビゲーションバーを作ってみました。 <div id="gnavi"> <ul> <li><img src="images/navi/side_l.gif" width="11" height="48" /></li> <li><a href="#" class="n01">ホーム</a></li> <li><a href="#" class="n02">プロフィール</a></li> <li><a href="#" class="n03">ワークス</a></li> <li><a href="#" class="n04">マイブログ</a></li> <li><a href="#" class="n05">コンタクト</a></li> <li><img src="images/navi/side_r.gif" width="11" height="48" /></li> </ul> </div> このような感じで、aタグにスタイルをかけて背景画像を入れ替えています。 プレビューではクリックしても正常に動作していましたが、 サーバーにアップしてカーソルを画像の上に持っていくと一瞬画像が消え白くなります。 他にも探してみたら、下のサイトもそうなっています。 http://info.news2u.net/ http://www.gaitame.com/ これはどうしてでしょうか？ 何が原因でしょうか？ これでは少し見づらく感じてしまうので 改善したいのですが、何かいい方法はありますか？ WEB制作に携わる方、ご教授いただけたら幸いです。 よろしくお願いいたします。

  • 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; }

  • Dreamweaverにロールオーバーの挿入方法

    fireworksでロールオーバーした画像（htmlと画像で書き出し)をDreamweaverのどこに挿入すればいいでしょうか？ <div class="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu</a></li> </ul> また、書き出しはHTMLと画像でして、サイトのなかに書き出ししたのですが合ってますか?

  • 文字位置調整について

    以下ソースコードがあります。 この時、ulリストのmargin-leftで10px開けたいのです。 <h1>CPUとは</h1> <p>CPUは、コンピュータの頭にあたります。以下種類のものがあります<p> <ul> 　<li>Intel</li> 　<li>AMD</li> </ul> この時、 <ul>タグに、「margin-left：10px」とするべきなのか？ 以下ソースのように<div>ブロックを設けて、「margin-left：10px」とするべきなのでしょうか。 <h1>CPUとは</h1> <p>CPUは、コンピュータの頭にあたります。以下種類のものがあります<p> <div class="box"> 　<ul> 　　<li>Intel</li> 　　<li>AMD</li> 　</ul> </div> 仕様書見る限りでは、 >この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 と書いてあるし、ulタグよりdivの方がいいと思うのですが、 ご教授お願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する