Skip to content

Instantly share code, notes, and snippets.

View 01yakuza-introduction-maker.css
.sample-img {
width: 200px;
/* */
.settings {
display: flex;
flex-direction: column;
row-gap: 12px;
align-items: center;
View 01stack-calculator.css
.settings {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
border-bottom: 1px dashed #555;
.number-input {
width: 100px;
padding: 0 2px;
View 01make-pair-v2.css
#players-input {
box-sizing: border-box;
width: 100%;
max-width: 600px;
height: 200px;
padding: 4px;
resize: vertical;
#pair-select {
height: 2em;
View 01watermark-maker.css
.settings {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
margin: 12px 0;
.settings-table {
border-collapse: collapse;
motsu0 / canvas-text-center-0.js
Created April 19, 2023 09:27
canvas text centering
View canvas-text-center-0.js
const width_canvas = 400;
const height_canvas = 214;
View demo-image-selector1.html
<div id="demo1">
<img src="pathto/sign1.png" alt="交通標識" class="ImageSelector__option" data-value="1">
<img src="pathto/sign2.png" alt="交通標識" class="ImageSelector__option" data-value="2">
<img src="pathto/sign3.png" alt="交通標識" class="ImageSelector__option" data-value="3">
<img src="pathto/sign4.png" alt="交通標識" class="ImageSelector__option" data-value="4">
<img src="pathto/sign5.png" alt="交通標識" class="ImageSelector__option" data-value="5">
<img src="pathto/sign6.png" alt="交通標識" class="ImageSelector__option" data-value="6">
<img src="pathto/sign7.png" alt="交通標識" class="ImageSelector__option" data-value="7">
<img src="pathto/sign8.png" alt="交通標識" class="ImageSelector__option" data-value="8">
<img src="pathto/sign9.png" alt="交通標識" class="ImageSelector__option" data-value="9">
motsu0 / image-selector.css
Last active November 8, 2023 08:46
[HTML] Create original SELECT with OPTION to include images.
View image-selector.css
@charset "utf-8";
display: inline-flex;
position: relative;
box-sizing: border-box;
border: 1px solid #777;
background-color: #fff;
cursor: pointer;
View 01html-str-change-notag.html
<div id="sample-outer">
<p class="sample">sample文章があります。</p>
<p class="sample">sampleという文字だけ太字にしてみましょう。</p>
View 01js-countdown-timer.js
const el_time = document.getElementById('time');
const countdown = new countDownTimer({
element: el_time, //カウントダウンを表示する要素
str_date: '2100-01-02T12:00:00', //カウントダウン目標の時刻 {YYYY}-{MM}-{DD}T{hh}:{mm}:{ss}
is_d: true, //bool 日を表示するか否か
is_h: true, //bool 時間を表示するか否か
is_m: true, //bool 分を表示するか否か
is_s: true, //bool 秒を表示するか否か
is_ms: false, //bool ミリ秒を表示するか否か
View bg-color-checkered.js
* bg-color-checkered.js v1.0
* Copyright (c) 2023 motsu
* Released under the MIT license.
* see
class bgColorCheckered{
constructor(element, args){