ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

火曜日, 8月 18, 2026

HTMLとCSSの様々な表現 29　
00,33,66,99,cc,ffだけの組み合わせで表現できる186色

00,33,66,99,cc,ffだけの組み合わせで表現できる186色の一覧表です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>web color 186</title>
<style>
body {
background-color: black;
 font-size: 14px;
color: white;
}
</style>
</head>
<body>
<center>
<h3>00,33,66,99,cc,ffだけの組み合わせで表現できる186色の一覧を16進数順に整列 </h3>
<table width="960px" border="1">
 <tr>
 <td width="160px" style="background-color:#000000; color:#ffffff;">#000000</td>
 <td width="161px" style="background-color:#000033; color:#ffffff;">#000033</td>
 <td width="162px" style="background-color:#000066; color:#ffffff;">#000066</td>
 <td width="163px" style="background-color:#000099; color:#ffffff;">#000099</td>
 <td width="164px" style="background-color:#0000cc; color:#ffffff;">#0000cc</td>
 <td width="165px" style="background-color:#0000ff; color:#ffffff;">#0000ff</td>
 </tr>
 <tr>
 <td style="background-color:#330000; color:#ffffff;">#330000</td>
 <td style="background-color:#330033; color:#ffffff;">#330033</td>
 <td style="background-color:#330066; color:#ffffff;">#330066</td>
 <td style="background-color:#330099; color:#ffffff;">#330099</td>
 <td style="background-color:#3300cc; color:#ffffff;">#3300cc</td>
 <td style="background-color:#3300ff; color:#ffffff;">#3300ff</td>
 </tr>
 <tr>
 <td style="background-color:#333300; color:#ffffff;">#333300</td>
 <td style="background-color:#333333; color:#ffffff;">#333333</td>
 <td style="background-color:#333366; color:#ffffff;">#333366</td>
 <td style="background-color:#333399; color:#ffffff;">#333399</td>
 <td style="background-color:#3333cc; color:#ffffff;">#3333cc</td>
 <td style="background-color:#3333ff; color:#ffffff;">#3333ff</td>
 </tr>
 <tr>
 <td style="background-color:#336600; color:#ffffff;">#336600</td>
 <td style="background-color:#336633; color:#ffffff;">#336633</td>
 <td style="background-color:#336666; color:#ffffff;">#336666</td>
 <td style="background-color:#336699; color:#ffffff;">#336699</td>
 <td style="background-color:#3366cc; color:#ffffff;">#3366cc</td>
 <td style="background-color:#3366ff; color:#ffffff;">#3366ff</td>
 </tr>
 <tr>
 <td style="background-color:#339900; color:#ffffff;">#339900</td>
 <td style="background-color:#339933; color:#ffffff;">#339933</td>
 <td style="background-color:#339966; color:#ffffff;">#339966</td>
 <td style="background-color:#339999; color:#ffffff;">#339999</td>
 <td style="background-color:#3399cc; color:#ffffff;">#3399cc</td>
 <td style="background-color:#3399ff; color:#ffffff;">#3399ff</td>
 </tr>
 <tr>
 <td style="background-color:#33cc00; color:#333333;">#33cc00</td>
 <td style="background-color:#33cc33; color:#333333;">#33cc33</td>
 <td style="background-color:#33cc66; color:#333333;">#33cc66</td>
 <td style="background-color:#33cc99; color:#333333;">#33cc99</td>
 <td style="background-color:#33cccc; color:#333333;">#33cccc</td>
 <td style="background-color:#33ccff; color:#333333;">#33ccff</td>
 </tr>
 <tr>
 <td style="background-color:#33ff00; color:#333333;">#33ff00</td>
 <td style="background-color:#33ff33; color:#333333;">#33ff33</td>
 <td style="background-color:#33ff66; color:#333333;">#33ff66</td>
 <td style="background-color:#33ff99; color:#333333;">#33ff99</td>
 <td style="background-color:#33ffcc; color:#333333;">#33ffcc</td>
 <td style="background-color:#33ffff; color:#333333;">#33ffff</td>
 </tr>
 <tr>
 <td style="background-color:#660000; color:#ffffff;">#660000</td>
 <td style="background-color:#660033; color:#ffffff;">#660033</td>
 <td style="background-color:#660066; color:#ffffff;">#660066</td>
 <td style="background-color:#660099; color:#ffffff;">#660099</td>
 <td style="background-color:#6600cc; color:#ffffff;">#6600cc</td>
 <td style="background-color:#6600ff; color:#ffffff;">#6600ff</td>
 </tr>
 <tr>
 <td style="background-color:#663300; color:#ffffff;">#663300</td>
 <td style="background-color:#663333; color:#ffffff;">#663333</td>
 <td style="background-color:#663366; color:#ffffff;">#663366</td>
 <td style="background-color:#663399; color:#ffffff;">#663399</td>
 <td style="background-color:#6633cc; color:#ffffff;">#6633cc</td>
 <td style="background-color:#6633ff; color:#ffffff;">#6633ff</td>
 </tr>
 <tr>
 <td style="background-color:#666600; color:#ffffff;">#666600</td>
 <td style="background-color:#666633; color:#ffffff;">#666633</td>
 <td style="background-color:#666666; color:#ffffff;">#666666</td>
 <td style="background-color:#666699; color:#ffffff;">#666699</td>
 <td style="background-color:#6666cc; color:#ffffff;">#6666cc</td>
 <td style="background-color:#6666ff; color:#ffffff;">#6666ff</td>
 </tr>
 <tr>
 <td style="background-color:#669900; color:#ffffff;">#669900</td>
 <td style="background-color:#669933; color:#ffffff;">#669933</td>
 <td style="background-color:#669966; color:#ffffff;">#669966</td>
 <td style="background-color:#669999; color:#ffffff;">#669999</td>
 <td style="background-color:#6699cc; color:#ffffff;">#6699cc</td>
 <td style="background-color:#6699ff; color:#ffffff;">#6699ff</td>
 </tr>
 <tr>
 <td style="background-color:#66cc00; color:#333333;">#66cc00</td>
 <td style="background-color:#66cc33; color:#333333;">#66cc33</td>
 <td style="background-color:#66cc66; color:#333333;">#66cc66</td>
 <td style="background-color:#66cc99; color:#333333;">#66cc99</td>
 <td style="background-color:#66cccc; color:#333333;">#66cccc</td>
 <td style="background-color:#66ccff; color:#333333;">#66ccff</td>
 </tr>
 <tr>
 <td style="background-color:#66ff00; color:#333333;">#66ff00</td>
 <td style="background-color:#66ff33; color:#333333;">#66ff33</td>
 <td style="background-color:#66ff66; color:#333333;">#66ff66</td>
 <td style="background-color:#66ff99; color:#333333;">#66ff99</td>
 <td style="background-color:#66ffcc; color:#333333;">#66ffcc</td>
 <td style="background-color:#66ffff; color:#333333;">#66ffff</td>
 </tr>
 <tr>
 <td style="background-color:#990000; color:#ffffff;">#990000</td>
 <td style="background-color:#990033; color:#ffffff;">#990033</td>
 <td style="background-color:#990066; color:#ffffff;">#990066</td>
 <td style="background-color:#990099; color:#ffffff;">#990099</td>
 <td style="background-color:#9900cc; color:#ffffff;">#9900cc</td>
 <td style="background-color:#9900ff; color:#ffffff;">#9900ff</td>
 </tr>
 <tr>
 <td style="background-color:#993300; color:#ffffff;">#993300</td>
 <td style="background-color:#993333; color:#ffffff;">#993333</td>
 <td style="background-color:#993366; color:#ffffff;">#993366</td>
 <td style="background-color:#993399; color:#ffffff;">#993399</td>
 <td style="background-color:#9933cc; color:#ffffff;">#9933cc</td>
 <td style="background-color:#9933ff; color:#ffffff;">#9933ff</td>
 </tr>
 <tr>
 <td style="background-color:#996600; color:#ffffff;">#996600</td>
 <td style="background-color:#996633; color:#ffffff;">#996633</td>
 <td style="background-color:#996666; color:#ffffff;">#996666</td>
 <td style="background-color:#996699; color:#ffffff;">#996699</td>
 <td style="background-color:#9966cc; color:#ffffff;">#9966cc</td>
 <td style="background-color:#9966ff; color:#ffffff;">#9966ff</td>
 </tr>
 <tr>
 <td style="background-color:#999900; color:#ffffff;">#999900</td>
 <td style="background-color:#999933; color:#ffffff;">#999933</td>
 <td style="background-color:#999966; color:#ffffff;">#999966</td>
 <td style="background-color:#999999; color:#ffffff;">#999999</td>
 <td style="background-color:#9999cc; color:#ffffff;">#9999cc</td>
 <td style="background-color:#9999ff; color:#ffffff;">#9999ff</td>
 </tr>
 <tr>
 <td style="background-color:#99cc00; color:#333333;">#99cc00</td>
 <td style="background-color:#99cc33; color:#333333;">#99cc33</td>
 <td style="background-color:#99cc99; color:#333333;">#99cc99</td>
 <td style="background-color:#99cc99; color:#333333;">#99cc99</td>
 <td style="background-color:#99cccc; color:#333333;">#99cccc</td>
 <td style="background-color:#99ccff; color:#333333;">#99ccff</td>
 </tr>
 <tr>
 <td style="background-color:#99ff00; color:#333333;">#99ff00</td>
 <td style="background-color:#99ff33; color:#333333;">#99ff33</td>
 <td style="background-color:#99ff99; color:#333333;">#99ff99</td>
 <td style="background-color:#99ff99; color:#333333;">#99ff99</td>
 <td style="background-color:#99ffcc; color:#333333;">#99ffcc</td>
 <td style="background-color:#99ffff; color:#333333;">#99ffff</td>
 </tr>
 <tr>
 <td style="background-color:#cc0000; color:#ffffff;">#cc0000</td>
 <td style="background-color:#cc0033; color:#ffffff;">#cc0033</td>
 <td style="background-color:#cc0066; color:#ffffff;">#cc0066</td>
 <td style="background-color:#cc0099; color:#ffffff;">#cc0099</td>
 <td style="background-color:#cc00cc; color:#ffffff;">#cc00cc</td>
 <td style="background-color:#cc00ff; color:#ffffff;">#cc00ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc3300; color:#ffffff;">#cc3300</td>
 <td style="background-color:#cc3333; color:#ffffff;">#cc3333</td>
 <td style="background-color:#cc3366; color:#ffffff;">#cc3366</td>
 <td style="background-color:#cc3399; color:#ffffff;">#cc3399</td>
 <td style="background-color:#cc33cc; color:#ffffff;">#cc33cc</td>
 <td style="background-color:#cc33ff; color:#ffffff;">#cc33ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc6600; color:#ffffff;">#cc6600</td>
 <td style="background-color:#cc6633; color:#ffffff;">#cc6633</td>
 <td style="background-color:#cc6666; color:#ffffff;">#cc6666</td>
 <td style="background-color:#cc6699; color:#ffffff;">#cc6699</td>
 <td style="background-color:#cc66cc; color:#ffffff;">#cc66cc</td>
 <td style="background-color:#cc66ff; color:#ffffff;">#cc66ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc9900; color:#ffffff;">#cc9900</td>
 <td style="background-color:#cc9933; color:#ffffff;">#cc9933</td>
 <td style="background-color:#cc9966; color:#ffffff;">#cc9966</td>
 <td style="background-color:#cc9999; color:#ffffff;">#cc9999</td>
 <td style="background-color:#cc99cc; color:#ffffff;">#cc99cc</td>
 <td style="background-color:#cc99ff; color:#ffffff;">#cc99ff</td>
 </tr>
 <tr>
 <td style="background-color:#cccc00; color:#333333;">#cccc00</td>
 <td style="background-color:#cccc33; color:#333333;">#cccc33</td>
 <td style="background-color:#cccc66; color:#333333;">#cccc66</td>
 <td style="background-color:#cccc99; color:#333333;">#cccc99</td>
 <td style="background-color:#cccccc; color:#333333;">#cccccc</td>
 <td style="background-color:#ccccff; color:#333333;">#ccccff</td>
 </tr>
 <tr>
 <td style="background-color:#ccff00; color:#333333;">#ccff00</td>
 <td style="background-color:#ccff33; color:#333333;">#ccff33</td>
 <td style="background-color:#ccff66; color:#333333;">#ccff66</td>
 <td style="background-color:#ccff99; color:#333333;">#ccff99</td>
 <td style="background-color:#ccffcc; color:#333333;">#ccffcc</td>
 <td style="background-color:#ccffff; color:#333333;">#ccffff</td>
 </tr>
 <tr>
 <td style="background-color:#ff0000; color:#ffffff;">#ff0000</td>
 <td style="background-color:#ff0033; color:#ffffff;">#ff0033</td>
 <td style="background-color:#ff0066; color:#ffffff;">#ff0066</td>
 <td style="background-color:#ff0099; color:#ffffff;">#ff0099</td>
 <td style="background-color:#ff00cc; color:#ffffff;">#ff00cc</td>
 <td style="background-color:#ff00ff; color:#ffffff;">#ff00ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff3300; color:#ffffff;">#ff3300</td>
 <td style="background-color:#ff3333; color:#ffffff;">#ff3333</td>
 <td style="background-color:#ff3366; color:#ffffff;">#ff3366</td>
 <td style="background-color:#ff3399; color:#ffffff;">#ff3399</td>
 <td style="background-color:#ff33cc; color:#ffffff;">#ff33cc</td>
 <td style="background-color:#ff33ff; color:#ffffff;">#ff33ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff6600; color:#ffffff;">#ff6600</td>
 <td style="background-color:#ff6633; color:#ffffff;">#ff6633</td>
 <td style="background-color:#ff6666; color:#ffffff;">#ff6666</td>
 <td style="background-color:#ff6699; color:#ffffff;">#ff6699</td>
 <td style="background-color:#ff66cc; color:#ffffff;">#ff66cc</td>
 <td style="background-color:#ff66ff; color:#ffffff;">#ff66ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff9900; color:#ffffff;">#ff9900</td>
 <td style="background-color:#ff9933; color:#ffffff;">#ff9933</td>
 <td style="background-color:#ff9966; color:#ffffff;">#ff9966</td>
 <td style="background-color:#ff9999; color:#ffffff;">#ff9999</td>
 <td style="background-color:#ff99cc; color:#ffffff;">#ff99cc</td>
 <td style="background-color:#ff99ff; color:#ffffff;">#ff99ff</td>
 </tr>
 <tr>
 <td style="background-color:#ffcc00; color:#333333;">#ffcc00</td>
 <td style="background-color:#ffcc33; color:#333333;">#ffcc33</td>
 <td style="background-color:#ffcc66; color:#333333;">#ffcc66</td>
 <td style="background-color:#ffcc99; color:#333333;">#ffcc99</td>
 <td style="background-color:#ffcccc; color:#333333;">#ffcccc</td>
 <td style="background-color:#ffccff; color:#333333;">#ffccff</td>
 </tr>
 <tr>
 <td style="background-color:#ffff00; color:#333333;">#ffff00</td>
 <td style="background-color:#ffff33; color:#333333;">#ffff33</td>
 <td style="background-color:#ffff66; color:#333333;">#ffff66</td>
 <td style="background-color:#ffff99; color:#333333;">#ffff99</td>
 <td style="background-color:#ffffcc; color:#333333;">#ffffcc</td>
 <td style="background-color:#ffffff; color:#333333;">#ffffff</td>
 </tr>
