motsu0
motsu0
/ 01make-symmetry-image.css
Last active
May 12, 2025 09:56
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .file-input { | |
| display: block; | |
| margin: 16px 0; | |
| } | |
| #message-box { | |
| padding-left: 12px; | |
| color: red; | |
| } | |
| #preview-image { | |
| width: 100px; |
motsu0
/ 01yakuza-introduction-maker.css
Created
September 21, 2023 12:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sample-img { | |
| width: 200px; | |
| } | |
| /* */ | |
| .settings { | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 12px; | |
| align-items: center; | |
| } |
motsu0
/ 01stack-calculator.css
Last active
September 15, 2023 12:48
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .settings { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 8px; | |
| border-bottom: 1px dashed #555; | |
| } | |
| .number-input { | |
| width: 100px; | |
| padding: 0 2px; |
motsu0
/ 01make-pair-v2.css
Created
August 6, 2023 06:08
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #players-input { | |
| box-sizing: border-box; | |
| width: 100%; | |
| max-width: 600px; | |
| height: 200px; | |
| padding: 4px; | |
| resize: vertical; | |
| } | |
| #pair-select { | |
| height: 2em; |
motsu0
/ 01watermark-maker.css
Last active
August 22, 2023 07:25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .settings { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| row-gap: 20px; | |
| margin: 12px 0; | |
| } | |
| .settings-table { | |
| border-collapse: collapse; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const width_canvas = 400; | |
| const height_canvas = 214; |
motsu0
/ demo-image-selector1.html
Last active
March 9, 2023 06:27
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "utf-8"; | |
| .ImageSelector{ | |
| display: inline-flex; | |
| position: relative; | |
| box-sizing: border-box; | |
| border: 1px solid #777; | |
| background-color: #fff; | |
| cursor: pointer; | |
| } | |
| .ImageSelector__display,.ImageSelector__preview,.ImageSelector__preview-child{ |
motsu0
/ 01html-str-change-notag.html
Last active
February 26, 2023 08:42
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="sample-outer"> | |
| <p class="sample">sample文章があります。</p> | |
| <p class="sample">sampleという文字だけ太字にしてみましょう。</p> | |
| </div> |
motsu0
/ 01js-countdown-timer.js
Last active
February 26, 2023 07:33
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 ミリ秒を表示するか否か |
NewerOlder