• 締切済み

<ol><li>で表示されるリスト番号を、リンクに含めたい

htmlで、<li>タグで表示される 1.リスト一 2.リスト二 などの数字(「1.」などの部分)がリンクに含まれないのですが、これにリンクをはる事は可能でしょうか? -1-2-3-4-5-6-7-8-9-・・・・・ といったような、連番の数字によるリンクをつくりたいのです。 javascriptなどに詳しくないのですが、もしそちらでも似たようなことができればお教えください。

みんなの回答

  • nahomaria
  • ベストアンサー率68% (62/90)
回答No.1

<ol>の数字にリンクを張ることはできません。 <ul>ではダメですか？ CSSで「list-style-type : none;」を指定すれば行頭記号（数字）は表示されませんので、 「リスト一」の部分を「1.リスト一」というように、 自分で数字を加えれば、やりたいことは可能だと思いますよ。 参考： 『初めてのホームページ講座』 “CSS1 Reference　プロパティ　5. 分類（リスト）” ・5-3. list-style-type http://www.hajimeteno.ne.jp/stylesheet/css1/p-classific.html#list-style-type

eggbold
質問者

お礼

ご解答有難うございます。リンクをはる事はできないのですね。残念ですが、それがわかってすっきりしました。 ulではとのことですが、 ソフトを使って自動で増えるリストなので、 一つひとつを1,2,3、と手動で書いていくことができないのです。書き忘れていて申し訳ありませんでした。 ですから、olならば自動で増えても勝手に番号を順に振ってくれるので、と思ったのです。 -------------------- <ol> <ここから勝手に増えるリスト> <li><$リスト$> <ここまで勝手に増えるリスト> </ol> -------------------- 上記のような形の記述をしておいて、自動処理で 下記のようなリストが生成されます。 -------------------- <ol> <li>リスト1 <li>リスト2 </ol>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。

    番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。 お世話になっております。 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角にしたいのですが、 そのようなことはできるのでしょうか。 ご教授ください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • <li>（リスト）で、数字や記号に色を付ける方法

    HTMLタグで　リスト（<li>）というのがありますが、 これを使った場合で、文字ではなくその文字列の前に付く リストの記号やリスト番号に色を付ける方法はありませんか。 1.ABC 2.DEF 3.GHI の数字の部分に色を付けたいのですが。 単純には出来ないのでしょうか？

    • ベストアンサー
    • HTML
  • CSSでリスト[li]の表示がズレる

    HTMLの無料テンプレートを使おうとこちら http://simple.sub.jp/temp.htm からEタイプ（サイズ固定）をダウンロードしたのですが ローカルで見てみるとfirefoxでヘッダー下のリンク（liで記述）がずれます。 添付画像：firefoxでのスクリーンショット 修正しようと見てみましたがどこが悪いのか分かりません。 「.topnavi li」だと思うのですが、どこが悪いのでしょうか？ ご指摘お願いいたします。 HTMLの該当部分 <div id="banner"> <h1><a name="TopofPage">ここにサイトのタイトル</a></h1> </div> <div class="topnavi"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> </div> cssの該当部分 .topnavi{ float:left; width:100%; background:#99ccff; border-width:1px 0 1px 0; border-style:solid #999; height:20px; } .topnavi li{ display:block; float:left; width:125px; text-align:center; font-size:1.2em%; list-style-type:none; }

    • ベストアンサー
    • HTML
  • <li></li>タグを自分のホムペに、記述しているのですがGoogl

    <li></li>タグを自分のホムペに、記述しているのですがGoogleなどで検索をしても<li></li>タグでリンクしているリンクが表示されません。 自分のサイトははっきり出るのですが…。 何が言いたいかわかりますか？ たとえば、Googleで「OKWave」で検索をすると出ますよね。 でもその下に、ライフ・恋愛相談へのリンクが表示されますよね。 それのことを言っているのです。 <li></li>タグでリンクしているページは表示されないのですか？！

  • olタグ・liタグで一部のリストを横並びにした

    olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。

    • ベストアンサー
    • CSS
  • リストが途中で切れていても背景色は表示されるようにしたい

    どうしても分らないので、教えてください。 リスト<li>を横並びにして、項目リンクを作成しているのですが、後々増えることを想定しています。 <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> という状態で、Menu3部分で改行されたようにすると、背景色がMenu5のところで途切れてしまいます。 （※ベースのwidthを300px、liのwidthを100px、といった感じで改行させたように見せています） <li>Menu6</li>を記述しなくても、背景色が表示されるようにしたいのですが、 <div> <ul> <li></li> ... </ul> </div> 上記のように<div>で括り、背景色を指定しても、うまくできません。 括った<div>にheigthをピクセル指定すれば表示されますが、それだと、項目が増えるたびに変更しなければなりません。 また、<li>タグにはlist-style-imageも指定しているので、 <li></li> のような空タグを入れておくのもできません。 どなたか、良い方法がありましたら、教えていただけませんでしょうか？ よろしくお願いいたします。

  • <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を教えて下さい。 よろしくお願いいたします。

  • UL、LIタグの黒丸なしのリスト

    お世話になります。 以下のソースを IEで見ると黒丸なしリストと黒丸ありリストになるのですが FireFoxですと、どちらのリストも黒丸ありのリストになります。 ・これはIEのバグになるのでしょうか？ ・IE・FireFoxともに黒丸なしのリストにしたい場合UL、LIタグで出来ますでしょうか？ ご存知でしたら、申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>ULタグテスト</title> <body> 黒丸なしリスト <ul style="width:150px;"> <li>list1</li> <li>list2</li> <li>list3</li> </ul> 黒丸ありリスト <ul> <li>list4</li> <li>list5</li> <li>list6</li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • <ol>でfloatを使っての3列表示をした時の不具合

    下記の様にし、リストをテーブルを使わずに3列表示したいのですが、 Firefoxだとそのままちゃんと表示されるのですが、IEだと数字ではなく、ドットで表示されてしまいます。 Operaに至っては列毎に1から数字が振られてしまいます。 何か解決法はありませんでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>参考リスト</title> <style type="text/css"> <!-- #line1 { float: left; width: 150px; } #line2 { float: left; width: 150px; } #line3 { float: left; width: 150px; } --> </style> </head> <body> <ol> <div id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </div> <div id="line2"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> </div> <div id="line3"> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </div> </ol> </body></html>

    • ベストアンサー
    • HTML
  • <li>要素の追加方法

    プログラムの最初で <ul id="list"> <li></li><li></li><li></li> </ul> と書いておいて、javascript内でこの<li></li>の中に site_names = ["1","2"]; site_urls = [" http://oshiete.goo.ne.jp/"," http://www.google. co.jp/"]; のような配列の要素やリンクを要素の追加をするにはどうしたら良いのでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する