http://kimizuka.github.io/
http://kimizuka.github.io/
前回つくったGitHubページですが、
<link rel="stylesheet" href="./css/main.css" media="screen"> <link rel="stylesheet" href="./css/print.css" media="print">
と、PCディスプレイ用のCSSとプリント用のCSSをわけています。
* { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; color: #000; font: 20px "Hiragino Maru Gothic ProN" Meiryo, Arial, sans-serif; letter-spacing: .15em; } .global.wrapper { position: absolute; top: 50%; left: 50%; margin: -25.5mm -44.5mm; border: solid .5mm #e3e3e3; width: 89mm; height: 51mm; } .title { position: absolute; top: 35%; left: 0; width: 100%; text-align: center; } .title:after { display: block; position: absolute; top: 150%; width: 100%; font-size: 50%; content: "http://kimizuka.github.io"; letter-spacing: .05em; text-align: center; } .global.footer { display: none; }
プリント用のCSSはこんな感じで記述していて、89mm × 51mm と名刺サイズで印刷できるように調整しているのです。
また、印刷時にはサイトのURLを表示しています。
ただし、僕の環境で印刷した際は 95mm × 55mm と 4mm ずつずれが生じました。
ひきつづき調査していきます。
今回は以上です。