Skip to content

Instantly share code, notes, and snippets.

View 01rgb-splitter.css
text-align: center;
margin: 40px auto;
overflow-x: auto;
width: 100px;
height: 30px;
View 01web-sandglass.css
box-sizing: border-box;
width: 90%;
max-width: 400px;
margin: 100px auto;
position: relative;
user-select: none;
View 01twitter-search-command.css
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 8px;
padding: 12px;
margin: 12px 0;
background-color: #eee;
View 01demo-raining-particles.html
<button id="bt-start">降らせる</button>
<button id="bt-stop">止める</button>
<script src="pathto/raining-particles.js"></script>
View 01silhouette-quiz-maker.css
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 90vh;
border: 2px solid #777;
background-color: #fff;
-webkit-tap-highlight-color: transparent;
View 01maze-generator.css
margin: 12px 0;
width: 60px;
cursor: pointer;
/* */
View 01make-book-information.css
width: 150px;
border: 1px solid #777;
/* */
box-sizing: border-box;
padding: 16px;
margin: 20px 0;
View 01tanzaku-maker.css
display: block;
width: 100%;
height: 100px;
resize: vertical;
font-size: 16px;
margin: 8px 0;
View quiz-maker.json
"question": "次のうち、あ行のひらがなはどれでしょうか?",
"answers": [
"index-answer": 3
"question": "0から100までの整数を全てかけると答えは?",
View 01quiz-maker.css
@charset "utf-8";
--main-color: #0288D1;
--sub-color: #B3E5FC;
--attention-color: #D32F2F;
--correct-color: #D32F2F;
--wrong-color: #303F9F;
width: 100%;