iPhoneでWebサイトを見ていると…

メールチェックはもちろん、ちょっとしたニュースなどはiPhoneでチェックするようになってしまいました。
…で、リンク先がPC向けのサイトだったりすると、やはり読みにくいなと実感します。というか、あえてPC向けのサイトをiPhoneで見ようとは思わないですね。
みなさん一部分を拡大して読んでいるんでしょうか？

また、文字も思ったより小さいです。
一応、iPhone Simulatorを使って表示状態を確認はしていたんですが、24インチで1920×1200pxの僕の環境だと、実物の3.5インチより画面が結構大きいんですよね。
これがちょっとした誤算でした。
いくら解像度が高くなって表示が驚ほど滑らかになろうとも、3.5インチは3.5インチ。12pxのフォントサイズだと小さく感じるので、通常のテキストが14pxになるようにCSSを変更しなきゃな…等と思ってます。

最近の僕のiPhone対策なんですが…、
１）プリント用に背景や不必要な要素を削除して表示をシンプルにしたCSSを作成。
２）それを元に携帯用にレイアウトを再設定したCSSを作成。
３）そのCSSをiPhoneにも流用する。

という方法を取ってます。（…まだ数える程ですが）
この方法だと、HTMLが１種類だけで済むので、管理する側としては手間がかかりません。
（※ホントは携帯用には、それに合わせたコンテンツを再構築する必要があると思いますし、またプログラムでページを振り分ける術も費用も足りませんので、あくまで暫定的です）

ただ、iPhone用の設定として、
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no /">
と記述していたのですが、iPadで見た時に（持ってないのでシミュレーターです）思惑通りの表示にならず、いろいろと試している最中です。

iPhoneにiPad、AndroidにWindows Mobile…。スマートフォンタイプだったりタブレットタイプだったり…。
AndroidにWindows Mobileなんて、各メーカーや各機種ごとにいろんな画面サイズと解像度で出してくるのではないんだろうか？
今後、その都度、表示の検証をしなきゃいけないようになってくるとしたら…？
う〜ん、頭が痛い問題であります。

（スマートフォン対応のご参考までに）

• [HTML/CSS]iphone対応サイトの製作
• CSSのみでiPhone対応ページにする方法

• iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編）
• 【CSS】iPadだけにCSSを適用する方法

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にはそういう指定がされています。興味のある方は参考にしてみてください。