blog | SevenStyleWeb

CSSでプリント用のスタイルシートを書くことがいまいちない、この世の中だけど、Webサイトによっては、このプリント用のスタイルシートがすごく重要なものもあるんだと考える私。

例えば、資料的に使ってもらいたいような情報を提供しているサイトにおいては、この「プリントアウトする」という行為自体がクロスメディア戦略の一つになるのではないだろうか・・・。

なんてえらそうに言ってみてるけど、結局は、「プリントアウトしたほうが結構みやすいじゃん」ってことなんです。（個人的に）


なんで、このプリントアウトしたときの見栄えってのも気になる私。

じゃあ、どんな見栄えが必要かといえばまずは、「無駄なものは消す。」

例えば、プリントアウトしたときに、バナーなんてものは邪魔でしかないし、もしかしたら、ナビゲーションバーも不要のときもある。そこらは上手に情報整理する場所でしょう。
このバナーやらなんやらがあるせいで、プリントアウトしたときに、汚くなったり、紙資料としての価値が低くなったりするわけです。邪魔なものは消すということは必要です。
やり方としては、対象となるセレクタに対して、

display:none;

をすることになります。

続いてこれに付属して...ですが、「必要なものを出す」です。

例えば、webサイトではボタンというものは、意味があります。ユーザがクリックすれば、ハイパーリンクというインターネット独特の考え方で別のページへ飛べるからです。

でも、紙の上でそのボタンは果たして有効でしょうか？紙の上にあるボタンをおしても、当然ながらリンクされません。

では何が必要か？それは例えば、URL。時にはリンクページの説明でもいいでしょう。やり方は対象となるセレクタ（この場合はaタグが多いでしょうが...）に対して、

a:after{
    content:attr(href);
}

のようにcontentプロパティを指定してやることです。

ちなみに上記例では、aタグの後ろに、href属性で与えられている値を挿入しているという形になります。場合によっては、括弧をつけるなどして、見栄えをよくします。

しかし、ここで問題なのは、このやり方は、ブラウザ依存してしまうという点です。
特に...IEは反応しません。最近リリースされたgooglechromeは対応していました。IEは仕方ないと切り捨てる方法になりますが、僕自身、必要なものと考えています。


そして最後に「改ページ」のタイミング。
プリントアウトしたときによくあるのが、意味不明な部分での改ページです。

これを解決してくれるのが、page-break-beforeプロパティまたは、page-break-afterプロパティです。これは、要素の前後で改ページをしてくれるというものです。

例えば、h2タグの直前で改ページを行いたい場合などは、

h2{
    page-break-before:always;
}

とすれば可能です。

プリントアウトの際は、ブラウザ画面で見えるまま出力されたらいいというものではないでしょう。それはあくまでWeb主体の考え方。プリントアウトしてみてもらいたいようなコンテンツの場合は、そのときのスタイルまで気を配る必要があるでしょう。

こんなことを考えてみたのでした。

【参考資料】
Web標準の教科書　益子貴寛　著（p478-p485)

下のエントリーで紹介したサイトは、背景画像を上手に使って表現しているやつだけど、
最近時々見かけるのに、背景ではなく、画像自体（つまりは<img>タグでマークアップされたもの）を背景にもってきているものもある。

<img>タグでマークアップしたあと、絶対値指定とz-indexプロパティで位置と配置順を指定している。

今回のブックマークはその類。

背景画像をうまく使ったWebデザイン。
でっかい背景をこういう感じでつかうといいですね。

変にデジタルブックとか使わんで、こういうアシライでいくのもありだな。

以前東京の銀座で参加した、CSS Reloadedのスライドが公開されてたので、
皆さんにもということで・・・。

一応、許可は出ているみたいなので、ぜひごらんあれ。
CSS3のこととかいろいろ書いてあるよ。

出展などはこちら。

■出典元：CSS Reloaded
■著者；John Allsopp
■リンク：Web Directions East

ちなみに、私のCSS３に関する実験は以下よりどうぞ。（※ブラウザにより反応しませんのでご了承ください）
http://sevenstyleweb.com/labo/css3/

firefoxの2,3の切り替えができるアプリを発見。
でもマック版のみ。

winの方はないのかな？

とりあえず、メモ。

http://codecontortionist.com/software/2008/multifirefox-20.html

いまさらながら、属性値セレクタについて。
恥ずかしながら知らなくて、今回のWebCreatorsに記載されていて、目からうろこだったのでメモ。

TIPS088よりネタ引用。
例えば、内部リンクと外部リンクを見た目として分けたいときを考える。
つまり、

<p>ダミーテキストダミーテキスト<a href="http://sample.com">外部リンク</a>ダミーテキストダミーテキスト<a href="../hoge/hoge.html">ダミーテキスト</p>

みたいな構造をもつとき、

外部と内部の見分け方は、「http:があるかどうか」ということになる。
そこで登場するのが、属性値セレクタ。

この場合、「http:という文字列がhref属性の値の頭にあれば、このCSSを適用させる」という指示を与えてあげればいい。

んで、具体的にはどう書くかというと、

a[href^="http:"]{
    /*ここに書き込む*/
}

