備忘録:印刷用のCSS

現在、仕事で作成しているjQueryコンテンツで印刷機能の必要性があったので色々メモ。
サイトカラーが淡い色のため、そのまま印刷すると(特に白黒印刷)著しく可読性が
落ちるので、印刷用の画面を別途用意することにしました。しかし…
 

メディアクエリはIE9以降でないと利用できない

ざっと調べた結果、印刷対策にはメディアクエリを利用して印刷用のCSSを用意するとのこと。
しかしメディアクエリはcss3のためIE9以降でないと利用できないとのこと…。
 
ですが「css3-mediaqueries.js」を利用すればIE8以前でもメディアクエリが
利用できることが分かりました。注意点としてはlinkやimportの指定には対応していないこと。
→参考:メディアクエリをIE7、IE8でも使えるようにする
 
 

IE8以前でも部分的にメディアクエリに対応している?

でもってIEの開発者ツールを利用してIE7,8で動作確認。きちんと機能しています。
しかし、試しにcss3-mediaqueries.jsの読込をやめても、きちんと機能してしまいます…。
何故?
 
気になったので、開発者ツールでなく実際の古いブラウザで確認しようと思い
押し入れにしまってあるwindowsXPマシンをセットアップ。でもって検証(IE8)。
問題なく機能しているのを確認。さらにIE7で確認しようとするも、IE8がインストール
されているとIE7がインストールできない…。
 
なのでネットで情報収集。
以下のサイトの中程に、IE6は印刷時に画面をいい感じに縮小してくれないので
ページ内に納まるように印刷時にのみ縮尺を変更するテクニックを紹介しています。
→参考:印刷対応サイト
 
ここで@mediaを利用しているので「あれ?IE9以降ではないの?」と思いリファレンスサイト
で対応状況を確認。@mediaを利用して印刷用のcssを利用するのはIE5.5から可能という
ことが判明!
→参考:とほほのCSS「@media」
 
 

結論

メディアクエリと@mediaは別モノ。@mediaを利用した印刷用のcssはIE5.5から対応している
メディアクエリは、その進化形でIEは9以降で対応。画面の解像度や色数などでもcssを
振り分けることが可能。
→参考;MDN「メディアクエリ
→参考:はてなキーワード「メディアクエリ
 
結局、今回の案件では「css3-mediaqueries.js」は必要ないことが判明。
アイコンなども置き換える必要があるので、管理しやすいように印刷用のブロックを作成し
そこに印刷用のページを生成するようにしました。
 
 
 

web shocker : css3の3D Transforms


制作会社のiPhone向けサイト。画面の切り替え演出に力が入っています。
worksのページ切り替えでは左右へのスライドアニメーション。そして各事例に
移動するときはcss3の3D Transformsを利用したフリップの演出。
※pcでもsafariやchromeで閲覧可能です。
 
参考サイト:くるくるフリップを CSS 3 で作る実験
 
 
 

スマートフォン:ショーケース(2)

今回のサンプルは拡大縮小しないのですが、ブラウザの全幅を利用した仕様になっています。
つまりブラウザの外から入場して、ブラウザの外へ退場します。
見た目は前回の01_showcase.htmlと同じです。

シンプルなshowcase
サンプル:02_showcase.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
このサンプルも前回の01b_showcase.html同様にjQueryを多く活用しています。
ポイントは以下の様にブラウザの幅が変わったら入場位置などを再計算している点です。

$(window).resize(function(){setShowcaseSize();})
 function setShowcaseSize () {
 leftPos = 0-photoWidth;
 centerPos = Math.floor(($(window).width()-photoWidth) /2);
 rightPos = $(window).width();
 $("#page_" + now_id).css("left",centerPos);
}

 
今回はここまで、次回はweb designing 2012年1月号の特集されている
プラグインを利用したショーケースを学ぼうと思います。
 
 
 

スマートフォン:ショーケース(1)

まずはjQueryで学んだショーケースをスマートフォン用に改造したサンプルを
作成しました。jQueryの仕組みはほとんど以下の記事のサンプルと同じです。
参考:jQuery:一定時間でバナーを切り替える
 
