Linlinメディア｜ホームページ制作のためのメディア

【CSS】counter-reset ：要素の連番(カウンタ)の値をリセットする

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】counter-resetの使用方法

<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

<h3>ランキング</h3>
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位　";
}
h3 {counter-reset:sample;}

【CSS】counter-reset ：要素の連番(カウンタ)の値をリセットする

　CSSのcounter-resetは、要素の連番（カウンタ）をリセットするプロパティです。
　counter-resetプロパティを使用した要素が現われる毎にカウンタの値が0にリセットされます。カウンタ名の後に半角スペースで区切り整数値を指定すると、カウンタの値がその数にリセットされます。

counter-increment CSS

【CSS】counter-increment ：要素の連番(カウンタ)の値を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】counter-incrementの使用方法

<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

<h3>ランキング</h3>
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位　";
}
h3 {counter-reset:sample;}

【CSS】counter-increment ：要素の連番(カウンタ)の値を指定する

　CSSのcounter-incrementは、要素の連番（カウンタ）を進めるプロパティです。
　counter-incrementプロパティを使用しカウンタ名を指定した場合、要素が現われる毎にカウンタ値が進みます。負の値を指定してカウンタを戻すことは可能です。

CSS quotes

【CSS】quotes：引用符を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】quotesの使用方法

See the Pen
quotes by linlin (@linlin098765)
on CodePen.

<q>ウイリアム・クラークは<q>少年よ大志を抱け</q>と言った</q>。

q {quotes: "「" "」" "『" "』"; }
q:before {content: open-quote; }
q:after {content: close-quote; }

【CSS】quotes：引用符を指定する

　CSSのquotesは、contentプロパティで挿入する引用符を設定するプロパティです。quotes（引用符）を複数指定すると階層に応じた引用符を指定することが可能です。

content CSS

【CSS】content：コンテンツを挿入する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】contentの使用方法

See the Pen
content by linlin (@linlin098765)
on CodePen.

<p class="sample1">先頭にテキストを挿入</p>
<p class="sample2">末尾に画像を挿入</p>

p.sample1:before {content: "'例'：" }
p.sample2:after {content: url("https://www.llc-linlin.com/picture/SEO.jpg") }

【CSS】content：コンテンツを挿入する

　CSSのcontentは、要素の直前または直後にコンテンツ（テキストまたは画像）を挿入するプロパティです。contentプロパティを適用できるのは、擬似要素の:beforeと:afterのみです。

テキスト
文字列の挿入
画像等のファイル
URLでファイルを指定して挿入
attr()
()内に属性を指定しcontentプロパティとして追加
open-quote,close-quote
quoteプロパティで指定した引用符を挿入。open-quoteが開始引用符、close-quoteだと終了引用符が挿入
no-open-quote,no-close-quote
引用符は表示されない。quotesプロパティで指定した引用符の深さが一階階前後する。no-open-quoteを指定すると一階階深くなり、no-close-quoteを指定すると一階階浅くなる。

CSS list-style-position

【CSS】list-style-position：リストのマーカー表示位置を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】list-style-positionの使用方法

See the Pen
list-style by linlin (@linlin098765)
on CodePen.

<ul style="list-style: square url('https://www.llc-linlin.com/picture/SEO.jpg') inside">
<li>例</li>
</ul>

<ul style="list-style-image: url('https://www.llc-linlin.com/picture/SEO.jpg')">
<li>例</li>
</ul>

<ul style="list-style-position: outside">
<li>例</li>
</ul>

<ul style="list-style-position: inside">
<li>例</li>
</ul>

【CSS】list-style-position：リストのマーカー表示位置を指定する

　CSSのlist-style-positionはリストの先頭に表示されるマーカーの表示位置を指定するプロパティです。

CSS list-style-type

【CSS】list-style-type：リストのマーカー文字を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】list-style-typeの使用方法

See the Pen
list-style-type by linlin (@linlin098765)
on CodePen.

<ul style="list-style-type: disc">
<li>例</li>
</ul>

