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

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

A 回答 (2件)

他に1台あるパソコンのブラウザも最新版に近いので、試す環境がないのですが…


こちらに対応ブラウザ・バージョンがずらっと並んでいるので、
list-style-image は、結構使えるように思います。
(参考URLとおなじものです)

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

参考URL:http://www.htmq.com/style/list-style-image.shtml
    • good
    • 0
この回答へのお礼

対応ブラウザ表URL、誠にありがとうございました!
とても役に立ちます

お礼日時:2012/02/27 14:43

windows vistaで、google Chrome、IE、Firefoxのうち、


google Chromeだけなら、これでできました。

<ul style="list-style-type:disc;">
<li style="font-size:xx-large;"><span style="font-size:medium;">リストの中身</span></li>
</ul>

IE、Firefoxでは変わらなかったので、画像を用意して使うしかないかもしれません。
画像はこのように指定します。

<ul style="list-style-image: url('画像へのパス');">
<li>リストの中身</li>
</ul>

この回答への補足

IE8とFirefox8で黒丸(disc)を比較すると、Firefoxでは若干黒丸と文字との隙間が広い感じしてこれでも直したいのですが、IE8ですと隙間がさらに広く辟易しております。
隙間の調整はどのようにしたらできるでしょうか。

補足日時:2012/02/27 13:38
    • good
    • 1
この回答へのお礼

ありがとうございます。
せっかくChromeで表示できる方策を試していただいたのですが、おっしゃる通りで、なるvべくクロスプラットフォームで表示させねばいけないのです。
ただ、list-style-imaageに画像を指定する方策でも、今回のChromeだけなど、ブラウザによって表示されないことはないでしょうか?
古いバージョンは無視すればいいですが、モダンブラウザは対応しないといけないです。
せめてIE7以降、Firefox3以降など。

お礼日時:2012/02/27 13:11

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

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

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

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

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

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の方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの数字のフォントサイズを変えたい

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

Aベストアンサー

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

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

