みかづきブログ その3

3ヶ月つづけてみました。

プリント用のCSSを書く


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を表示しています。

f:id:kimizuka:20150120180454p:plain

ただし、僕の環境で印刷した際は 95mm × 55mm と 4mm ずつずれが生じました。
ひきつづき調査していきます。



今回は以上です。