PCサイトをケータイで見る裏技

Google Wireless Transcoder

今回もまたまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
ケータイのGoogleで検索すると、PCサイトだと自動的にCSSを省略して余計な装飾が省かれ、長いページは自動的に分けてくれます。今回はこのサービスを利用して、PCサイトをケータイ用に手軽に変換してしまおうというテクニックです。

方法は簡単です。
例えば、変換したいURLが、http://www.ex-yz.com/index.htmlだとすると、
http://www.google.com/gwt/n?u=http://www.ex-yz.com/index.html&_gwt_noimg=1
とし、アクセスするとCSSが省略され、左下のようなケータイで見やすいサイトに変換されます。

右のようなQRコードをPCサイト上に配置して、ケータイへ誘導するコトも効果的なので、利用しない手はないでしょう。
ただし、この方法で変換した際にしっかり見えるようにするには、正しいコーディングでサイトを作る必要があります。適正なマークアップと正確なCSSを日頃から心がけておきましょう。

透過PNGを使ってテキストにグラデーション

画像を使わなくてもグラデーションくらいなら…｜web creators 2008年10月

今回もweb creators 10月号の「使えるCSS デザインの技152」から、ちょっとした小技です。

「SEOに配慮して、h1などの見出しに画像を使わずテキストのまま組んで欲しい」といった要望が最近までちょこちょことありました。（※ほとんど最近は、画像を背景にして、テキストをtext-indent: -9999px; として表示エリア外にとばしていますが）
そんな時、テキストの上に透過PNGを重ねてしまえば、画像を使わなくてもグラデーション効果が得られるというのが今回の小技です。

実際、画像を作った方がキレイですし、テキストに透過PNGを重ねるだけでは凝った効果を加えるコトもできないので、使う機会は限られると思いますが、とりあえずサンプルです。

続きを読む "透過PNGを使ってテキストにグラデーション"

サイトの画像を簡単に保存させたくない場合

cssで透明のカバーをかぶせましょう｜web creators 2008年10月

web creators 10月号には「使えるCSS デザインの技152」という特集が組まれています。結構使えるモノや定番のテクニックが載っていますので、手元に置いておくと便利かも知れません。

そんな中で今回紹介するのは、サイト上の画像を簡単に保存させないようにする小技です。
以前、建築デザイン事務所のサイトをコーディングした時に、施工実績である建築物の画像をダウンロードできなくするか、印刷できないようにして欲しいと言われたコトがありました。
画像をダウンロードできなくするには、背景にすればある程度は対応できますが、何百とある画像を背景にするのは到底現実的とは思えません。仕方なく、cssで印刷時には該当する画像を消すようにしました。

このような特殊な事情の時に使えるのが、今回の小技です。
実際、ソースから画像のURLを辿るコトもできますし、もっと簡単にスクリーンショットを撮ってしまえば、画像は手に入れられる訳ですが…。

まあ、とりあえずサンプルです。

続きを読む "サイトの画像を簡単に保存させたくない場合"

透過PNGを効果的に使ってみる

透過PNG＋CSSデザインがやってきた！｜web designing 2008年9月

またまた9月号のweb designingからですが、「透過PNG＋CSSデザインがやってきた！」という特集が組まれています。
最近は僕もページを作る際に、絶対配置と組み合わせて透過PNGをよく使うようになりました。IE6がネックなんですが、手軽なJavaScriptもいろいろと公開されてますので、これを機に試してみるのも一興かと思います。
…で、今回は以前にこのブログで紹介した「JavaScriptで今日の日付」という記事を透過PNGを使って再構築してみます。

サンプルはこんな感じです。

続きを読む "透過PNGを効果的に使ってみる"

Safari用のCSSハック

モダンブラウザ用にCSSを記述していても、Safariだけ表示がズレてしまうといったコトがごく希にありませんか？
IE関係のハックやOperaのハックはいろんなトコロで紹介されていますが、Safariのハックもあるんですね。…世の中、いろんなコトを教えてくれる人がいるので助かります！
…というコトで、このブログでも紹介してみます。

html[xmlns*=""] body:last-child 要素名 {
   Safariのみに適用させるスタイル
}
といったように、適用させたい要素名の前に
html[xmlns*=""] body:last-child を付けてスタイル定義するだけでＯＫです。

その他にも、BLOG × WORLD ENDINGさんの「CSSハック」というページには、いろいろなハックが紹介されていますので、興味のある方は一度ご覧になると良いと思います。

デフォルトスタイルをリセットするCSS

リセットCSSとフォントCSS｜Web Designing 4月号

Web Designing４月号の特集「“読みやすさ”のためのXHTML＋CSSデザイン」は、スタイルシート中級者とって非常に役立つ特集でした。
僕も今まで本や既存のサイトを参考にしながら、毎回いろいろと試行錯誤してCSSを組んできましたが、リセット用CSSとフォント用CSSに関しては、今回スッキリとまとまったような気がします。

基本はYahoo! UI Libraryの「YUI Reset CSS」と「YUI Fonts CSS」を使います。ただし、YUI Fonts CSSは英字を想定しているので、カスタマイズした方がいいです。

