
センタリングをしたページを作成していますが、印刷をする際(用紙方向縦)には左寄せで印刷できるようにしたいと思っています。
例としては、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さんのトップページのように、左に余白が入らずページ全体が印刷されるようになるでしょうか…。ご存知の方がいらっしゃいましたら、宜しくお願いします。
No.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>
ご回答ありがとうございます!!教えていただいたやり方で出来ました!!
感激です(>(エ)<)
mediaでallとprintと振り分けることが出来るんですね。知りませんでした…。勉強不足を痛感です。
私の説明が分かりづらく、誰にも答えていただけなかったらどうしよう…と思っていましたが、ご理解いただけたようで感謝いたします。本当にありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Excel(エクセル) エクセル2013「次のページ数に合わせて印刷」が小さすぎる 9 2023/03/28 10:18
- Excel(エクセル) Excelであるシートだけ印刷できない 1 2022/04/01 09:04
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの一部分のセルだけに...
-
html でのテキスト結合について
-
同じwidth=200でもセル内の文字...
-
tableタグとformタグの組み合わせ
-
[css]tableのtr、10行ごとに背...
-
<img>タグにCSSのclass設定可能?
-
画像を並べて配置したい
-
trとtrの間
-
Dreamweaver デザインビューの...
-
VBAによるIE操作でgifをクリッ...
-
IEでテーブル内のテキストが...
-
テーブルタグの中にdivを含めて...
-
FOMA対応サイトでの背景指定の...
-
テーブルの中身がないセルについて
-
bodyで一括指定したものの部分...
-
tableタグ内で、空白セルでも罫...
-
テーブルデータのスクロール
-
TRタグの余白をcssで設定するには
-
CSSで特定のテーブルだけに...
-
HTMLについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
cssで、テーブルのtdの中の文字...
-
htmlのボタンを左寄席にしたい
-
td要素内のdiv要素をセンタリン...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
divで囲んだ文字が消える
-
<img>タグにCSSのclass設定可能?
-
vbscriptで時計を作りたい
-
Firefoxを使ってるのですがズー...
-
tableがbodyにはみ出る。。
-
Visual Studio で CLR 開発でデ...
-
Dreamweaver デザインビューの...
-
リストの記号を括弧付きの文字...
-
表とリスト(ulとtable)の違い...
-
Tableタグで作成した表の縮小
-
デーブルが延びる
おすすめ情報