プリントできるWeb新聞




   Webで見て、そのままプリントしたい。    



自在なデザイン・レイアウトが可能なWebですが、プリントしてみると違う印象になりがちです。ひとつのページが長く続いている場合には、記事の途中で途切れてしまって、続きを別の用紙に印刷しなくてはならないのが普通です。

1紙面ごと、そのまま1枚の用紙にプリントできるようなWeb新聞の形式があったら便利です。プリントの出来栄えがきれいで、記事内容が読みやすくなります。実際に、当会で発信しているページを元に、その作り方をご紹介いたします。

  開いて、印刷プレビューでご確認ください ⇒ 初心者のための非課税投資‐NISA



    作成の手順


ひとつの画面(page)のなかに、何ページでも同じ大きさの紙面を入れて、その1紙面が1枚の用紙にプリントされるように設定します。画像を入れたり、見出しや写真を囲むスペースを設ける程度のごく簡単な形態です。   
                 

1.フォルダを新規作成して、paperとでも何でも好きな名前をつけます。このフォルダに、新聞内容を記述するHTMLファイルと、画像ファイルを納めるかたちにします。CSSファイルは用いずに、HTMLファイルにスタイルを記述するシンプルな形態をとります。

2.HTMLファイルのheadの部分に、スタイルを指定します。まず、bodyのなかにpageを設けることは、通常のHPと同じです。が、ここに様々なカラムではなく、同じ大きさの紙面となるページ(box)や、そのなかに入るタイトル部分(header)、テキストエリア(texterea)、見出しや写真の入るスペース(photo)などを設けます。複数の紙面に使われるのですから、クラス属性で指定します。

3.幅と高さについては、pageは、700pxにauto、紙面boxは、680pxに1030px、textereaは、620pxに870pxとしました。headerの高さは、60pxです。紙面のトップとボトムには、20px、40pxのマージンを設けます。地の文字は、16px、p文字は、18pxです。
 PCだけではなくスマホでも見やすい形式を考えました。ですが、各ブラウザによって見え方が少しずつ違いますので、自分が使用している機器に合わせて調整します。

                               

  前のページへもどる 
                  トップページへもどる