/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 04:41:31 */
/*************************************/
/*************************************/
/*************************************/
/** 
* ピクセルとサブピクセル、ピクセルピッチを図解で説明するためのhtml用のCSS
* 
* 次の投稿用に作成した
* https://blog.onk164.net/archives/19363.html
* 
*************************************/
/*************************************/
/*************************************/


/*===================================
ローカル変数、定数
===================================*/

.onk-pxpitch {

	/* 説明のためにピクセルを正方形の箱で表現し、1箱を1ピクセルと定義する。 */
	/* 箱の基準値 */
	/* 横の基準値 */
	--onk-pxpitch-box-w: 9px;
	/* 縦の基準値 */
	--onk-pxpitch-box-h: 9px;

	/* 箱サイズ 1倍 */
	--onk-pxpitch-box-w-sz1x: calc(var(--onk-pxpitch-box-w) * 1);
	--onk-pxpitch-box-h-sz1x: calc(var(--onk-pxpitch-box-h) * 1);

	/* 箱サイズ 3倍 */
	--onk-pxpitch-box-w-sz3x: calc(var(--onk-pxpitch-box-w) * 3);
	--onk-pxpitch-box-h-sz3x: calc(var(--onk-pxpitch-box-h) * 3);

	/* 箱サイズ 10倍 */
	--onk-pxpitch-box-w-sz10x: calc(var(--onk-pxpitch-box-w) * 10);
	--onk-pxpitch-box-h-sz10x: calc(var(--onk-pxpitch-box-h) * 10);


	/* 箱と箱の間隔の距離 基準値 */
	--onk-pxpitch-gap-col-base: 1px;
	--onk-pxpitch-gap-row-base: 1px;

	/* 箱と箱の間隔 1倍*/
	--onk-pxpitch-gap-col-sz1x: calc(var(--onk-pxpitch-gap-col-base) * 1);
	--onk-pxpitch-gap-row-sz1x: calc(var(--onk-pxpitch-gap-row-base) * 1);

	/* 箱と箱の間隔 3倍*/
	--onk-pxpitch-gap-col-sz3x: calc(var(--onk-pxpitch-gap-col-base) * 3);
	--onk-pxpitch-gap-row-sz3x: calc(var(--onk-pxpitch-gap-row-base) * 3);

	/* 箱と箱の間隔 10倍*/
	--onk-pxpitch-gap-col-sz10x: calc(var(--onk-pxpitch-gap-col-base) * 10);
	--onk-pxpitch-gap-row-sz10x: calc(var(--onk-pxpitch-gap-row-base) * 10);

	/* 箱と箱の間隔 50倍*/
	--onk-pxpitch-gap-col-sz50x: calc(var(--onk-pxpitch-gap-col-base) * 50);
	--onk-pxpitch-gap-row-sz50x: calc(var(--onk-pxpitch-gap-row-base) * 50);

}

/*===================================
基本的な箱のサイズ
===================================*/

/* 基本的な箱のサイズ */
.onk-pxpitch-box-wrap {
	width: var(--onk-pxpitch-box-w-sz1x);
	height: var(--onk-pxpitch-box-h-sz1x);
}

.onk-pxpitch-box {
	width: 100%;
	height: 100%;

	background-color: royalblue;
}

/* サイズを大きくする */
.onk-pxpitch-box-sz1x {
	width: var(--onk-pxpitch-box-w-sz1x);
	height: var(--onk-pxpitch-box-h-sz1x);

}

.onk-pxpitch-box-sz3x {
	width: var(--onk-pxpitch-box-w-sz3x);
	height: var(--onk-pxpitch-box-h-sz3x);

}

.onk-pxpitch-box-sz10x {
	width: var(--onk-pxpitch-box-w-sz10x);
	height: var(--onk-pxpitch-box-h-sz10x);

}

/*===================================
箱の色を変える
===================================*/


/* */
.onk-pxpitch-box-blank {
	background-color: lightgray;
}


/* サブピクセルを表現した箱 */
.onk-pxpitch-box-subpixel {

	/* rgb(255 255 255)。HTMLでの色名称 White */
	background:
		linear-gradient(to right,
			rgb(255 0 0) 33%,
			rgb(0 255 0) 33% 66%,
			rgb(0 0 255) 66%);
}

/* サブピクセルを表現した箱 rgb(255 255 255)。HTMLでの色名称 White */
.onk-pxpitch-box-subpixel-r255g255b255 {
	background:
		linear-gradient(to right,
			rgb(255 0 0) 33%,
			rgb(0 255 0) 33% 66%,
			rgb(0 0 255) 66%);
}


/* サブピクセルを表現した箱。rgb(0 0 255)。HTMLでの色名称 Blue */
.onk-pxpitch-box-subpixel-r0g0b255 {
	background:
		linear-gradient(to right,
			rgb(0 0 0) 33%,
			rgb(0 0 0) 33% 66%,
			rgb(0 0 255) 66%);
}

/* サブピクセルを表現した箱。rgb(0 128 0) HTMLでの色名称 Green */
.onk-pxpitch-box-subpixel-r0g128b0 {
	background:
		linear-gradient(to right,
			rgb(0 0 0) 33%,
			rgb(0 128 0) 33% 66%,
			rgb(0 0 0) 66%);
}

/* サブピクセルを表現した箱。rgb(255 165 0) HTMLでの色名称 Orange */
.onk-pxpitch-box-subpixel-r255g165b0 {
	background:
		linear-gradient(to right,
			rgb(255 0 0) 33%,
			rgb(0 165 0) 33% 66%,
			rgb(0 0 0) 66%);
}


