カテゴリー: CSS

カテゴリー
CSS list-style-type

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

（例）【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：リストのマーカー画像を指定する

（例）【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：リストのマーカーの表示方法を指定する

（例）【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：テーブル(表)の空白セルの表示方法を指定する

（例）【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：テーブル(表)のセルのボーダー間隔を指定する

（例）【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の時のみ有効です。

  • 値１つ指定
    上下左右
  • 値２つ指定
    上下と左右
カテゴリー
border-collapse CSS

【CSS】border-collapse：テーブル(表)の隣接セルのボーダー表示方法を指定

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

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

<table class="sample1">
<tr><td class="sample">１</td><td class="sample">２</td></tr>
<tr><td class="sample">３</td><td class="sample">４</td></tr>
</table>
<br> 
<table class="sample2">
<tr><td class="sample">１</td><td class="sample">２</td></tr>
<tr><td class="sample">３</td><td class="sample">４</td></tr>
</table>
table.sample1 {border: solid 1px #000000; border-collapse: collapse;}
table.sample2 {border: solid 1px #000000; border-collapse: separate;}
td.sample {border: solid 1px #ff0000}

【CSS】border-collapse：テーブル(表)の隣接セルのボーダー表示方法を指定

　CSSのborder-collapseは、テーブル（表）の隣接セルのボーダー表示方法を指定するプロパティです。

  • collapse
    隣接セルのボーダーを重ねて表示（初期値）
  • separate
    隣接セルのボーダーを間隔あれて表示
カテゴリー
caption-side CSS

【CSS】caption-side：テーブル(表)のキャプション位置を指定する

（例）【CSS】caption-sideの使用方法

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

<table border="1">
<caption>ｽﾀﾝﾘｰ・ｷｭｰﾌﾞﾘｯｸの作品</caption>
<tr><td>１９５７年</td><td>突撃</td></tr>
</table>
caption {
color:red;
caption-side: left;
}

【CSS】caption-side：テーブル(表)のキャプション位置を指定する

　CSSのcaption-sideは、テーブル（表）のキャプション位置を指定するプロパティです。

  • top
    キャプションをテーブル（表）の上に表示（初期値）
  • left
  • キャプションをテーブル（表）の左に表示
  • bottom
    キャプションをテーブル（表）の下に表示
  • right
    キャプションをテーブル（表）の右に表示
カテゴリー
CSS table-layout

【CSS】table-layout：テーブルの表示方法を指定する

（例）【CSS】table-layoutの使用方法

See the Pen
table-layout by linlin (@linlin098765)
on CodePen. 

<p>table-layout: auto;</p>
<table border="1" width="100%" style="table-layout: auto;">
<tr>
<th><font color="#FFFFFF">メニュー</font></th>
<th><font color="#FFFFFF">詳細</font></th>
<th><font color="#FFFFFF">備考</font></th>
</tr>
<tr>
<td bgcolor="red">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味スパゲティ</td>
<td bgcolor="#FFFFFF">日本独自の料理</td>
</tr>
</table>

<p>table-layout: fixed;</p>
<table border="1" width="100%" style="table-layout: fixed;">
<tr>
<th><font color="#FFFFFF">メニュー</font></th>
<th><font color="#FFFFFF">詳細</font></th>
<th><font color="#FFFFFF">備考</font></th>
</tr>
<tr>
<td bgcolor="red">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味スパゲティ</td>
<td bgcolor="#FFFFFF">日本独自の料理</td>
</tr>
</table>
th{
  background-color:gray;
}

【CSS】table-layout：テーブルの表示方法を指定する

　CSSのtable-layoutは、テーブル（表）の表示方法（列幅）を指定するプロパティです。行の高さは自動的に整えられます。

　table-layout:autoはテーブル（表）の列幅を自動的に整えるため読み込み速度が若干遅くなります。table-layout:fixedは列幅固定のため読み込み速度は速くなるメリットがあります。

　table-layout:fixedにて列幅を指定しない場合は、列幅を指定していない列は自動的に列幅を割り振られます。

  • auto
    テーブル（表）の列幅を自動的に整える（初期値）
  • fixed
    テーブル（表）の列幅を固定する
カテゴリー
CSS unicode-bidi

【CSS】unicode-bidi：Unicodeの文字表記を指定する

【CSS】unicode-bidiの使用方法

See the Pen
unicode-bidi by linlin (@linlin098765)
on CodePen. 

<p style="direction: ltr;">アイウエオ</p>
<p style="direction: rtl; unicode-bidi: bidi-override;">アイウエオ</p>

【CSS】unicode-bidi：Unicodeの文字表記を指定する

　CSSのunicode-bideはUnicode文字の表記方法を指定するプロパティです。
　Unicodeとは、言語ごとに決められて規格を指し、unicode-bideによって規格を一時的に上書きすることが可能です。日本語ですとテキストは左方向ですが、これを右方向からに変更するといった具合です。

  • normal
    Unicode変更なし（初期値）
  • embed
    Unicodeの方向設定を、directionで設定した値の方向にする
  • bidi-override
    Unicodeを無効化し、directionで設定した値の方向にする
カテゴリー
CSS direction

【CSS】direction：テキストの方向を指定する

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

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

<p style="direction: ltr;">アイウエオ</p>
<p style="direction: rtl;">アイウエオ</p>

【CSS】direction：テキストの方向を指定する

　CSSのdirectionは、テキストの方法（左右）を指定するプロパティです。左方向の場合ltr、右方向の場合はrtlになります。