</table>
</body>
</html>

表示するとこんな感じです。
投稿者 時刻:
ラベル: , ,

月曜日, 8月 17, 2026

Let's start JavaScript 108　
正多角形の一辺の長さを求める

諸般の事情で必要に迫られて作ってみました。相変わらずレイアウトは必要最低限です。

辺の長さ = 2r × sin(pai/n)
    r：円の半径
    n：多角形の辺の数

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>正多角形の辺の長さ計算</title>
<style>
body {
background: black;
color: white;
font-family: sans-serif;
margin: 20px;
}

input {
width: 80px;
margin: 5px;
}

label {
display: block;
margin: 10px 0;
}
</style>

</style>
</head>

<body>
<center>
<h3>正多角形の1辺の長さ計算</h3>

<label>
半径:
<input type="number" id="radius" value="100">
</label>

<label>
辺の数:
<input type="number" id="sides" value="6" min="3">
</label>

<button onclick="calc()">計算</button>
<br>
<p>辺の長さ = 2r × sin(π/n)<br>

r：円の半径<br>
π：円周率<br>
n：多角形の辺の数</p><br>
<p id="result"></p>

<script>
function calc() {
const r = parseFloat(document.getElementById("radius").value);
const n = parseInt(document.getElementById("sides").value);

if (n < 3) {
document.getElementById("result").textContent =
         "辺の数は3以上です。";
return;
}

const length = 2 * r * Math.sin(Math.PI / n);

document.getElementById("result").textContent =
`1辺の長さ = ${length.toFixed(4)}`;
}
</script>
</center>
</body>
</html>

