火曜日, 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>

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

TCDW8862　
黙々と枝豆を食べるだけです（^o^）

前にもネタにしましたが・・・夏と言えば枝豆。私はほぼ毎日食べていますが、ビールのお供はありません。お酒を止める前でも家で吞む習慣がなかったので、黙々と枝豆を食べるだけです（^o^）
投稿者 時刻:
ラベル: , ,

月曜日, 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>

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

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

TCDW8861　
微笑んでいる女友達にビックリしたことが

Cute Baby Alien 057（^o^）
芋虫星人は蝶にはなりません・・・
学生の時、手のひらに芋虫を載せて嬉しそうに微笑んでいる女友達にビックリしたことがあります。私はもちろん無理です。
投稿者 時刻:
ラベル: , , ,

日曜日, 8月 16, 2026

Illustratorの整列パレットを改めて整理

Illustratorの整列パレットを改めて整理してみました。解りにくいのは［エリア内文字］or［ポイント文字］の設定ですね。

個人的には整列ツールで［アートボードに整列］は使ったことないです。

文字ツールで適宜改行しながら入力し、最終行に空の行がある状態。
両方を選択し［選択範囲に整列］。

・エリア内文字、ポイント文字共に：OFF
・エリア内文字：ON

・エリア内文字、ポイント文字共に：ON
・ポイント文字：ON

両方を選択し続けて矩形を選択しキーオブジェクトに指定し［キーオブジェクトに整列］。

・エリア内文字、ポイント文字共に：OFF
・エリア内文字：ON

・エリア内文字、ポイント文字共に：ON
・ポイント文字：ON

エリア内文字ツールで任意ボックスを作成・入力し、最終行に空の行がある状態。
両方を選択し［選択範囲に整列］。

・エリア内文字、ポイント文字共に：OFF
・ポイント文字：ON

・エリア内文字、ポイント文字共に：ON
・エリア内文字：ON

両方を選択し続けて矩形を選択しキーオブジェクトに指定し［キーオブジェクトに整列］。

・エリア内文字、ポイント文字共に：OFF
・ポイント文字：ON

・エリア内文字、ポイント文字共に：ON
・エリア内文字：ON

とりあえず［エリア内文字］or［ポイント文字］は両方とも設定しておけばOKでした。いちいち切り替えるのは面倒ですからね。
投稿者 時刻:
ラベル:
登録: 投稿 (Atom)