コニファ・ロゴ

csstest:CSS contentプロパティのcounterを使い、cssのみで自動連番(1)

Q&Aなど、連番を付けて表示するコンテンツを後から更新する場合、削除や追加があると、番号付けの調整で苦労します。そんなとき、contentプロパティのcounter()関数を使うと、javascriptの手を借りずにCSSのみで、簡単に自動連番を実装できます。 サンプルは、下側の「Q&Aのカテゴリー01」と「Q&Aのカテゴリー02」の部分。いずれも「Q」と「A」の後ろに連番を自動で入れています。

実装の仕方: ●カウンター名を決め(例では、「question」と「answer」)、「Q&Aの…」のh3で「counter-reset: question;」として、カウンターを初期化(「answer」についても同様)。●定義リストのdtで「counter-increment: question;」として、「question」をインクリメント。同様にddでも「counter-increment: answer;」とします。●連番の記述は、「.cont02 dt: before」を使って、dtの前に、「content: "Q" counter(question) ". ";」の形式で。同じく「.cont02 dd: before」で「content: "A" counter(answer) ". ";」としています。

サンプルのCSSソース

h3.reset {	
  counter-reset: question; 
  counter-reset: answer;
  }
.cont02 dt {
  margin: 0;
  padding: 4px 8px;
  color: #6666cc;
  border-top:2px dotted #99ccff;
  border-bottom:2px dotted #99ccff;
  font-size: 15px;
  counter-increment: question;	
  }
.cont02 dt:before {
  font-weight:bold;
  color:blue;
  content: "Q" counter(question) ". ";	
  }
.cont02 dd {
  margin: 0;
  padding: 4px 8px;
  color: #aa6699;
  font-size: 15px;
  counter-increment: answer;
  }
.cont02 dd:before {
  font-weight:bold;
  color:#f11e98;
  content: "A" counter(answer) ". ";
  }

Q&Aのカテゴリー01

[ダミーテキスト]質問の内容テキストテキスト質問の内容テキストテキスト質問の内容テキストテキスト質問の内容テキストテキスト質問の内容テキストテキスト
[ダミーテキスト]回答の内容テキスト回答の内容テキスト回答の内容テキスト回答の内容テキスト回答の内容テキスト回答の内容テキスト

[ダミーテキスト]質問の内容テキスト質問の内容質問の内容テキスト質問の内容質問の内容テキスト質問の内容質問の内容テキスト質問の内容テキスト質問の内容テキスト
[ダミーテキスト]回答の内容回答の内容テキスト回答の内容テキスト回答の内容回答の内容テキスト回答の内容テキスト回答の内容テキスト

Q&Aのカテゴリー02

[ダミーテキスト]質問の内容テキスト質問の内容テキスト質問の内容テキスト
[ダミーテキスト]回答の内容テキスト回答の内容テキスト回答の内容テキスト

[ダミーテキスト]質問の内容テキスト質問の内容質問の内容テキスト質問の内容質問の内容テキスト質問の内容質問の内容テキスト質問の内容テキスト質問の内容テキスト
[ダミーテキスト]回答の内容回答の内容テキスト回答の内容テキスト回答の内容回答の内容テキスト回答の内容テキスト回答の内容テキスト

[ダミーテキスト]質問の内容テキスト質問の内容テキスト質問の内容テキスト
[ダミーテキスト]回答の内容テキスト回答の内容テキスト回答の内容テキスト

 

 

戻るボタン