2012年8月アーカイブ

スマホサイト向けの軽量reset.css

gravity-works (2012年8月29日 10:29) | コメント(0)
各WEBブラウザのデフォルトCSSをリセットする手法として、
reset.cssというものがあります。
最初に読み込んでおくことでブラウザの初期CSSを統一し、
制作を楽にすることができます。

そのreset.cssですが、スマホサイトに用途を絞ることで
不要なスタイルを削除し、軽量化したものが配布されていました。


今のところはSafariとAndroidブラウザがほとんどのため
reset.cssはそこまで重要ではないかもしれませんが、
最近は他のブラウザもモバイル版を出してきています。

いずれPCサイトのように複数ブラウザを想定したコーディングが
必要になるかもしれないので、そのときはこちらの
軽量なreset.cssにお世話になりそうです。

CSSで印刷する要素を設定する

gravity-works (2012年8月22日 10:34) | コメント(0)
「ページを印刷するとき、この部分は印刷させたくない」ということがあると思います。
印刷する要素の制御は、CSSで簡単に実装できます。

@media print {
#header { display:none; }
#footer { display:none; }
}

上記のように @media print で囲んだスタイルは、印刷時のみに適用されます。
印刷用のスタイルシートを用意する方法もありますが、
そこまで大掛かりでない場合などに。

印刷対応で気になったものは、

・float:left/right
・overflow:hidden

など。

どうやら float で並べながら、overflow で回り込みを解除するような
縦長のレイアウトだと、上手く印刷できないことが多いようです。

この辺りのスタイルも、@media print で上書き・調整すると
綺麗に印刷できると思います。

« 2012年4月 | メインページ | アーカイブ | 2012年11月 »

検索

このアーカイブについて

このページには、2012年8月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2012年4月です。

次のアーカイブは2012年11月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。