[HTML/CSS]通常のCSSと、印刷用（プリント用）のCSSを分けて作成する方法

メディアタイプを指定して記述することで、通常と印刷用のCSSを分けることができます
プリンター印刷時は印刷用のCSSを読み込むことで、印刷時特有の不具合（レイアウト崩れなど）が修正可能です

一例として、
通常のCSSのパスを、css/style.css
印刷用のCSSのパスを、css/print.css
とします

css/print.css の中身は通常の記述でOKです

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/print.css" media="print" />

1 2	<link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<body>

</body>

</html>

[参考]
http://on-ze.com/archives/1717

この記事を書いた人

yellow

パズルファクトリー制作ノート

[HTML/CSS]通常のCSSと、印刷用（プリント用）のCSSを分けて作成する方法

この記事を書いた人

新着記事

Practice is better than precept.