「こんなものが作りたい」 「こんな印刷・加工がしたい」など お気軽にご相談ください。 企画・デザイン・仕様・価格・納期など、 柔軟に対応いたします。
![東京リスマチック](https://cdn-ak-scissors.b.st-hatena.com/image/square/d25213db89ed195cce6f7763d7f62d180af1a6a5/height=288;version=1;width=512/http%3A%2F%2Fwww.lithmatic.net%2Fimages%2Fshare%2Fl_logo200200.jpg)
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ!」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー(嘘かホントかは知らない)あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ!検索対策っ!さっさと検索対策~!って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
申し訳ございません。 只今メンテナンス中です。
日本HP、IE/FirefoxでWebページを無駄なく印刷「HP Smart Web Printing」v4.0 日本ヒューレット・パッカード(株)は16日、Webページを無駄なく印刷できるIE/Firefox用の拡張機能「HP Smart Web Printing」v4.0を公開した。Windows XP/Vista上のIE 6/7および「Firefox」v2以降に対応するフリーソフトで、現在同社のホームページからダウンロードできる。なお、ダウンロードにはメールアドレスの登録やアンケートへの回答が必要。 Webページを印刷する際、バナー広告やサイドメニューがあるために目的の部分がうまく印刷範囲に収まらない、たった1行のテキストのおかげで印刷用紙が2枚になってしまう、といったことがよくあるだろう。また、「Firefox」は残念ながら印刷機能が弱く、HTMLの構造によってはWebページが途切
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方(基本編)もかなり(むしろほとんど)参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
IE6 でブラウザに表示しているページを印刷する時、次のような「このページのスクリプトでエラーが発生しました。」「オブジェクトでサポートされていないプロパティまたはメソッドです。」というエラーが発生することがあります。 調べたところ、マークアップの id="tags" という id 属性の存在が影響していることが判明しました。 実は当ブログで配布しているテンプレートで、この ID 属性を使用しています。 現在、テンプレートをご利用の方は、(閲覧ユーザが)IE6 で印刷する場合を考慮し、「サイドバー」に設定しているタグクラウドの id 属性値(赤色部分)を、他の値(tags2とか)に変更されることをおすすめします。 <dd class="side"> <ul id="tags"> <MTTags> <li class="module-list-item taglevel<$MTTagRank
サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト (Preformatted Text) として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が
マイクロソフトのユニバーサルプリンタドライバをベースにオープンソースで開発されており、印刷用のドライバとしてインストール可能。出力はBMP・PNG・JPEG・TIFF・PDFの各形式で可能。印刷結果を事前に画像ファイルとして確認できるので、印刷プレビューのないソフトなどから印刷する際にかなり便利。また、印刷結果がそのまま画像ファイルになるので加工も自由自在です。意外に便利なのでオススメ。 インストールと使用方法は以下から。 SourceForge.net: Virtual Image Printer driver 上記サイトからダウンロードしたZIPファイルを解凍すると「setup.exe」が出てくるので実行、「OK」をクリック 「Next」をクリック 「Install」をクリック インストール中 ドライバのインストールが始まるので「続行」をクリック 「Finish」をクリック すると自動
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ?」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
以前、絵文禄のことのはさんのところで、サイトの横幅を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はある程度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く