[B! 印刷] simsonsのブックマーク

pre 要素に対する印刷用 CSS

サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト（Preformatted Text）として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が

simsons 2008/06/03

リンク

印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]

印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。印刷用デザインをどうするか。当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。なお、文末にアックゼ

simsons 2008/05/19

リンク

[CSS]印刷用のCSSのフレームワーク -Hartija | コリス

Hartija - Css Print Framework Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> </textarea>

simsons 2008/04/14

CSS
印刷

リンク

印刷用CSSの書き方（基本編）：ADP

simsons 2007/12/02

リンク

TRANS [hatena] - 印刷用CSSをまとめてみた。

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

simsons 2007/05/22

CSS
印刷

リンク

はてなブックマーク

タグ

関連タグで絞り込む (6)

印刷に関するsimsonsのブックマーク (5)

お知らせ

今週のはてなブックマーク数ランキング（2024年8月第4週）

今週のはてなブックマーク数ランキング（2024年8月第3週）

今週のはてなブックマーク数ランキング（2024年8月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス