ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」

2009/10/30 金曜日 Posted in デザイン, 記事紹介・リンク | 1 Comment »

良エントリーがありましたのでご紹介します。 ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。   →　これからゆっくり考L　携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]   ケータイサイトでは、どうしても実現しづらいデザインというものがあります。 このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。   詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。 tableの使用はOKか 背景色を複数色使っていないか 枠線を使っていないか サムネイル画像の横にテキストが来るパターン リストアイコンの下に文字が回り込んでくるかどうか ページの左右に微妙な余白が空いていないか フォントサイズは2段階ないし1段階か 太字を使っていないか   ※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。   このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。 最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。   関連： ケータイ3キャリアに対応するためのDOCTYPE宣言について 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」 ドコモ端末でCSSを利用するには Read more..

iPhone OS 3.0のSafariでコピーふきだしを無効にするには

2009/6/22 月曜日 Posted in TIPS, iPhone | No Comments »

先日リリースされたばかりのiPhone OS 3.0絡みのTIPSをご紹介します。 iPhone OS 3.0から待ちに待ったコピペ機能が付きましたが、スクロールすることが多いサイトなどでは、ふきだしが表示されてしまって不便なことがあります。 このふきだしをCSSを使って無効にする方法があるそうです。   →　masuidrive on rails - iPhone 3.0のMobileSafariでコピペを無効にする方法 [masuidrive.jp]   コピー用のふきだしとは次のようなものです。 画面を少しの間長押ししていると表示されます。   次のようなCSSを指定するだけで、コピーのCSSがでなくなるようです。 body { -webkit-user-select: none; }   非常に簡単ですね。 iPhone向けサイトを作成されている方は覚えておいて損はないと思います。 他にも何かiPhone 3.0向けのTIPSをご存知の方がいましたら、ぜひタレコミをお願いします。   関連： iPhone OS 3.0がリリースされたので早速試してみました 6月26日にソフトバンクから「iPhone3G S」が発売されます iPhone OS 3.0からブラウザ上でGPS位置情報が取れるようになるとのことです Read more..

ドコモ端末がついに外部CSSに対応したようです

2009/5/20 水曜日 Posted in DoCoMo, ニュース | 3 Comments »

昨日発表されたドコモの新端末（iモードブラウザ2.0端末）では、とうとう外部CSSに対応したようです。 JavaScriptやCookie対応の影に隠れて触れられてなかったのですが、これはかなり大きな修正です。 ドコモのCSSはケータイサイト作成の上で、最大の懸念とも言ってよかったのでこれは嬉しいですね。   →　NTT docomo　作ろうiモードコンテンツ　iモードブラウザ2.0対応i-CSS2について [nttdocomo.co.jp]   外部CSSに加えて、もちろんヘッダ内に書くCSSにも対応しているようです。 これは昨日から新しく提供が開始された、iモードHTMLシミュレータII 8.2でも確認できます。 →　NTT docomo　作ろうiモードコンテンツ　iモードHTMLシミュレータII [nttdocomo.co.jp]   test.html <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>サンプル</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div class="head_area">テスト</div> <hr> あいうえお<br /> <a href="test.php">リンク</a> <hr> </body> </html> test.css html { background: #99AA99; } div.head_area { text-align: ... Read more..

Perl用の3キャリア対応CSS変換モジュール「HTML::MobileJpCSS」

2009/1/15 木曜日 Posted in 全キャリア対応 | No Comments »

Perl用の3キャリア対応のCSS変換モジュール「HTML::MobileJpCSS」がリリースされたとのことです。 →　komoriyaのはてなダイアリー　3キャリア対応のCSS変換モジュールHTML::MobileJpCSS [d.hatena.ne.jp] →　CPAN　HTML-MobileJpCSS-0.01 [search.cpan.org]   ドコモのCSSは、ヘッダ部への記述や外部CSSの利用ができないという困った仕様ため、ページの作成には非常に苦労します。 これらを解決するには、Perlでは「HTML::DoCoMoCSS」、PHPでは「HTML_CSS_Mobile」といったライブラリがありましたが、今回新たな選択肢が追加されたことになります。   従来のライブラリとの違いは、文字サイズやhrタグなどのキャリアによる見え方の差異を吸収してくれたり、isyleの変換機能などが付いている点のようです。 キャリアによる文字サイズの違いは非常に困ることが多いところなので、これは便利な機能ですね。 Perl使いの方はぜひ試してみてはいかがでしょうか。   関連： ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 ドコモ端末でCSSを利用するには Read more..

iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法

2008/8/20 水曜日 Posted in iPhone | No Comments »

先日「iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法」という記事を書きましたが、今回はその続きです。 前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。 また前回は「-webkit-animation-name」を使う方法でしたが、今回はやり方を変えてみました。 　 静止画なのでわかりづらいですが、左からクルクルと回転しながら縮小して、右のようになります。   サンプルコードは次の通りです。 <html> <head> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <script type="text/javascript"> function animationStart() { var el = document.getElementById("target"); el.style.webkitTransition = '-webkit-transform 3s ease-in-out'; el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)'; } </script> </head> <body> <input type="button" name="hoge" value="animation" onClick="animationStart();" /> <div id="target" style="width:120px; height:120px; background-color:red; position:absolute; ... Read more..

« Previous Entries