文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 吹き出しのデザイン > 順位付けの箇条書き

順位付けの箇条書きのCSS生成

ランキングリストをCSSのみで作成することができます。

当ページでは、簡単な操作でランクの背景の形や色を指定し、CSSを自動で作成できます。

順位付けの箇条書きを作ろう

上位ランクのマーク
上位ランクの数(最大6位まで)
上位ランクのマークの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
下位ランクのマーク
下位ランクのマークの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
  1. ランクスタイル1
  2. ランクスタイル2
  3. ランクスタイル3
  4. ランクスタイル4
  5. ランクスタイル5
  6. ランクスタイル6
使用したhtml
<ol class="Rankstyle-svg">
  <li>ランクスタイル1</li>
  <li>ランクスタイル2</li>
  <li>ランクスタイル3</li>
  <li>ランクスタイル4</li>
  <li>ランクスタイル5</li>
  <li>ランクスタイル6</li>
</ol>
生成したCSS
.Rankstyle-svg{
  counter-reset:ctr-ranking;
  text-align:left;
  font-size: 18px;
  margin-left:20px;
}
.Rankstyle-svg li{
  position: relative;
  line-height: 2;
}
ページTOP
広告
広告

色々な順位付けの箇条書き

ランクのマークをSVGを使用せずに描く

border や、background を使用してマークが描けます。

  1. ランクスタイル1
  2. ランクスタイル2
  3. ランクスタイル3
<style type="text/css">
.Rankstyle {
  counter-reset:ctr-ranking;           /* カウンターをリセット */
  text-align:left;                     /* 左寄せ */
  font-size: 18px;                     /* フォントサイズ */
  margin-left:20px;                    /* 左の余白高さ */
}
.Rankstyle li  {
  position   : relative;               /* 指定した分だけ相対的に移動 */
  line-height: 2;                      /* 行の高さ */
}
.Rankstyle li:nth-child(1):before {
  position: absolute;                  /* 親要素を基準 */
  top: 0;                              /* 上限より表示 */
  left: -35px;                         /* 箇条書きリストの左側に表示 */
  content:"";                          /* content 追加 */
  width: 0;                            /* 幅ゼロ */
  height: 0;                           /* 高さゼロ */
  border-left: 15px solid transparent;  /* 以下3行の */
  border-right: 15px solid transparent; /* borderの指定で */
  border-bottom: 30px solid #7f7f00;   /* 三角形を作成 */
}
.Rankstyle li:nth-child(1):after {
  position: absolute;                  /* 親要素を基準 */
  top: 0;                              /* 上限より表示 */
  left: -35px;                         /* 箇条書きリストの左側に表示 */
  content: counter(ctr-ranking, decimal); /* カウンタ追加 */
  counter-increment: ctr-ranking; /* カウンタの増分指定 */
  color: #000;                         /* 文字の色の指定 */
  font-size: 11px;                     /* 文字サイズの指定 */
  padding: 1px 0px;                    /* 余白の指定 */
  line-height: 0.6;                    /* 文字の表示位置調整 */
  width: 0;                            /* 幅ゼロ */
  height: 0;                           /* 高さゼロ */
  border: 15px solid #7f7f00;          /* 以下2行のbordeの指定で */
  border-top: 15px solid transparent;  /* 山型を作成 */
}
.Rankstyle li:nth-child(2):before {
  position: absolute;                  /* 親要素を基準 */
  top: 0;                              /* 上限より表示 */
  left: -35px;                         /* 箇条書きリストの左側に表示 */
  background: #7f4600;                 /* マークの色 */
  content: counter(ctr-ranking, decimal); /* カウンタ追加 */
  counter-increment: ctr-ranking;      /* カウンタの増分指定 */
  color: #000;                         /* 文字の色の指定 */
  font-size: 10px;                     /* 文字サイズの指定 */
  padding: 5px 10px;                   /* 余白の指定 */
  border-radius: 50%;                  /* 角丸を指定 */
}
.Rankstyle li:nth-child(3):before {
  position: absolute;                  /* 親要素を基準 */
  top: 0;                              /* 上限より表示 */
  left: -35px;                         /* 箇条書きリストの左側に表示 */
  background: #999999;                 /* マークの色 */
  content: counter(ctr-ranking, decimal); /* カウンタ追加 */
  counter-increment: ctr-ranking;      /* カウンタの増分指定 */
  color: #000;                         /* 文字の色の指定 */
  font-size: 10px;                     /* 文字サイズの指定 */
  padding: 5px 10px;                   /* 余白の指定 */
}
</style>
ページTOP

注意事項

・ランクのマークを<svg>で描く場合、< , / などの記号は文字化けするためエスケープした文字での指定が必要です。

・ランクのマークをborderで描く場合、border上に文字の指定が出来ないため、文字を中央には指定できません。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン