アプリ版:「スタンプのみでお礼する」機能のリリースについて

センタリングをしたページを作成していますが、印刷をする際(用紙方向縦)には左寄せで印刷できるようにしたいと思っています。

例としては、e-bankさんのトップページを考えています。e-bankさんのトップページを印刷プレビューしていただくとお分かりいただけるかと思いますが、ブラウザで表示される際はページ全体がセンタリングされていて、印刷する際はセンタリングが解除されて(??)、ページ全体が切れることなく印刷されます。

http://www.ebank.co.jp/

ただ、私が作成したhtmlファイルですと、印刷(プレビュー)した際も、センタリングされたままの状態で、左に余白がありページ(横幅700pix)が途中で切れてしまいます。
hemlファイルには、
~前略~
<body>
<center>
<table width="700" border="0" cellpadding="2">
<tr>
<td bgcolor="#993300">あ</td>
<td bgcolor="#993300">い</td>
</tr>
</table>
</center>
</body>
~後略~
もしくは、
~前略~
<body>
<div align="center">
<table width="700" border="0" cellpadding="2">
<tr>
<td bgcolor="#993300">あ</td>
<td bgcolor="#993300">い</td>
</tr>
</table>
</div>
</body>
~後略~
と記述してセンタリングしましたが、どちらも印刷の際もセンタリングされたままでした。

どうしたらe-bankさんのトップページのように、左に余白が入らずページ全体が印刷されるようになるでしょうか…。ご存知の方がいらっしゃいましたら、宜しくお願いします。

A 回答 (1件)

こんな感じですかね



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>html test</title>

<meta http-equiv="Content-Style-Type" content="text/css;charset=Shift_JIS">
<!-- 外部スタイルシート -->
<!--<link rel="stylesheet" type="text/css" href="パス" media="all">-->
<!-- プリント用外部スタイルシートの場合 -->
<!--<link rel="stylesheet" type="text/css" href="パス" media="print">-->
<style type="text/css">
<!--

@media all {
/* すべてのスタイル */
* {
margin: 0;
padding: 0;
}
body {
font-size: medium;
color: #000;
background-color: #fff;
}
#main {
width: 50%;
margin: 0 auto;/* Strictでのセンタリング */
}
table, th, td {
border-width: 1px;
border-color: #000;
border-style: solid;
}
table {
width: 100%;
}
}
@media print {
/* プリント時のスタイル */
#main {
margin: 0;/* センタリング解除 */
}
}

-->
</style>

</head>

<body>

<div id="main">
<table>
<tr>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>
</div>

</body>

</html>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!!教えていただいたやり方で出来ました!!
感激です(>(エ)<)

mediaでallとprintと振り分けることが出来るんですね。知りませんでした…。勉強不足を痛感です。

私の説明が分かりづらく、誰にも答えていただけなかったらどうしよう…と思っていましたが、ご理解いただけたようで感謝いたします。本当にありがとうございました!!

お礼日時:2007/01/30 21:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!