<ul style="list-style-type: circle">
<li>例</li>
</ul>

<ol style="list-style-type: lower-roman">
<li>例</li>
</ol>

<ol style="list-style-type: upper-roman">
<li>例</li>
</ol>

<ol style="list-style-type: cjk-ideographic">
<li>例</li>
</ol>

<ol style="list-style-type: hiragana">
<li>例</li>
</ol>

【CSS】list-style-type：リストのマーカー文字を指定する

　CSSのlist-style-typeはリストの先頭に表示されるマーカー文字を指定するプロパティです。

CSS list-style-image

【CSS】list-style-image：リストのマーカー画像を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】list-style-imageの使用方法

See the Pen
list-style by linlin (@linlin098765)
on CodePen.

<ul style="list-style: square url('https://www.llc-linlin.com/picture/SEO.jpg') inside">
<li>例</li>
</ul>

<ul style="list-style-image: url('https://www.llc-linlin.com/picture/SEO.jpg')">
<li>例</li>
</ul>

<ul style="list-style-position: outside">
<li>例</li>
</ul>

<ul style="list-style-position: inside">
<li>例</li>
</ul>

【CSS】list-style-image：リストのマーカー画像を指定する

　CSSのlist-style-imageはリストの先頭に表示されるマーカー画像を指定するプロパティです。

CSS list-style

【CSS】list-style：リストのマーカーの表示方法を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】list-styleの使用方法

See the Pen
list-style by linlin (@linlin098765)
on CodePen.

<ul style="list-style: square url('https://www.llc-linlin.com/picture/SEO.jpg') inside">
<li>例</li>
</ul>

<ul style="list-style-image: url('https://www.llc-linlin.com/picture/SEO.jpg')">
<li>例</li>
</ul>

<ul style="list-style-position: outside">
<li>例</li>
</ul>

<ul style="list-style-position: inside">
<li>例</li>
</ul>

【CSS】list-style：リストのマーカーの表示方法を指定する

　CSSのlist-styleはリストの先頭に表示されるマーカーの表示方法に関する指定を行うプロパティです。
　list-style-type,list-style-image,list-style-positionの順で半角スペースで空けて指定します。

CSS empty-cells

【CSS】empty-cells：テーブル(表)の空白セルの表示方法を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】empty-cellsの使用方法

See the Pen
empty-cells by linlin (@linlin098765)
on CodePen.

<table class="sample">
<tr><td class="sample"></td><td class="sample">１</td></tr>
<tr><td class="sample">２</td><td class="sample"></td></tr>
</table>

table.sample {
border: solid 1px black;
border-collapse: separate;
}
td.sample {border: solid 1px red; empty-cells: show;}

【CSS】empty-cells：テーブル(表)の空白セルの表示方法を指定する

　CSSのempty-cellsはテーブル（表）の空白セルの表示方法を指定するプロパティです。空白セルとはテキスト・画像が入っていない又はhidden等により非表示となっているものを指します。

show
空白セル場合でもボーダーを表示
hide
空白セル場合はボーダーを表示しない

border-spacing CSS

【CSS】border-spacing：テーブル(表)のセルのボーダー間隔を指定する

投稿者作成者: Linlin
投稿日 2020年3月1日

（例）【CSS】border-spacingの使用方法

See the Pen
border-spacing by linlin (@linlin098765)
on CodePen.

<table class="sample">
<tr><td class="sample">１</td><td class="sample">２</td></tr>
<tr><td class="sample">３</td><td class="sample">４</td></tr>
</table>

table.sample {
border: solid 1px black;
border-collapse: separate;
border-spacing: 10px 100px;
}
td.sample {border: solid 1px red;}

【CSS】border-spacing：テーブル(表)のセルのボーダー間隔を指定する

　CSSのborder-spacingは、テーブル（表）のセルのボーダー間隔を指定するプロパティです。border-spacingプロパティは、border-collapse:separateの時のみ有効です。

値１つ指定
上下左右
値２つ指定
上下と左右