css 印刷用CSS

Posted 2021-05-13

@media print {
 
    /* 印刷時に非表示にする要素の指定をする */    
    body.print div.print-none ,
    body.print div.navbar,
    body.print hr,
    body.print div.footer,
    body.print span#anken-toggle-mark {
    	display: none;
    }
    
    /* 印刷時には不要な色つけてる要素の無色化してみたり */    
    body.print .title-label {
    	background-color: transparent;
    }
 
    /* 印刷用の基本設定 */        
    body.print {
    	width: 700px;
    	font-size: 8pt;
    	color: #000;
    	background: none;
    	margin: 0px;
    	padding: 0px;
    	padding-top: 0px;
    	line-height: 12px;
    }
    
    body.print div {
    	margin: 0px;
    	padding: opx;
    }
        
    /* anchorタグの装飾キャンセルしてみたり */    
    body.print a {
    	text-decoration: none;
    	color:#000;
    }
 
    /* Web表示用に文字サイズ変更してた要素の文字サイズ修正とか */        
    body.print span.lead,
    body.print h3 {
    	font-size: 10pt;
    }
 
    /* table要素に対する印刷用指定をしてみたり */    
    body.print table {
    	border: 1px solid #000;
    	border-collapse: separate;
    }
 
    /* table headerの文字強調定義のキャンセル */    
    body.print table th {
    	font-weight: normal;
    }
    
    /* table配下の特定の要素に対する指定をしてみたり */
    body.print table th:first-child,
    body.print table tr td:first-child {
    	border-color: #000 #000 #000 transparent;
    }
 
    body.print table th,
    body.print table td {
    	line-height: 12px;
    }
 
    /* 強制改ページの指定 */
    body.print div#estimate-detail {
    	page-break-before: always;
    }
 
}