Skip to content

Instantly share code, notes, and snippets.

View 01demo-draganddrop.css
.board{
margin: 0 auto;
border-collapse: collapse;
}
.board-td{
box-sizing: border-box;
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #000;
View 01spread-page-maker.css
.input-area{
margin: 40px 0;
}
#input-file,#message{
display: block;
margin: 8px 0;
}
#input-file-box{
display: none;
justify-content: center;
View 01reversi-remember-practice.css
#bt-fullscreen{
display: block;
padding: 8px 12px;
margin: 20px auto;
cursor: pointer;
}
#screen{
box-sizing: border-box;
height: 95vh;
border: 1px solid #777;
View 01digit-sum-root.css
#input-num{
display: block;
height: 1.5rem;
margin: 20px auto;
}
.output{
box-sizing: border-box;
width: 90%;
margin: 20px auto;
border: 2px solid #777;
View 01brain-training-01.css
.rule{
list-style-type: disc;
margin-left: 32px;
}
/* */
#play-area{
box-sizing: border-box;
height: 90vh;
position: relative;
border: 1px solid #ddd;
View 01scoreboard.css
#screen{
display: flex;
flex-direction: column;
height: 300px;
-webkit-tap-highlight-color: transparent;
}
#scoreboard{
flex-grow: 1;
display: grid;
grid-template-columns: 1fr .6fr .6fr 1fr;
View 01draw-triangle.css
#canvas{
width: 100%;
border: 1px solid #ddd;
}
.sub-area{
box-sizing: border-box;
margin: 20px 0;
border: 2px solid #aaa;
}
.sub-title{
View 01make-pair.css
#input-name{
display: block;
width: 80%;
min-width: 80%;
max-width: 80%;
height: 150px;
margin: 0 auto;
}
#sel-times{
display: block;
View 01nandemo-kuji.css
#screen{
height: 500px;
border: 1px solid #333;
user-select: none;
background-color: #fff;
}
#screen-inner{
height: 100%;
display: flex;
justify-content: center;
View cont-10.html
<style>
#cont-10{
z-index: 3;
clip-path: polygon(100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%);
transition: clip-path 1s;
}
#cont-10.moved{
clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
}
</style>