Skip to content

Instantly share code, notes, and snippets.

View 01rgb-splitter.css
.control{
text-align: center;
}
.control__row{
margin: 40px auto;
overflow-x: auto;
}
.input-color{
width: 100px;
height: 30px;
View 01web-sandglass.css
.sandglass{
box-sizing: border-box;
width: 90%;
max-width: 400px;
margin: 100px auto;
position: relative;
user-select: none;
}
.sandglass::after{
View 01twitter-search-command.css
.settings-row{
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 8px;
padding: 12px;
margin: 12px 0;
background-color: #eee;
}
.label-input{
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
#quiz{
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
.settings-row{
margin: 12px 0;
}
#sel-width,#sel-height{
width: 60px;
}
#bt-make{
cursor: pointer;
}
/* */
View 01make-book-information.css
.img-sample{
width: 150px;
border: 1px solid #777;
}
/* */
.block{
box-sizing: border-box;
padding: 16px;
margin: 20px 0;
View 01tanzaku-maker.css
#input{
display: block;
width: 100%;
height: 100px;
resize: vertical;
font-size: 16px;
}
.settings{
margin: 8px 0;
View quiz-maker.json
[
{
"question": "次のうち、あ行のひらがなはどれでしょうか?",
"answers": [
"","","16","",""
],
"index-answer": 3
},
{
"question": "0から100までの整数を全てかけると答えは?",
View 01quiz-maker.css
@charset "utf-8";
:root{
--main-color: #0288D1;
--sub-color: #B3E5FC;
--attention-color: #D32F2F;
--correct-color: #D32F2F;
--wrong-color: #303F9F;
}
#quiz{
width: 100%;