ケータイ向けサイトでのスペーサーの書き方について解説されたウノウラボの記事「I love spacer」

2011/4/20 水曜日 Posted in 記事紹介・リンク | No Comments »

最近はスマートフォンの記事ばかりでしたので、たまにはガラケー向けの記事をご紹介します。 ウノウラボさんに、ケータイ向けサイトでのスペーサーの書き方について解説された「I love spacer」という記事がありましたのでご紹介させていただきます。   → ウノウラボ I love spacer [labs.unoh.net]   ひとつのHTMLで3キャリアさせようとした場合、<br />での改行では、機種によって見た目が違ってきたり、微妙な余白のスペースが表現できなかったりします。 その際には透過GIF画像を使ってスペーサーを作ることになるのですが、そのテクニック(バッドノウハウ)が紹介されています。 また合わせて、1px画像を使ったラインの引き方も紹介されています。   以前はウノウラボさんには、ケータイネタのエントリーが多数投稿されていたのですが、今回の記事はかなり久しぶりな感じですね。 ケータイ好きとしては寂しいことですが、これも時代の流れなのでしょうがないかもしれません。   関連: ケータイサイト作成初心者に役立つ記事「いまからでも遅くない!ケータイデザインの基礎固め」 ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版!?携帯コーディング、これだけ読めばすぐできる!」 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術」 Read more..

ケータイサイトでのtableタグの使い方がまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第二弾)」

2010/3/2 火曜日 Posted in デザイン, 記事紹介・リンク | No Comments »

case:MobileDesign!さんに、先日ご紹介させていただいた記事の続編が掲載されていましたのでご紹介します。 今回はtableタグのコーディングについてです。   → case:MobileDesign! モバイルサイトのデザイン紹介ブログ 一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第二弾) [d.hatena.ne.jp]   最近は対応端末がほとんどとなっているためそれほどでもありませんが、tableタグはケータイサイトを作る上ではまりやすいポイントとなっていました。   ドコモ901以前の世代に対応しなくてよいのであれば、表現力の限られるケータイサイトのデザインでは、tableタグをうまく使うことは非常に重要になってきます。 上記のブログを参考に勉強してみてはいかがでしょうか。   関連: デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」 ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術」 Read more..

XHTMLを使ったページ作成の要点がまとめられた記事「携帯サイト[xhtml]のコーディング前のチェックポイント」

2009/12/2 水曜日 Posted in デザイン | No Comments »

先日ご紹介させていただいたこちらのエントリーに、続編ができたようなのでご紹介させていただきます。   → これからゆっくり考L +α 携帯サイト[xhtml]のコーディング前のチェックポイント [sakaki0214.com]   前回のHTML編もよかったですが、今回も必要な情報が簡潔にまとめられており、良エントリーとなっていますね。 背景画像やフォント、画像の横幅など、ケータイサイトデザインでは必ず必要になるポイントが抑えられています。   上記ブログはご紹介した記事以外にも、デザインに関する小ネタが幾つも紹介されていてとてもためになります。 デザイナーの方もプログラマの方も、ぜひ一度目を通してみてはいかがでしょうか。   関連: ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」 ブックレビュー:携帯Webコレクション モバイルデザインアーカイブの本。 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」 Read more..

ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(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..

3キャリア対応HTMLの作成について実例をあげて解説している記事「モバゲーのような携帯サイトを作るための12のTips」

2008/7/14 月曜日 Posted in 全キャリア対応, 記事紹介・リンク | No Comments »

先週末からのiPhone騒動で、すっかり紹介しそこなってしまいました。 すでに1000以上のはてぶが付いている状態ですので、みなさんご存じだとは思いますが、良い記事なのでご紹介させていただきます。 → 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方- モバゲーのような携帯サイトを作るための12のTips [blog59.fc2.com]   モバゲーは、シンプルで見やすい構成ながら、意外と凝った作りとなっており、お手本にはもってこいです。 この記事では、そんなモバゲータウンを参考に、12個の実例を挙げて、3キャリアケータイ向けHTML作成の解説を行っています。 内容は、文字サイズ変更などの基本的なことから、反転文字や水平線、画像の回り込みまで、ケータイサイトを作成する上で必要なエッセンスが網羅されています。 特に「PC向けのHTMLは作成したことがあるが、ケータイは初めて」というような方にぴったりの内容だと思います。 かなり人気のあった記事のようですし、とても役に立ちますので、ぜひ続編を書いて欲しいですね。   関連: モバゲータウンがPCからも閲覧できるようになるようです 他のケータイサイトのHTMLを参考にする際に便利な裏技 ケータイでの画像回り込みについてまとめてみました Read more..