公太郎Webページとプリントについて再考してみたTwitterFacebookGoogle+はてブ5Pocket6HTMLは基本的にはテキストをマークアップするための言語。性質上単調な構造となり、そのHTMLに対して、CSSを使用し色づけや段組などのレイアウト制御を行います。枯れたテーマですが、Web制作者目線からの、プリントした際の挙動や傾向と対策などを再考。画面上ではバッチリレイアウトされていても、印刷するとガタ崩れ...御社はこのクオリティなんですか?などと聞かれるとこのクオリティで作っているため、イロイロ考えさせられる部分があります。環境の違い、設定の違いにより敷居が高い『見たままプリント』テーブルレイアウト時代はガッチガチのレイアウト割なので、プリント崩れもまだマシでしたが、今現在の主流であるCSSレイアウトによる制御から、印刷時に画面との表示差違がでるようになりました。プリントはブラウザ表示とは違い、ユーザーの設定に大きく依存します。基本的に『画面=紙』を再現するならば、背景表示は必須です。Explorerなど、デフォルトではオフになっているため、ひとまずココで要望の敷居が高くなります。2.ヘッダー・フッターの表示ユーザー側で、プリント設定でヘッダーやフッターを含めてプリントするケースも多いです。(サイト名やURLなど)これにより、1枚の紙に納まる情報量が変動します。ヘッダー、フッターを入れ込むことで改ページにも気をつかうようになります。中途半端な部分でページにまたがる場合、CSSで強制的に改ページをしたり、改ページを禁止したり。always;}コレの悩ましいところが、ユーザー設定のヘッダー・フッターのプリント有無でコンテンツが収まる領域が変動するということです。ユーザー側の設定の変更や、コンテンツの更新により改ページが意図しないところで行われたりする場合があるので、ちょっと危険です。一部表示だけで紙を1枚使ったり。Web制作会社のプリントプリントの基本的な使いどころとしては、当然画面の情報を紙に出力して保存や持ち出し。みんなやっていることです。HTMLとCSS、基本的にはスクリーン出力を最重要視して作成するケースが多いため、複雑なレイアウトや微調整時にはけっこうトリッキーなCSSを使用しちゃいます。そのため、プリント時にはfloatがちょっとおかしな事になったり。これ、画面と違うよなんてケースも少なくありません。コレはコレで調整するとして、スクリーン表示の校正からいつの間にかプリント用校正に話がすり替わってしまいます。紙ベースで校正するならば、やっぱり画面と同じイメージ画面に対する校正なので、やはり、画面のイメージをそのままもっていくのが望ましいです。SaverFirefoxのアドオンで、ブラウザー内の表示を見たまんまキャプチャして、ファイル化してくれます。png形式にも対応しているので、ロスレスで保存可能です。嬉しいのが、縦にスクロールしても全てのコンテンツを1ファイルに収めてくれるところ。Photoshopなどでの切り貼りが不要です。Basic版とPro版がありますが、無料のBasic版で十分対応可能です。プリントCSSの対応、技術的にはprint.cssなど、プリント専用CSSを用意します。印刷用CSSをまとめてみた。TRANSそもそもプリントに対応するレギュレーションを設定キレイにプリントするとして、重要なのがどこまで対応するのかということになります。画面と同じく、見たままプリント必要な情報を整理して出力/不要な情報は非表示など、プリントに最適化した情報をプリントだいたいとっちかになるかと。1.画面と同じく、見たままプリント(完全表現)コレの問題としては、ユーザー側の設定に依存する部分が多すぎるため、完全対応は現実的ではないというところです。marginやpaddingのズレや飾り背景などを全ブラウザ、IEにおいては各種バージョンに対して調整することは至難の業です。ブラウザーごとにこれまた挙動が変わるため、ひとつひとつ潰していくという途方もない作業になります。Chromeに対してハックするなど思わぬ作業も出てきたり。画面のサイズは決まっていますが、ブラウザーには“スクロール”という概念があり、データそのものがフレキシブルに増減します。これをまったく同じようにA4に収める、となるとWebページの構造そのものを見直す必要が出てくるため『Webサイト=そのまま紙へ完全表現』は難しいです。印刷専用のレイアウトを提供するプリント専用CSSを準備すると、不要な部分を消したり、基本の書体を明朝系にするなど、制作者都合でプリント結果を提供することができます。エンドユーザーはプリントアウト=画面と同じモノを印刷で捉えているケースが多いはずで、プリント専用CSSを適用するその選択肢は必ずしも良策とは言えません。参考になりそうなTipsページ内の印刷ボタンが押された時だけprint.cssを適応するまとめ画面イメージ優先なのか、情報優先なのか、とりあえずクライアントの意向を根底に持ちつつ基本方針を固めるJavaScriptを併用するなどもよさそう完全再現は非現実的なので、“どこまですりあわせるか”を事前に約束IE6はzoomプロパティを入れておけばなんとなく大丈夫そうそもそもエンドユーザーにとっての良策は?も忘れない関連する投稿Webページをプリントする際に、不要な部分を消してからプリントできる便利なブックマークレット長いページでもすべて1枚のスクリーンショットを作成してくれるアプリ「Paparazzi!」Windows不要!MacだけでIE9の表示確認をできるサイト基礎から覚える、深く理解できる。Jimdoデザインブックかっこいいだけではなく、人が集まるホームページを作る!「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。基礎から覚える、深く理解できる。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。Lionで再開機能を無効にするKDDI主催のセミナー『利益をあげるウェブサイト提案力!』に参加してきたRECOMMENDこちらの記事も人気です。2013.3.13基礎から覚える、深く理解できる。kotaログ画像になっている表組みを、表組みのままテキスト抽出する方法(WordのOCR機能)最近のOCR機能(テキストを読み取ってデジタルデータに変換する)は精度もよくなり、なにより手軽に取り込めるものも増えてきました。ドキュメントにもこの機能が搭載されています。...Macの「プレビュー」アプリを使って、お手軽3ステップでハイライト表示の画像を作るブログで、画面の説明をするときや、特定の箇所の強調をしたい場合は、いくつかの手法があります。(dodocool)Amazonでスマホの周辺機器などを販売している「dodocool」さんより極小スピーカーのサンプルをご提供いただいたため、使用感やデザインについてのレビューをしていきます。ACアダプタ(dodocool)Amazonでスマホの周辺機器などを販売している「dodocool」さんよりモバイルバッテリーのサンプルをご提供いただいたため、使用感やデザインについてのレビューをしていきます。dodocoolは、アメリカ、イギリス、...持ち運びに超絶便利な5000mAhモバイルバッテリー(dodocool)Amazonでスマホの周辺機器などを販売している「dodocool」さんよりモバイルバッテリーのサンプルをご提供いただいたため、使用感やデザインについてのレビューをしていきます。