ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

リストを使ったときに頭につく数字のフォントサイズを小さくすることは
できるのでしょうか?
文章のフォントは<li>の後にフォントタグをつければ小さくなるのですが
リストの数字が小さく出来ません。
これを小さくすることは可能でしょうか?
<ol>
<li>
<li>
</ol>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

スタイルシートを使えばできます。


たとえば、

<ol style="font-size:80%;">
<li>サンプル</li>
</ol>

のように記述すると元のサイズの 80% になります。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。早速やってみました。
ちゃんと小さくすることができました!
助かりました。
ありがとうございました。

お礼日時:2002/03/27 17:19

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q
  • (リスト)をサイズ指定し、絶対値にすることは可能でしょうか
  • ツリーを作るときに<LI>を使って、
    ・を表示させることができますよね、
    ・これをサイズ変更してなおかつ絶対値にしたいのですが、
    ・可能でしょうか?
    ・よろしくお願いします

    Aベストアンサー

     No. 1~No. 3 の回答をつけた者です。

     理屈では No. 3 で申し上げた方法でよいのですが,こちらで Windows 版の Internet Explorer 6,Netscape 6.2,Opera 6,Opera 7.2 で確認したところ,Opera 6 だけが期待どおりの出力になりました。なかなかに難しいものです。それ以外は,ul の行頭記号のサイズは,フォントサイズ指定には連動せず,ブラウザのフォントサイズ指定やズーム指定に連動するようです。

     それで,掲げてくださった例ですが,これには決定的な誤りがあって,「li 要素は ul 要素または ol 要素の内側にしか現れられない」というものです。ですから,大前提として,

    <ul>
    <li>menu</li>
    </ul>

    と書かなければなりません。

     それから,font 要素の扱いですが,

    <li><font ...>...</font></li>

    では理屈上どうやっても行頭記号の大きさは変わりません。というのは,行頭記号は li 要素がその中身とは別に作り出していることになっているので,その内側に働きかけても無駄ということになります。
     さらに,font 要素は今後の HTML ではお役ご免の予定ですので,<font size="...">...</font> または <font color="...">...</font> 以外の記述では,より一般的な記述である <span style="...">...</span> を使用されることをおすすめします。

     No. 1~No. 3 の回答をつけた者です。

     理屈では No. 3 で申し上げた方法でよいのですが,こちらで Windows 版の Internet Explorer 6,Netscape 6.2,Opera 6,Opera 7.2 で確認したところ,Opera 6 だけが期待どおりの出力になりました。なかなかに難しいものです。それ以外は,ul の行頭記号のサイズは,フォントサイズ指定には連動せず,ブラウザのフォントサイズ指定やズーム指定に連動するようです。

     それで,掲げてくださった例ですが,これには決定的な誤りがあって,「li 要素は ul 要素また...続きを読む

    Qlist-style-type部分だけ大きくしたい

    list-style-typeでdiscを選択して黒丸を表示しているのですが、
    そもそもこの黒丸のサイズが小さすぎていけません。
    かといって、黒丸に続くリストの文章の文字サイズは大きくしたくはありませんから、
    list-style-typeのサイズだけを大きくするにはどう記述指定すればいいでしょうか?

    Aベストアンサー

    他に1台あるパソコンのブラウザも最新版に近いので、試す環境がないのですが…
    こちらに対応ブラウザ・バージョンがずらっと並んでいるので、
    list-style-image は、結構使えるように思います。
    (参考URLとおなじものです)

    http://www.htmq.com/style/list-style-image.shtml

    参考URL:http://www.htmq.com/style/list-style-image.shtml

    Qテーブル内の文字サイズを変更したい。

    HTMLのテーブル内の文字サイズを変更したいのですが。
    イマイチ上手くいかずに悩んでいます。
    出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
    <TD>タグや<TR>タグのところでいじくるのですか?

    Aベストアンサー

    いろいろやり方はありますが
    文字単位でサイズを変更するには
    #2の方法ですね。

    テーブルごとやセル(<TD>)ごとにサイズを変更するには
    スタイルシート(CSS)を使用します。

    テーブルごとにサイズを変更する場合
    <TABLE style="font-size : 20px;">

    セル(<TD>)ごとにサイズを変更する場合
    <TD style="font-size : 20px;">あああ</TD>

    #1の方法だとページ内の全てのセル(<TD>)に設定することになります。

    スタイルシート(CSS)はこれら以外にも
    いろいろな設定方法があります。

    Qリストの左余白の削除方法

    <li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
    どなたかご教授頂けませんでしょうか?

    =>CSS記述<=
    ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;}

    =>HTML記述<=
    <ul>
    <li><a href="#">サンプル</a></li>
    <li><a href="#">サンプル</a></li>
    <li><a href="#">サンプル</a></li>
    <li><a href="#">サンプル</a></li>
    </ul>

    Aベストアンサー

    ul li {

    の箇所を

    ul {

    にするだけ

    Qテーブルセル余白(例えば左側だけ、上側だけ、など)

    こんにちは。
    宜しくお願いいたします。

    テーブル内のコードに、cellpadding="5" は
    セル余白が上下左右のすべて、5ピクセル空きますが、

    左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
    指定方向のみ、余白を作ることは可能でしょうか。

    その場合のHTML記述を教えてください。

    また、ここで質問させていただいている「指定方向への余白指定」と
    全体余白指定の「cellpadding="XX"」は同時に使って
    良いものでしょうか。
    素人質問ですみません。
    宜しくお願いいたします。

    Aベストアンサー

    1つのセルだけなら、下記で。
    <td style="padding: 5px 10px 20px 30px;">
    上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
    適当に数値変更してください。
    cellpadding="5" と style="padding: 5px;"は同じになるはず。
    <td style="padding: 5px;">

    両方使うとどうなるかは、試して下さい。
    cellpadding をここ数年利用していないので・・・

    複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
    <style type="text/css">
    <!--
    td {padding: 5px 10px 20px 30px;}
    -->
    </style>

    Qulタグやliタグの中でbrタグは使えない?

    完成したサイトなのですが…。
    Dreamweaverにて開いて一応チェックすると、
    「タグbrはur内では使用できません」との表示がでて驚いています。

    <li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
    だから、

    <ul style="padding-left: 00px;">
    <li>~</li></br>
    <li>~</li></br>
    </ul>

    のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
    どうか、ご存知の方いましたら教えてください。

    Aベストアンサー

    SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
    →10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

    <!ELEMENT UL - - (LI)+ -- unordered list -->
    ulには、「li要素のみを一個以上もつ。」と書かれています。


    <!ELEMENT LI - O (%flow;)* -- list item -->
    li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

    読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

    したがって
    <ul>
     <li>・・・<br>
     <li>・・・<br>
    </ul>
    とは書けます。(HTMLの場合)
    その場合、ブラウザは
    <ul>
     <li>・・・<br></li>
     <li>・・・<br></li>
    </ul>
    と解釈します。(XHTMLはこう書かないとならない)

    ★もっと、はるかに大事なこと
    「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
     構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
     2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

    スタイルシートで、
    ul li{margin-bottom:1em;}
    だけでよい。

    SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
    →10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

    <!ELEMENT UL - - (LI)+ -- unordered list -->
    ulには、「li要素のみを一個以上もつ。」と書かれています。


    <!ELEMENT LI - O (%flow;)* -- list item -->
    li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

    読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

    QCSSでborderの長さを指定、または可変にしたい。

    下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

    文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

    h3{
    border-width : 0px 0px 1px 5px;
    border-style : solid ;
    border-color : #FF3333;
    padding-left : 5px;
    }

    Aベストアンサー

    borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
    h3{
    width:???px;
    border-width : 0px 0px 1px 5px;
    border-style : solid ;
    border-color : #FF3333;
    padding-left : 5px;
    }

    また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

    HTMLの方も修正する方法でもよければ

    <h3><span>××○○</span></h3>
    のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

    h3 span{
    border-width : 0px 0px 1px 5px;
    border-style : solid ;
    border-color : #FF3333;
    padding-left : 5px;
    }

    borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
    h3{
    width:???px;
    border-width : 0px 0px 1px 5px;
    border-style : solid ;
    border-color : #FF3333;
    padding-left : 5px;
    }

    また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

    HTMLの方も修正する方法でもよけ...続きを読む

    Qhtmlの
      タグで、数字などを太字にすることはできますか?

    仕事でそのような注文を受けたのですが、方法を知りません。調べてみても見当たらず。

    <ol>タグはあきらめて、全体を表組みに直すしかないのでしょうか? 何ページにも渡る大きなリストで何階層もあるため大変な作業になりそうで厄介です。なんとかなるとよいのですが。アドバイスください。お願いします。

    Aベストアンサー

    ちょっと面倒かも知れませんが。

    頭の数字だけ、ボールドになって、内容はノーマルになります。


    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    ol { font-weight: bold; }
    .lic { font-weight: normal; }
    -->
    </style>
    </head>
    <body>
    <ol>
    <li><font class="lic">項目</font></li>
    <li><font class="lic">項目</font></li>
    <li><font class="lic">項目</font></li>
    <li><font class="lic">項目</font></li>
    </ol>
    </body>
    </html>

    QHTMLフォームのSELECTの幅を一定にするためには?

    HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
    いいのでしょうか?

    CSS等で設定できるとありがたいのですが、やり方がわかりません。

    Aベストアンサー

    <select style="width: 200px">

    Qpタグによる段落間のアキ調整について

    こんにちは。
    HTMLのpタグでくくった段落が連続すると、
    多くのブラウザでは段落間に1行程度のアキが生じると思います。

    このアキをCSSによってなくしたいのですが
    どう指定すればいいのでしょうか?

    たとえば段落の「margin-bottom」に0ではなく
    マイナス値を入れればなくせるようですが、
    「pによる1行アキ」というのがすべてのブラウザでの
    共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

    どういうやり方がすべてのブラウザに通用する
    正しいやり方なのでしょうか?

    Aベストアンサー

    > > まあ、0などにすれば空きは見えなくはなりますが…
    > え? できますか?
     できますよ。
    ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
    下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

    margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

    このようにして略記した場合は、四辺を一度に指定することが出来、
    しらべてみたところ、Operaでは
    margin:0; ← 上下左右0に指定
    margin:0 1px; ← 上下0, 左右1pxに指定
    margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
    margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
     という風になっているようです。
    まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;


    人気Q&Aランキング