Skip to content

Instantly share code, notes, and snippets.

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%;
View 01demo-quiz-maker.html
<!-- head内 -->
<link rel="stylesheet" href="pathto/quiz-maker.css">
<style>
#bt-start{
display: block;
margin: 30px auto;
cursor: pointer;
}
#bt-start.s-hide{
display: none;
View 01scratch-card.css
#card{
display: grid;
grid-template-columns: repeat(3,1fr);
row-gap: 5%;
column-gap: 5%;
width: 90%;
margin: 0 auto;
padding: 5%;
position: relative;
View 01contact-form-01.css
.contact{
box-sizing: border-box;
margin: 0 auto;
}
.contact input{
cursor: pointer;
}
.contact__unit{
border: 1px solid #aaa;
}
View 01make-near-color.css
.settings{
margin: 12px 0;
}
#input-color{
vertical-align: middle;
}
.settings-unit{
display: inline-block;
margin: 0 4px;
}
View 01make-gradation-color.css
.settings{
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.settings-unit{
display: inline-block;
margin: 0 4px;
}
.settings-type{
View 01web-soroban.css
#display{
display: flex;
flex-direction: column;
justify-content: space-evenly;
max-height: 90vh;
background-color: #fff;
}
#soroban-outer{
display: flex;
flex-direction: column;
View 01compare-two-image.css
.input-file{
display: block;
margin: 16px 0;
}
.message{
padding-left: 12px;
color: red;
}
.img-preview{
width: 100px;
View 01yaminabe-kuji.css
#input-cont{
display: block;
height: 100px;
resize: none;
}
#input-cont,#output{
box-sizing: border-box;
width: 90%;
margin: 20px auto;
}
View 01web-cracker.css
.cracker-outer{
width: 100%;
height: 90vh;
user-select: none;
}
#cracker{
width: 100%;
height: 100%;
object-fit: contain;