これで、外部リンクのときのみのスタイルシートが生成される。

ちなみに、これをブラウザ確認したところ、
IE6以前には対応できていない模様。チョロメ(googlr chrome)でも表示されました。

いまさらですが、お試しあれ。

以前アップしたCSS3のページをちょっと変えてみました。
時間をみつけて、さまざまな実験をしてみようと思いますので、見てみてくださいな。
ちなみに、動作の確認はあまりしてません。
safariでは確認できますので、そちらで試してみてください。（おそらく、google chromeでも動くと思います...。保障はしてません）

んで、CSS3の新しい情報が出てきたら、ちょこちょこ実験しますので、どうぞ。
間違っていたりしたら、ご指摘ください。

http://sevenstyleweb.com/labo/css3/

ずべてAjaxで作成したソニーのサイト。これまでのflashではなく、Ajax系でまとめあげている。ちなみに、javascriptを切ると、「有効にしてください」という文字が表示される。

技術的には、様々なライブラリを使っているという感じもするが、この大胆なリニューアルがちょっと気持ちいい。

ソースをみてみると、約２０個のjsを読み込んでいた。

記事にも取り上げられている。
□ソニーグループ、FlashやめてAjaxでリニューアル

コリスさんのサイトに、良質エントリー。

jQueryのプラグイン33+1選


もろもろJSライブラリが出ていたが、どうもやはり動きからみると、
jQueryが熱いようだ。

この中でも個人的にすきなのは、以下のもの。

■IE6でのPNG表現ツールとして参考
http://plugins.jquery.com/project/iFixPng2

■CSS3対応のものなので、まだ偏りはあるものの、気持ちいい動き。
http://paulbakaus.com/lab/js/coverflow/

■スライドボックス機能がついたlightbox的なもの
http://www.mopstudio.jp/demo/MopBoxDemo.html

■やっぱりページスクローラーは便利極まりない。
http://coliss.com/articles/build-websites/operation/javascript/296.html

WebStrategy　vol17を読んでいて、アクセス解析についていろいろ勉強中。

ってことで、表題のとおり、アクセス解析を行う方法についてメモ。

アクセス解析を行う方法は、大きくわけて「ログ型」「パケット型」「タグ型」があり、各方法は次のとおり。（以下引用）

ログ型はサーバにためられたリクエストログを集計するもの

パケット型はWebサーバの手前で、リクエストのやりとり（パケット）を取得して解析するもの

タグ型は読み込まれるページ自体にJavascriptでタグを組み込んでおき、必要なデータをサーバに送る方法

まだまだ勉強しないとまずそうだ。

ちょいとメモ。
DreamweaverのMT用プラグインのリンクを記載。
CS3用
８用


参考記事
http://www.thinkit.co.jp/article/101/3/

エラスティックレイアウトを行っているすごくいいサイト。
文字拡大をしても、大幅なレイアウトが変更されず、きれいに枠も拡大縮小する。
（※ただしやりすぎると、そりゃこわれる）

ブックマーク。

JQueryの強力ライブラリのinterface.js。
いまさらながらブックマークの意味も含めて、メモ。


http://interface.eyecon.ro/

ふとCSSのことを考えてて、「そういえば、opacityってどのブラウザでもいけたんだっけ？」と思いいろいろやってみたので、自分用にメモ。


opacityとは、透明度の指定をすること。
画像をhoverしたときに、なんとなく光った感じにしたいときは、
背景白の場合において、opacityを８０％くらいに設定するとそれっぽくなる。

opacity自体はCSS2のプロパティなので、基本的にブラウザは対応している。ただし、案の定IEは対応できていない。そのときは、filterを使う。つまり、主要ブラウザでopacityを表現するときのコードは以下のとおり。

※imgタグをマウスオーバーしたときに、透明度８０％に指定する場合
img:hover{
    opacity:0.8;
    filter:alpha(opacity=80);
}

filter:alpha(opacity=80)の部分がIE用。この書き方の場合は、％の値となる。

ilterは、IE用だから、CSSの整理のためにも、もしかしたら、ハック側のCSSに記載しておくといいかもしれない。ま、一行くらい同時に書き込んでも問題はないだろうけど、個人的には分けたほうが都合がいいかな...とも思う。

記事の中には、firefox対応のopacityはプレフィックスの-moz-をつけるという記述もあるけど、俺のテストしてみた限り、普通に書いても大丈夫だった。

また、このプロパティを使用すると、ちょっとIEではもたつくかな？といった感じをうけた。
最近のでいえば、GoogleChromeでも対応している。（ま、そうだろうけど）

久々にjavascriptのライブラリ・・・というか、関数を作ったので、また公開します。

久々にlaboの公開です。

よかったら使ってみてください。

■laboページ
http://sevenstyleweb.com/labo/index.html

■作成したプログラム
http://sevenstyleweb.com/labo/mklist/

コリスさんのサイトの中に、ページスクローラーの最新版がアップされてた。
（しばらくネットが使えてなかったので、いまさら・・・ですが）

http://coliss.com/articles/build-websites/operation/javascript/296.html

このページスクローラーは、本当に役に立つ。

使わせてもらおう。...んでいつか作ってみよう。