あるカメラの先輩から、「michyのブログ、印刷するのにうまくいかない…時間があるときにぜひ直して」という要望を受けて、早1年…ごめんなさい、いま思い出し、やっと対応しました。

簡単に、ご説明します…っていうか、超簡単な話です。
<link rel=”stylesheet” href=”style.css” type=”text/css” />
って、CSSファイルを読み込ませるためのタグなんですけど、ヘッド部分に書いとくものですけどがー、
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” />
とかって、メディアタイプを指定して、CSSを読ませることができます。
何も書かなければ、すべてのメディアに読ませることになりますが、printを指定すれば、印刷時に読んでくれます。

• パソコンのディスプレイで表示させているときは、「media=”screen”」
• 印刷のときは、「media=”print”」
• 音声出力のときは、「media=”aural”」
• テレビのときは、「media=”tv”」

など、cssの振り分けができます。

どんな内容を掲載するサイトなのか、ユーザーはどんな人たちなのか、を考慮して、サイト全体を作っていきます。
例えばこのサイトは、祭りの話やwebの話、勉強したり、ごちゃごちゃしているわけですが、このweb勉強部分でサイトを印刷したい方がでてくることを想定し、印刷用CSSを作成しておくべきでした。
他にも、目が見えにくい人達だったとしても、何かしらの興味を持っていただき、音声ブラウザを使用してサイトを利用している可能性もあります。（事実は、アクセス解析で確認すればすぐわかりますね。）そういう方も利用者として配慮するべきだと作成者、クライアントが考えるのであれば、音声ブラウザ用CSSを作成しておくべきです。

すべてのサイトに印刷用CSSや音声ブラウザ用CSSが必要というわけではありません。
印刷して利用する方がいるような内容のサイトなのか、目が見えにくい方が利用するようなサイトなのか
例えば写真をたくさん掲載し、目が見えなければ、利用できないサイトであれば、音声ブラウザに対応しなくてもいいでしょう。
主なユーザーを基軸に合わせ、サイトを構成し、デザインし、コーディングすることは、SEOとしても、利用者流出を防ぐ方法としても大切なことです。

そして、今回の印刷用CSSで配慮した部分としては…当たり前のことなんですけど、「操作する部分は不必要」であることですね。
ヘッド部分にある、「RSS」とか「サイトマップ」とか「検索窓」なんてものは、要りませんし、サイドバーでウロチョロしている最新記事ってのも要りません、コメントフォームも、フッターメニューも要りませんので、全部まとめて「display: none;」してあります。
横幅については、印刷するときにIEとかでうまいことサイズ調整してくれないので、A4縦に合わせた「width: 640px;」にしてあります。
ベース背景も印刷するときに、無駄なインク使わせちゃ行けないので、白。それに伴い、リンクの黄色を赤に、通常テキストも黒に近い色。文字サイズについては、特に問題なしかな。

ということで…アクセシビリティに興味バリバリの私…このサイトデザインもそろそろ…直すべきかもしれませんわっ