web-dev-qa-db-ja.com

CSSを使用してリストアイテムの箇条書きをカスタマイズする

<li>要素のbulletのサイズを変更することは可能ですか？

以下のコードを見てください：

li {
    list-style: square; // I want to change the size of this squared bullet. 
}

私はそれを達成する方法を見つけることができないようです。

csssizehtml-listslistitem
30
Alex

弾丸のサイズを変えるということですか？これはliタグのフォントサイズに関係していると思います。したがって、LIのfont-sizeを大きくしてから、内部に含まれる要素のfont-sizeを小さくすることができます。余分なマークアップを追加するのはちょっと残念ですが、次のようなものです：

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

または、リストの箇条書き用の画像ファイルを指定することもできます。これは、必要なだけ大きくすることができます。

ul{
  list-style: square url("38specialPlusP.gif");
 }

参照： http://www.w3schools.com/css/css_list.asp

37
adc

liの内容を、spanなどの別の要素でラップできます。次に、liに大きなfont-size、および通常のfont-sizespanに戻る：

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>
19
thirtydot

@ dzimney answer に基づいており、 @ Crisman answer と似ていますが、異なる：

その答えは良いですが、インデントの問題があります（箇条書きはliスコープの内側に表示されます）。おそらくこれは必要ありません。以下の簡単な例のリストを参照してください（これはデフォルトのHTMLリストです）：

  • Lorem ipsum dolor sit amet、ei cum offendit partiendo iudicabit。 mei quaestio honestatisで、デュオディシットアファートペルセクティEI。 Etiam nusquam cu his、nec alterum posidonium philosophia te。 Purto iudicabit、Vix quod clita expetendisなし。

  • Queo suscipiantur no eos、sed impedit explicari ea、falli inermis comprehensam est in。Vide dicunt ancillae cum te、habeo delenit deserunt mei in。Tale sint ex his、ipsum essent appellantur et cum。

ただし、上記の回答を使用すると、リストは次のようになります（箇条書きのサイズは無視されます）。

•Lorem ipsum dolor sit amet、ei cum offendit partiendo iudicabit。 mei quaestio honestatisで、デュオディシットアファートペルセクティEI。 Etiam nusquam cu his、nec alterum posidonium philosophia te。 Purto iudicabit、Vix quod clita expetendisなし。

•Quos suscipiantur no eos、sed impedit explicari ea、falli inermis comprehensam est in。Vide dicunt ancillae cum te、habeo delenit deserunt mei in。Tale sint ex his、ipsum essent appellantur et cum。

したがって、問題を解決するこのアプローチをお勧めします。

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}
<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>
19
Mir-Ismaili

IEサポートが必要なレベルに応じて、コンテンツプロパティとして設定された箇条書きスタイルで：beforeセレクターを使用することもできます。

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

必要な箇条書きスタイルの HTML ASCII を検索し、CSS Hex値に converter を使用する必要がある場合があります。

11
dzimney

弾丸のサイズを変更する別の方法は次のとおりです。

  1. 箇条書きを完全に無効にする
  2. ::before疑似要素の助けを借りて、カスタムの箇条書きを再追加します。

例：

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}
<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

マークアップの変更は不要

3
Alexander Lomia

各リスト項目の先頭にある箇条書きのサイズを意味すると思います。その場合は、代わりに画像を使用できます。

list-style-image:url('bigger.gif');
list-style-type:none;

li要素の実際のサイズを意味する場合は、widthおよびheightを使用して通常どおりに変更できます。

2
James Allardice
<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>
0
MattF

<li>コンテンツを<span>またはその他のタグでラップすると、<li>のフォントサイズを変更できます。これにより、箇条書きのサイズが変更され、 <li>を元のサイズに。 em単位を使用して、<li>箇条書きのサイズを比例的に変更できます。

例えば：

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

それからCSS：

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

より複雑な例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

結果：

Result of markup

0
Havok

弾丸自体の実際のサイズまたは形式を変更するには、画像を使用する必要があります。

コンテンツをナッジするために適切なパディングで背景画像を使用して、重ならないようにすることができます。

list-style-image:url(bigger.gif);

または

background-image: url(images/bullet.gif);
0
Dan

<li>sのコンテンツを<span>sでラップしたくない場合は、次のように:beforeを使用することもできます。

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

:beforeのフォントサイズを自由に調整します。

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>
0
Crisman