のように記述すると元のサイズの 80% になります。

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
  • (リスト)をサイズ指定し、絶対値にすることは可能でしょうか
  • ツリーを作るときに<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 要素また...続きを読む

    Qテーブルタグの中にdivを含めてはダメ?

    テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
    何か不都合でもあるのでしょうか?
    何かご存知の方がいれば教えていただけませんか?

    Aベストアンサー

    以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

    tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
    特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
    tr直下にはth,tdが書けることになっています(それ以外は不可)。

    th,tdの下にはブロック要素が書けるので、divも書けます。

    このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

    Qtableにul,または,olを入れられますか?

    <table>
     <tbody>
      <th>くだもの</th>
       <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
       …etcとして
    くだもの
    ・りんご
    ・みかん
    ・すいか
    としたいのですが、
    <table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
    HTMLの仕様に反していますでしょうか?

    Aベストアンサー

    きちんとネストされていれば構いません。
    ただ、書かれた例だと
    ・テーブルを構成する<THEAD>, <TR>タグが無い
    ・<UL>が閉じていない
    というエラーがあるので、それを直せばいいでしょう。

    <table>
     <thead>
      <tr><th>くだもの</th></tr>
     </thead>
     <tbody>
       <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
       :
       :
     </tbody>
    </table>

    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>

    Qカルーセルスライダー「slick.js」のカスタマイズ

    jQuery「slick.js」にて下記のようにカスタマイズをしたいのですが
    調べても答えがなかったので質問させてください。

    1、基本は添付画像の形で1枚の画像をスライドさせていきたいのですが両脇にある矢印(次へと戻る)は通常表示させたくありません。
    マウスオンした場合に表示させるようにしたいのですがどのようにすればよろしいでしょうか?

    動きとしては
    http://flexslider.woothemes.com/
    が理想です。
    ※上記サイトの場合は画像をマウスのドラッグで動かせないので今回は見送りました。


    2、たぶん初歩的な質問かもしれませんが矢印とドット部分を独自でデザインする場合はどこをいじればいいででしょうか?
    ※slickのデフォルトの場合はwebフォントのようでどこをいじればいいのかがわかりません。

    よろしくお願い致します。

    Aベストアンサー

    slick.jsのサイト見たところ、slick-theme.cssをいじればすべてできそうです。
    前へボタンは .slick-prev
    次へボタンは .slick-next
    下のドット状のページャーは .slick-dots 以下
    なので該当のクラスのCSSを良いように変更すればできます。

    質問の1は
    .slick-slider .slick-prev ,.slick-slider .slick-next{
    opacity:0;
    cursor: default;
    }
    .slick-slider:hover .slick-prev ,.slick-slider:hover .slick-next{
    opacity:1;
    cursor: pointer;
    }
    というふうな感じで書けば良いのかなと思います。

    質問2はちょっとここで細かくは説明するには無理があります。
    難しいとかでなく、デザインのCSSどうするかはご自分で頑張ってもらうしかないので。slick-theme.cssをすべて見て修正してください。

    あと、質問の文章から思ったのですが、質問者様はコーディングの環境整っていますか?

    FirefoxとFirebugがあれば、プラグインが書き足した全体のソースが見れるので、
    普通に自分で作ったHTMLと同じように、CSSでどうデザインするかなどわかってくると思います。

    がんばってください。

    slick.jsのサイト見たところ、slick-theme.cssをいじればすべてできそうです。
    前へボタンは .slick-prev
    次へボタンは .slick-next
    下のドット状のページャーは .slick-dots 以下
    なので該当のクラスのCSSを良いように変更すればできます。

    質問の1は
    .slick-slider .slick-prev ,.slick-slider .slick-next{
    opacity:0;
    cursor: default;
    }
    .slick-slider:hover .slick-prev ,.slick-slider:hover .slick-next{
    opacity:1;
    cursor: pointer;
    }
    というふうな感じで書けば良いのかなと思います。

    質問...続きを読む

    Qliタグの中に

    タグやら

    を入れるのはあり?

    それともなしでしょうか?
    たとえば、作品実績みたいなのを羅列するとき

    「画像」
    「タイトル」
    「簡単な説明」

    を乗せたいときはどうしますか?
    <ul>
    <li>
    <p>画像</p>
    <dl>
    <dt>タイトル</dt>
    <dd>説明</dd>
    </dl>
    </li>
    </ul>

    こんな感じを考えたのですが・・・
    <li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。

    <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか?


    </ul>

    Aベストアンサー

    #1 ORUKA1951です。
    #1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
    まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
    ★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
    ★携帯端末では縦に並びます。
     ディスプレイの幅が狭いときもtableのように、はみ出ません

     このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
    OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
    DL definition list 定義リストでも良いかな?
    ・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
    しかし、「(作品)ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
    だとすると、
    【注意】
     ★分かりやすくするため全角スペースでインデントされています。
      利用するときはタブに変換すること
     ★これは、私のページ一部を抜粋したもの。画像は200px×150px
     ★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
     ★セレクタの使い方は調べること。
     ★これはolですがulでもよい。
     ★本来は、
     <div id="photoList">
      <ol>
       <li>本体
        <ul>
         <li><img src="./photo/R0011583.jpg" width="200" height="150"
            alt="ディスプレイを開く"></li>
         <li>本体を正面から撮影したところ、パネルの下がカバー</li>
        </ul>
       </li>
    とマークアップしたほうがスマートでしょう。


    ______________サンプルソース。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ja">
    <head>
     <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     <title>ディスプレイの分解:ノートパソコンの分解</title>
     <meta http-equiv="Content-Style-Type" content="text/css">
     <style>
    <!--
      @media screen{
       div#photoList{
        display: block;
        border: solid green 1px;
        margin: 1em 10% 1em 10%;
        background-color: rgb(200,200,200);
        padding:0px;
       }
       div#photoList > ol{
        margin: 0px;
        padding: 0px;
       }
       div#photoList > ol>li{
        display:block;
        width: 210px;
        float:left;
        border-style: solid;
        border-color: black gray gray black;
        border-width: 1px 4px 4px 1px;
        padding: 5px;
        height: 240px;
        margin: 5px;
        background-color: white;
       }
       div#photoList > ol>li dl{
        margin:0px;
       }
       div#photoList > ol>li dl dt{
        padding: 5px 10px;
       }
       div#photoList > ol>li dl>dd{
        margin-left: 0px;
        text-align: center;
       }
       div#photoList > ol>li dl dd+dd{
        margin-left: 0px;
        text-indent: 1em;
        font-size: 0.8em;
        line-height: 1.5em;
        text-align: left;
       }
       div#photoList > hr{
        clear: both;
        margin: 0px;
        visibility: hidden;
       }
      }
    -->
     </style>
    </head>
    <body>
     <h1>ノートパソコンの分解</h1>
     <h2>ディスプレイの分解</h2>
     <div id="photoList">
      <ol>
       <li>
        <dl>
         <dt>本体</dt>
         <dd><img src="./photo/R0011583.jpg" width="200" height="150"
             alt="ディスプレイを開く"></dd>
         <dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>ビスの位置</dt>
         <dd><img src="./photo/R0011587.jpg" width="200" height="150"
             alt="カバーを外す"></dd>
         <dd>電源スイッチカバーを外すとビスがでてくる。</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>パネルを開く</dt>
         <dd><img src="./photo/R0011590.jpg" width="200" height="150
             alt="パネルを180度開く"></dd>
         <dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>パネルを裏返しに</dt>
         <dd><img src="./photo/R0011597.jpg" width="200" height="150"
             alt="パネルを1裏返す"></dd>
         <dd>取り外したパネルを裏返しにする。</dd>
        </dl>
       </li>
      </ol>
      <hr>
     </div>
    </body>
    </html>

    #1 ORUKA1951です。
    #1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
    まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
    ★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
    ★携帯端末では縦に並びます。
     ディスプレイの幅が狭いときもtableのように、はみ出ません

     このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います...続きを読む


    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング

    おすすめ情報