実行直後のデフォルト値を変更し・・・

計算ボタンをクリックするだけです。
投稿者 時刻:
ラベル: ,

月曜日, 8月 10, 2026

Excel VBA 56　
ExcelでA列の塗り色をB列にRGB表示

A列の塗り色をB列に範囲を指定してRGB表示します。

Sub OutputRGB()

Dim ws As Worksheet
Dim startRow As Long
Dim endRow As Long
Dim i As Long
Dim clr As Long
Dim r As Long, g As Long, b As Long

Set ws = ActiveSheet

startRow = CLng(InputBox("開始行を入力してください", "開始行"))
endRow = CLng(InputBox("終了行を入力してください", "終了行"))

If startRow > endRow Then
MsgBox "開始行は終了行以下にしてください。"
Exit Sub
End If

For i = startRow To endRow

clr = ws.Cells(i, "A").Interior.Color

r = clr Mod 256
g = (clr / 256) Mod 256
b = (clr / 65536) Mod 256

ws.Cells(i, "B").Value = "RGB(" & r & ", " & g & ", " & b & ")"

Next i

MsgBox "完了しました。"

End Sub

データを用意して実行すると・・・

開始行を指定し・・・

終了行を指定すれば・・・

完了です。

こんな感じになります。
投稿者 時刻:
ラベル: , , ,