それでは、サンプルはこちらから（それぞれのスタイルシートが開きますので、コピーしてお使い下さい）

リセット用CSS
フォント用CSS

また、もっと上級者の方には下記のサイトで実践と解説されていますので、参考にしてみると良いと思います。
3ping.org｜デフォルトスタイルの差異を無くすCSS

続きを読む "デフォルトスタイルをリセットするCSS"

簡単！CSSでデザインされたメニュー

メニューをカスタマイズしてダウンロード｜CSS Menu Maker

前回、手軽に利用できるツールバー（メニュー）を紹介してみましたが、もう１つ、もっと手軽にメニューが作れてしまうサイトがあったので紹介してみます。

これも２月号のWeb creatorsに紹介されていますが、CSS Menu Generatorというサイトです。縦・横メニューにドロップダウンメニュー（プルダウンメニュー）まで、20種類程揃っているので、気に入ったモノが見つけられると思います。
気に入ったモノが見つかったら、｢Custmize｣をクリックして、メニューの数と名前を設定します。｢Update your Menu｣をクリックすると、実際のイメージを確認できます。もちろんスタイルシートや画像を変えればカスタマイズもできます。
｢Generate Menu Code｣をクリックすると、コードが発行されますし、そのまま画像,html,CSSを丸ごとダウンロードするコトもできます。もちろんスタイルシートや画像を変えればカスタマイズも可能です。

サンプルはこちら

続きを読む "簡単！CSSでデザインされたメニュー"

Windows Vista風のツールバー

Windows VistaのツールバーをCSSで再現する

早いもので間もなく１月も終わってしまいます。この前、年が明けたと思ったいたのに…、歳でしょうか。
なんだかんだとバタバタしておりましてなかなか時間が取れず…、今回はちょっとしたテクニックを紹介してみます。

２月号のWeb creatorsに紹介されていますが、blog.itookia.comさんの｢How to create VISTA style toolbar with CSS｣というページからVISTA_toolbar.zipをダウンロードすると、手軽にデザイン性にも優れたツールバー（メニューバー）が作れます。
さすがにこのままでは仕事には使えませんが、個人的なページとかサンプルとして提案するくらいには利用できそうです。
もちろんスタイルシートや画像を変えればカスタマイズもできます。

サンプルはこちら

続きを読む "Windows Vista風のツールバー"

Webでの適正な文字の指定って？

前回の記事絡みなのだが、Webサイトを作っていて適正な文字サイズの指定っていつも悩んでしまう。
僕自身はMacを使っており、ブラウザはほとんどFirefox。大きな文字だと扱いづらいので、環境設定で基本の文字サイズを14pxにして使っている。
そうすると、例えばAdobeのサイトだと文字が小さすぎて読めない。仕方がないので、文字サイズをアップして見ていたりする。

作る際に置いて、本などでは、16pxを基本のサイズとし、相対的なサイズを指示するように書いてあるが、僕のようにユーザー側のブラウザの環境設定で文字を16px以下にしてある人にとっては小さくなりすぎる傾向があると思う。

なので、WindowsのIE環境でも文字の可変ができるように、CSSでフォントサイズにsmallを指定していた。IE6以降、smallは12pxというコトになっているらしいので。

ただ、これでもMac環境で例えば、12pxに設定している人にとっては小さくなりすぎる事が分かった。

それからは、ハックを使い、WinのIE以外は12px、WinのIEにはsmallと指定するようになった。でもWinのIEで見ると少し文字が大きいんだよね。仕方がないので、いろいろ試した上でWinのIEだけさらに97%になるようにしてみた。
これでWinのIE、文字サイズ中で見た時でも他のブラウザとほぼ大きさが揃ったように見える。

前回の記事のCSSにはそういう指定がされています。興味のある方は参考にしてみてください。

Webサイト作りとは

Webサイトを作るコトは、家を作るコトと似ている。
各ページを適切にマークアップするコトはまさしく図面を描く作業だし、cssでレイアウトを調整するコトは目に見えない配線や配管工事をするコトに似ていると思う。
しかし、tableでレイアウトを整えたり、htmlに直接スタイルを書き込んだり…、僕に言わせるとプレハブの仮設住宅しか作れないのにWebサイトを作っているつもりの輩や会社もまだまだ多い。

見取図とリビングの仕様しか用意してないクセに、「図面と配線・配管工事をやってくれ」、「明日お客さんが見に来たいと言ってるからとりあえず作ってくれ」と無理な注文を言ってくる。
また何か不具合があった時も単に「水が出ないんだけど」としか言わない。台所なのかトイレなのか洗面所・風呂場なのかも分からない。状況が分からないからこっちはすべての水廻りを調べる。するとトイレのウォシュレットの水が出ないコトだったりする。

認識のズレが大きいとお互いストレスを溜めるだけなんだよね。プレハブしか想定できないのならプレハブ専門業者に頼めばいい。こっちは自分の腕一本で仕事している職人のつもりなので、今持っている技術をすべてつぎ込んで作り上げるだけ。

そういう僕もまだまだ勉強不足なので他の人から見ればどう映るか分かったモンじゃないけどね。日々勉強、やっぱりこれしかなさそうだ。