投稿者: Linlin

カテゴリー
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になります。

カテゴリー
clip CSS

【CSS】clip：ボックスを切り抜く（グリッピング）

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

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

<div class="sample">
元の画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg">
</div>
<div class="sample">
カンマ区切り指定<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" class="sample1">
</div>
<div class="sample">
スペース区切り指定<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" class="sample2">
</div>
div.sample {height:200px;}
img.sample1 {clip:rect(60px,150px,130px,40px); position:absolute;}
img.sample2 {clip:rect(60px 150px 130px 40px); position:absolute;}

【CSS】clip：ボックスを切り抜く（グリッピング）

　CSSのclipはボックス要素を切り抜き表示（グリッピング）するプロパティです。

カテゴリー
CSS visibility

【CSS】visibility：ボックスの表示・非表示を指定する

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

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

<p class="sample1">ああああああ</p>
<p class="sample2">いいいいいい</p>

<h3>一部のセルにvisibility:collapseを適用</h3>
<table border="1">
<tr class="sample3">
<td>１</td>
<td>２</td>
<td>３</td>
</tr>
<tr>
<td class="sample3">１</td>
<td>２</td>
<td>３</td>
</tr>
</table>
.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
.sample3 {visibility:collapse;}

【CSS】visibility：ボックスの表示・非表示を指定する

　CSSのvisibilityは、ボックスの表示・非表示を指定するプロパティです。display:noneと違い、非表示にしてもページのレイアウトは変わりありません。

  • visible
    表示
  • hidden
    非表示
  • collapse
    テーブルの行・列に指定すると詰めて表示
カテゴリー
CSS z-index

【CSS】z-index：重なりの順序を指定する

（例）【CSS】z-indexの使用方法

See the Pen
z-index by linlin (@linlin098765)
on CodePen. 

<p style="background-color:red; z-index:1; position:absolute; top:10px;">１</p>
<p style="background-color:gray; z-index:2; position:absolute; top:15px; left:15px;">２</p>

【CSS】z-index：重なりの順序を指定する

　CSSのz-indexは、ボックスの重なり順序を指定するプロパティです。

カテゴリー
clear CSS

【CSS】clear：回り込み(float)を解除

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

<a style="float:left;">左</a>
<a style="float:right;">右</a>
<div style="clear:both;">clearプロパティ</div>

【CSS】clearの使用方法

【CSS】clear：回り込み(float)を解除

　CSSのclearは回り込み（floatプロパティ）を解除するプロパティです。

  • left
    float:leftを解除
  • right
    float:rightを解除
  • both
    float:leftとfloat:rightの両方を解除
  • none
    floatを解除しない（初期値）
カテゴリー
CSS float

【CSS】float：要素を左or右に配置する

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

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

<a style="float:left;">左</a>
<a style="float:right;">右</a>

【CSS】float：要素を左or右に配置する

　CSSのfloatは要素を左または右に配置するプロパティです。leftで左、rightで右に配置することが可能です。