
七セグLED 表現をモダンHTMLで記述した技術検証モックアップ
about: 七セグLED 表現をモダンHTMLで記述した技術検証モックアップ
リンク:https://tools.shotanet.info/nanaseg/
リリース日:2025年
所有者:shotnet
制作者::shotanet
フォント制作:何某亭 様
ツール全体イメージ

カラーセット
色セット名 | 数字表示色 | 背景色 | 枠の色 | イメージ |
---|---|---|---|---|
デフォルト | オレンジ | グレー | 黒寄りのグレー | ![]() |
赤 | 赤 | 黒 | 赤 | ![]() |
緑 | 緑 | 黒 | 緑 | ![]() |
青 | 青 | 黒 | 青 | ![]() |
紫 | 紫 | 黒 | 紫 | ![]() |
特記事項
七セグフォントには、何某亭 様が制作した「フリーフォント『なにセグ』」を使用しています。 CSSの記述にはこのサイトを参考にさせていただきました。
変更ログ
2025/6/27 一旦動く形でサーバーにアップ&公開
使い方
以下のページにアクセスしてお楽しみください リアルタイムでスタイルを調整できます
7セグシミュレーターにアクセスモード選択(時計と数値)
ボタンを押すことによりモードを切り替えられます

数値モード
数値モードでは任意の数字を入力できます半角数字のみ七セグ風表示に対応しています
時計モード
時計モードでは日付と時刻が表示されます、 時計モードでは時刻の:が点滅します。

チェックボックスを操作することで、日付の表示非表示を操作できます
LEDの光を再現した5色から選べます
漏れ光源再現
「リーク」にチェックをいれることで 最近はあまり見かけないですが消灯している部分もうっすら光るような状態を再現しています
利用事例
準備中