Skip to content

Instantly share code, notes, and snippets.

@motsu0
Created February 15, 2020 06:01
Show Gist options
  • Save motsu0/9548116081748f47634e591faa6f7e18 to your computer and use it in GitHub Desktop.
Save motsu0/9548116081748f47634e591faa6f7e18 to your computer and use it in GitHub Desktop.
.a4-page{
padding: 0 50px;
}
.a4-page+.a4-page{
border-top: 1px solid #333;
}
.page-title{
margin: 20px 0;
text-align: center;
font-size: 1.2rem;
}
.ans-outer{
text-align: right;
margin-bottom: 20px;
}
.ans-area{
display: inline-block;
width: 4.5em;
border-bottom: 1px solid #333;
text-align: left;
}
.ans-area::before{
content: "A. ";
}
.hide{
display: none;
}
@media print{
body{
height: 200%;
}
#a4-outer{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
letter-spacing: 0;
font-size: 0;
}
.a4-page{
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: 10mm 20mm;
background-color: white;
border-bottom: 0;
letter-spacing: 2px;
}
.a4-page+.a4-page{
border: none;
}
.page-title{
margin: 0;
flex-grow: 2;
font-size: 24px;
}
.que,.ans-outer{
flex-grow: 1;
font-size: 20px;
}
}
<button id="disp-ans">解答を表示</button>
<div id="a4-outer">
<div class="a4-page" >
<!-- コンテンツ(今回はjsで生成) -->
</div>
<div class="a4-page" >
<!-- コンテンツ(今回はjsで生成) -->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment