WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:印刷の設定について

MIMI [MAIL] [WriteDate : Thu Jul 5 09:34:54 2001]

 はじめまして。いつもBBS参考にさせてもらっています。
ところで、HPをA4サイズの用紙で印刷すると端が切れてしまうのですが、どの用紙でも端が切れないようにすべて印刷する方法ってありますか?いろいろ調べてみたのですが、どうしても分かりません。どなたか
教えてください!
*ページの幅は変えないで、できますか?


けい [MAIL] [URL] [WriteDate : Thu Jul 5 10:24:01 2001]

ご自分のサイトの文書について、ということでよろしいでしょうか。

それなら、印刷用とスクリーン表示用、2種類のスタイルシートを作って適用し分けるというのはいかがでしょうか。

たとえば以下のようにすると、画面上では黒背景白文字で、one-day クラスの div 要素の中身が横幅 400px で固定されますが、印刷時には白背景黒文字になり、横幅の指定も無効になります。

―――――――――――――――――――――――――――――
HTML の内容↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>My Diary</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="StyleSheet" href="screen.css" media="screen">
<link rel="StyleSheet" href="printing.css" media="print">
</head>
<body>
<h1>My Diary</h1>
 <div class="one-day">
  <h2>5th July</h2>
   <p>foo</p>
   <p>bar</p>
 </div>
 <div class="one-day">
  <h2>4th July</h2>
   <p>foo</p>
   <p>bar</p>
 </div>
</body>
</html>

―――――――――――――――――――――――――――――
screen.css の内容

body{
    background-color:#222;
    color:#fff;
}
div.one-day{
    width:400px;
    margin:2em;
    padding:0.2em;
    border:solid 1px #fff;
}

―――――――――――――――――――――――――――――
print.css の内容

body{
    background-color:#fff;
    color:#000;    
}


MIMI [MAIL] [WriteDate : Thu Jul 5 12:30:24 2001]

 けいさん、アドバイスありがとうございます。
私は、ホームページビルダーを使用して作業しているのですが、
スタイルシートを2つ作成することが出来ませんでした。手書きで
書こうと思ったのですが、今ひとつ分かりません。よろしければ
もう少し、詳しく教えてください。


カヅサツ [URL] [WriteDate : Thu Jul 5 17:03:21 2001]

けいさんが例示された
CSS の内容をメモ帳やシンプルテキストなどのテキストエディタに記述し、
それぞれ、screen.css と print.css という名前を付けて、
HTML と同じディレクトリ(フォルダ)に保存してください。


けい [MAIL] [URL] [WriteDate : Thu Jul 5 17:03:47 2001]

>手書きで書こうと思ったのですが、今ひとつ分かりません。

手書きの方法を知りたい、ということでしょうか。
これについては色々な詳しい解説サイトや書籍がありますので、もし本格的に勉強したいとお考えでしたらそれらをご覧ください。ここでは簡単に説明するに留めておきます。なお、以下では MIMI さんが Windows 環境を利用しているものと仮定して話を進めます。

1. まず、メモ帳を開いてください。「スタート」⇒「アクセサリ」⇒メモ帳で起動します。

2. メモ帳に上記 HTML の内容をコピー&ペーストで貼り付け、「ファイル」⇒「名前を付けて保存」で保存します。「ファイルの種類」は「すべてのファイル」とし、拡張子は .html とします。ここでは仮に sample.html というファイル名にしておきます。

3. 同様にメモ帳を開き、上記 screen.css の内容を貼り付け、screen.css という名前で保存します。なおこの際 screen.css を sample.html と同じディレクトリ内に保存してください。

4. 3と同様、printing.css を作成します。

以上で終了です。CSS に対応しているウェブブラウザ (ex. Mozilla) で sample.html を開いてみてください。スクリーン表示時には screen.css で宣言した通りに、印刷時には printing.css で宣言した通りに文書が出力されるはずです。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World