以前の記事より、横レイアウトの時ショーケースの大半が隠れてしまうのは
良くないと考えているので、ショーケースの拡大縮小はしていません。ですので
以下のキャプチャのように横レイアウトにしても画像が全て表示されます。
 

シンプルなshowcase
サンプル:01_showcase.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
 
 

拡大縮小バージョン

あまり良い仕様ではないと思うけれど、拡大縮小するバージョンも作成しました。
最初はこの仕様の方が簡単かと思っていたのですが、実際は非常に時間が掛かって
しまいました。
 
cssだけで何とかしようと思っていたのですが、結局できませんでした…。
なのでjQueryに大きく頼る結果となりました。cssは非常にシンプルですが、
jQueryが複雑なことを確認してください。
onResizeでレイアウトが変わる度に設定を変更しているのがポイントです。

拡大縮小するshowcase
サンプル:01b_showcase.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
今回作成した拡大縮小しないバージョンはshowcaseのエリア内でしか画像が移動
しませんが(overflow:hiddenの設定)、次回はブラウザの全幅を利用して
移動する仕様に変更したいと思います。
拡大縮小するバージョンと同じようにonResizeで設定を変更することになると思います。
 
おしまい
 
 
 

スマートフォン:タブ(3)

今回は1案だけです。
前回のサンプルは切り替わったことが分かりやすいのですが、デザイン的に少し難あり
な気がします。ということで、今回は少しデザインを意識したタブにしました。
 
ボーダーのややこしい問題が発生しないデザインなのでcssは前回のサンプルよりも
シンプルになっています。

タブメニュー
サンプル:20_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 

 
おしまい
 
 
 

スマートフォン:タブ(2)

スマートフォンは指でタップするため、操作時には画面の大半を手で覆うこととなり
タブが切り替わったことが確認しにくい場合があります。
 
そこで今回はテキストエリアの色をタブと同じ色に変更して、切り替わったことが
分かりやすいタブメニューを作成しました。 

タブメニュー(色つき)
サンプル:19_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 

 
今回は色が付いているだけでなくタブの高さとマージンも変更して、選択されている
タブが他のタブよりも高く表示されるようにしてあります。
 
 
 

ボーダーの処理

今回のサンプルでは少し悩んだ部分があったので、備忘録としてメモしておきます。
まず完成サンプルの前段階のサンプルを確認してください。

タブメニュー(未完成)
サンプル:18_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
完成サンプルと同じように見えますが、以下の図のように選択されていないタブと
テキストエリアとの間にグレーのボーダーがありません。

 
前回のサンプルは選択されていないタブがテキストエリアのボーダーと同じ色を
していたため、下のボーダーが無くても違和感は内のですが、今回のサンプルのように
ボーダーの色と選択されていないタブの色が異なると、少し違和感があります。
 
これの対処に少し手間取りました。解決法としてはタブの下にもボーダーを付けるように
しました。しかし、それでは選択されたタブとテキストエリアの間にもボーダーが
入ってしまいます。
 
それをどの様に対処したかというと、以下の様に選択されたタブの下ボーダーの色を
タブの色と同じにするようにしました。こうすることでボーダーが存在しても色が同じ
なので、ボーダーが無いように見せることができるのです。
※以下のコードは19_tab.cssに記載されています。

#tab ul li.selected.yellow{
 border-bottom: 1px #ffd solid;
}
#tab ul li.pink.selected{
 border-bottom: 1px #fdf solid;
}
#tab ul li.blue.selected{
 border-bottom: 1px #dff solid;
}

 
次回もタブについて学ぼうと思います。
 
 
 

スマートフォン:タブ(1)

表示エリアの狭いスマートフォンでは、タブによるコンテンツの切り替えは有用だと思うので
練習してみました。今回のサンプルではjQueryを利用していますが、画像は一切利用せず
デザインは全てCSSで実現しました。
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。
 

タブメニュー
サンプル:17_tab.html  ここで利用しているcssはこちら

 

 
 
 

コンテンツエリアについて