/* 箱の中心点を示すための対角線付きの箱 */
.onk-pxpitch-box-diagonal {

	/* linear-gradientで表現する場合 */

	background:
		linear-gradient(45deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%),
		linear-gradient(135deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%),
		gray;

	/* borderで表現する場合 */
	/* min-width: 0;
    min-height: 0;
    width: 0;
    height: 0;

	border-width: calc(var(--onk-pxpitch-box-w-sz10x) / 2 );
	border-color: black;
	border-style: solid;

    border-color: rgba(255, 255, 255, 0.1) rgb(0 0 0 / 0.6) rgb(0 0 0 / 0.1) rgb(0 0 0 / 0.6);
    border-color: red green #55A4A0 orange; */


}

/*===================================
図解：1ピクセルを構成する3色(光の3原色 RGB)のサブピクセル
===================================*/

onk-pxpitch-explanation-what-is-subpixel {}



/*===================================
図解：ピクセルピッチとはどこの距離か
===================================*/

.onk-pxpitch-explanation-what-is-pitch {
	display: grid;
	grid-template-areas:
		"a b pxpitch-g-measure-h"
		"c d pxpitch-g-measure-h"
		"pxpitch-g-measure-w pxpitch-g-measure-w .";

	grid-template-columns: repeat(3, var(--onk-pxpitch-box-w-sz10x));
	grid-template-rows: repeat(2, var(--onk-pxpitch-box-h-sz10x)) 3rem;

	width: fit-content;
	height: fit-content;

	gap: var(--onk-pxpitch-gap-row-sz10x) var(--onk-pxpitch-gap-col-sz10x);

}



/*
 ピクセルピッチを示すための寸法線

 寸法線 Dimension Line
 寸法補助線 extension line

*/

/* 寸法線のラベル */
.onk-pxpitch-measure-h .label,
.onk-pxpitch-measure-w .label {
	font-weight: bold;
}

/* 横線ラッパー */
.onk-pxpitch-measure-w {
	grid-area: pxpitch-g-measure-w;
	justify-self: center;

	display: grid;
	grid-template-rows: auto auto 1fr;
}

/* 横線 寸法補助線の描画 */
.onk-pxpitch-measure-w .ext-line {
	display: grid;
	justify-self: center;

	width: calc(var(--onk-pxpitch-box-w-sz10x) + var(--onk-pxpitch-gap-col-sz10x));
	height: calc(10px + var(--onk-pxpitch-box-h-sz10x)/2 + var(--onk-pxpitch-gap-row-sz10x));

	border-width: 0 1px 0;
	border-color: black;
	border-style: solid;

	/*
	寸法補助線の端を箱の中心に移動させる。
	オブジェクトと寸法補助線の間に2pxのギャップを設ける。
	*/
	margin-top: calc(-1 * var(--onk-pxpitch-box-h-sz10x)/2 - var(--onk-pxpitch-gap-row-sz10x) + 2px);
}

/* 横線 寸法線の描画 */
.onk-pxpitch-measure-w .dim-line {
	align-self: end;

	height: 10px;

	border-width: 1px 0 0;
	border-color: black;
	border-style: solid;

}


/* 縦線ラッパー */
.onk-pxpitch-measure-h {
	grid-area: pxpitch-g-measure-h;

	display: grid;
	grid-template-columns: auto auto 1fr;
	/* grid-template-rows: 1fr; */
	align-items: center;
}

/* 縦線 寸法補助線の描画 */
.onk-pxpitch-measure-h .ext-line {
	display: grid;

	width: calc(10px + var(--onk-pxpitch-box-h-sz10x)/2 + var(--onk-pxpitch-gap-row-sz10x));
	height: calc(var(--onk-pxpitch-box-h-sz10x) + var(--onk-pxpitch-gap-row-sz10x));

	/* background-color: black; */
	border-width: 1px 0 1px 0;
	border-color: black;
	border-style: solid;

	margin-left: calc(-1 * var(--onk-pxpitch-box-w-sz10x)/2 - var(--onk-pxpitch-gap-col-sz10x) + 2px);
}

/* 縦線 寸法線の描画 */
.onk-pxpitch-measure-h .dim-line {
	justify-self: end;

	width: 10px;
	height: 100%;

	border-width: 0px 0px 0px 1px;
	border-color: black;
	border-style: solid;

}

/*===================================
箱を縦横3x3に並べて、四角い線を描画する
===================================*/

/* レイアウト指定 */
.onk-pxpitch-explanation-grid3x3 {
	display: grid;
	grid-template-areas:
		"a b c"
		"d e f"
		"g h i";


	grid-template-columns: repeat(3, var(--onk-pxpitch-box-w-sz10x));
	grid-template-rows: repeat(3, var(--onk-pxpitch-box-h-sz10x));

	width: fit-content;
	height: fit-content;
	background-color: black;
}


/* ピクセルピッチが正方形の再現 */
.onk-pxpitch-sz-square {
	gap: var(--onk-pxpitch-gap-row-sz3x) var(--onk-pxpitch-gap-col-sz3x);
}

/* ピクセルピッチが長方形(横が広い場合)の再現 */
.onk-pxpitch-sz-rectangle {
	gap: var(--onk-pxpitch-gap-row-sz3x) var(--onk-pxpitch-gap-col-sz50x);
}