金曜日, 8月 07, 2026

Let's start JavaScript 107　
シンプルにA版B版の用紙サイズ表示

シンプルにA版B版の用紙サイズを表示するだけです。公式の0〜10のサイズに対応しました。まっ、単にサイズ表を作ればいい話ですが、他のデータなどにも活用できるのでは・・・ということで作りました。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>A版・B版 サイズ表示</title>
<style>
body {
font-family: sans-serif;
margin: 40px;
background-color: black;
color: white;
}

select,
input {
padding: 6px;
}

#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: yellow;
}
</style>
</head>

<body>
<center>
<h3>A版・B版 サイズ表示</h3>

<select id="type">
<option value="A">A版</option>
<option value="B">B版</option>
</select>

<input type="number" id="size" min="0" max="10"
            placeholder="0～10">

<div id="result">0～10を入力してください</div>

<script>
const paper = {
A: {
0: "841 × 1189 mm",
1: "594 × 841 mm",
2: "420 × 594 mm",
3: "297 × 420 mm",
4: "210 × 297 mm",
5: "148 × 210 mm",
6: "105 × 148 mm",
7: "74 × 105 mm",
8: "52 × 74 mm",
9: "37 × 52 mm",
10: "26 × 37 mm"
},
B: {
0: "1030 × 1456 mm",
1: "728 × 1030 mm",
2: "515 × 728 mm",
3: "364 × 515 mm",
4: "257 × 364 mm",
5: "182 × 257 mm",
6: "128 × 182 mm",
7: "91 × 128 mm",
8: "64 × 91 mm",
9: "45 × 64 mm",
10: "32 × 45 mm"
}
};

const type = document.getElementById("type");
const size = document.getElementById("size");
const result = document.getElementById("result");

function showSize() {
const t = type.value;
const s = size.value;

if (paper[t][s] !== undefined) {
result.textContent = `${t}${s}：${paper[t][s]}`;
} else {
result.textContent = "0～10を入力してください";
}
}

type.addEventListener("change", showSize);
size.addEventListener("input", showSize);
</script>
</center>
</body>

</html>

実行したらA版B版の選択と、数値を入力またはスピンボタン（▲▼マーク）※で・・・

※カーソルを近づけると表示されます。

サイズを表記します。よく使うA4とB5以外は暗記があやふやなので・・・（^o^）
投稿者 時刻:
ラベル: ,
登録: 投稿 (Atom)