タブメニュー自体はjQueryの練習で作成したので、問題なかったのですが以下の様に、選択された
タブとコンテンツエリアをつながって見えるようにするには、どうすればよいか少し悩みました。

 
ネットで調べたのですが、見つからなかったので安直な手法で対応しました。liは下のボーダーを
付けないようにし、コンテンツエリアのindex-zを-1に設定しタブの裏に配置し、
そしてpositionのtopを-1pxに設定し重ねました。
※下記はコンテンツエリア(#textArea)のcss設定です。

position:relative;
top:-1px;
z-index:-1;

 
 

タブの部分はデフォルトのタッチハイライトをOFFにしています

作成過程で気が付いたのですが、iOSではタブにタップすると何故かtabのsection全体が
ハイライトされてしまいます。aタグを使っていないのに…。
逆にaタグを利用していないからそうなるの?…。
ともあれ、これでは都合が悪いのでtabの部分だけハイライトの演出をOFFにしました。OFFにする
方法は以下のcssコードですが、今回はbodyではなくtabのsectionにのみ設定しています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

 
  

jQueryによるコンテンツの切り替えについて

jQueryでタブを学んだ際は、選択されたタブに特定のクラス(css)を追加して、それをフラグ
代わりに利用することでシンプルなjQueryを目指しました。
参考:タブメニューの最終形(たぶん)

タブメニュー(途中)
サンプル:16_tab.html  ここで利用しているcssはこちら
※タブは切り替わりますが、コンテンツの切り替えは付いていません。

 
実際最初のサンプルは、その仕組みで作成したのですが、その方法だとコンテンツの切り替えに
上手く対応できません。選択されたタブの処理はthisで対応できるのですが、
切り替えるコンテンツについてはthisで対応できないので…。
 
ということで17_tab.htmlはFlashの仕組みと同じように、クリックされたタブの
IDを記憶する方法で対応しました。またIDを記憶しないでコンテンツも切り替える方法を
紹介しているサイトを見つけたので参考としてメモしておきます。
参考:KACHIBIT.net様
 
次回もタブについて学ぼうと思います。
 
 
 

スマートフォン:クリック時の演出(2)

jQueryによるタップ演出の実現

まずはサンプルを先に確認しましょう。iOSでもAndroidでも同じ演出になります。

jQueryによるタップ演出の実現
サンプル:15_click.html  ここで利用しているcssはこちら
※safariなどwebkit系のPCブラウザでも確認できるようにしてあります。

 
 

デフォルトのタップ演出をOFFにする

このサンプルではjQueryの演出と元々の演出が重ならないように、デフォルトの演出を
OFF(透明にして見えなくする)にしています。具体的にはcssに以下の設定をするだけです。
サンプルではこの設定をbodyタグの部分にしています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

あとはjQueryでliの部分がタップされたらcssのクラスをハイライト用のクラスと
入れ替えるだけです。jQueryは短いコードなのでhtmlの方に記述してあります。
 
 

問題点

iOSもAndroidもリンク部分を長くタップし続けるとサブメニューが開くのですが、
このサブメニューがでるとボタンからタップを外したにも拘わらずハイライトが
残ってしまいます…。
 
こういう時こそのtouchcancelイベントだと思うのですがサブメニュー表示時に
このイベントは発生しませんでした…。このイベントが発生しないとなると、この問題は
解決できません…。まったくtouchcancelイベントってどんな時に発生するの?

$("#menu").on("mouseup mouseout touchend touchcancel", "li", function(){
 $(this).removeClass("buttonOn");
 $(this).addClass("buttonOff");
})

 
 
 

スマートフォン:クリック時の演出(1)

androidでのクリック時の演出

これまでスマートフォン用のメニューを作成してきて、気になったことがあります。
iOSもAndroidもリンクにタップすると、タップしたことが分かるようにハイライトの
演出がつくのですが、Androidではaタグをブロック要素にして大きな範囲をカバー
するようにしても、文字部分をクリックしたときにしかハイライトの演出が付きません。
 
図で説明すると、iOSでは上図のように文字のないところをタップしてもブロック化された
aタグの範囲がハイライトされます。

 
しかしAndroidでは以下の様に文字部分をタップしたときにしかハイライトの演出が
付きません。ブロック化されたaタグの文字のない部分をタップしてもリンクはしますが
ハイライトの演出が付かないのです…。これではタップしたことが分かりにくいです。

とはいえ、これは仕様のようでhtmlやcssのレベルでは対応できそうにありません。
そこで、次回はjQueryを使ってタップの演出を実現しようと思います。