CSS

説明
一般的なディスプレイ　1x指定
高いディスプレイ　　　2x指定
htmlコード

<div class="cft"> <img src="/data/cft/test_01.png" ...

構文
pre-line
改行：そのまま
空白とタブ文字：そのまま
テキストの折り返し:折り返す
行末の空白:除去

連続するホワイトスペースは詰められて 1 つになります。行の折り返し ...

環境
Google Chrome　99.0.4844.51

書式
transition: width 数値1 ease 数値2;
s:秒
ms:ミリ秒
easeを利用してアニメーショ ...

環境
Google Chrome　99.0.4844.51

書式
transition: width 数値1 linear 数値2;
s:秒
ms:ミリ秒
linearを利用して、ア ...

構文
* { スタイルプロパティ }
すべての種類の要素にマッチします。
CSSコード

* { color: black;}*#usePro { border: 2px solid blue;}*.cf ...

構文
セレクタ1 + セレクタ2
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。
隣接兄弟結合子 (adjacent sibling combin ...

構文

.クラス名　span {定義コード}.クラス名　a {定義コード}.クラス名　img {定義コード}.クラス名　input{定義コード}

使用例

<style>/*インライン要素*/.cft span ...

書式
overflow: hidden;
表示領域を超えた分は表示しません。日本語は改行されます。
使用例

<style> .cftA,.cftB { border: 1px solid #0 ...

書式
border-spacing : 値　　　　上下左右を指定
border-spacing : 値　値　　左右と上下を指定

使用例

<style> table { border-col ...

構文

.クラス名　div { display: inline-block;}

使用例

<style> .cft div {/*inline-blockを指定*/display: inline-block;/ ...

構文

.クラス名　div {定義コード}.クラス名　p {定義コード}.クラス名　h1 {定義コード}.クラス名　table{定義コード}

使用例

<style> .cft div {/*幅を指定*/wid ...

構文
@media 種類 and (min-widthで幅を指定){定義コード}
種類は、主にallまたはscreenまたはprintが使用されています。
all　すべての端末に一致します。
scree ...

構文

@media 種類 and (max-widthで幅を指定){定義コード}
種類は、主にallまたはscreenまたはprintが使用されています。
all　すべての端末に一致します。
scr ...

書式
td:empty{xxx}
div:empty{xxx}
:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。

書式
tr:nth-last-child(行目)
使用例

<style> tr:nth-last-child(4){ background-color: skyblue; vertical-align ...

書式
セレクタ1 > セレクタ2
使用例

<style>/*セレクタ1 >セレクタ2*/.cftA > .ka{ color:SkyBlue;}</style><d ...

書式
text-shadow : 値1　値2　値3　値4
値1 (offset-x)
水平方向の距離を指定します。負の値であればテキストの左に影を配置します。
値2 (offset-y)
垂直方 ...

書式
opacity : 値
opacity は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、
0　 要素は完全に透明です
0～1 要素は ...