ThinkITでモバイルサイト制作特集が組まれています

2008/10/7 火曜日 Posted in ニュース, 記事紹介・リンク | 1 Comment »

ThinkITの10月の特集として「モバイル向けサイト制作」特集が組まれています。 →　ThinkIT　モバイル向けサイト制作 [thinkit.co.jp]   執筆陣もかなり豪華な顔ぶれとなっています。 今から始める携帯サイト制作　著者：柴崎 正也氏 第1回　携帯サイトとPCサイトはここまで違う！ 第2回　携帯サイトの制作から公開まで 第3回　3キャリア対応サイトを作るには（仮） 第4回　携帯サイトならではのユーザビリティ向上（仮）　 携帯サイトをテストする方法　著者：荒木 稔氏 第1回　携帯テストの基本をおさえる 第2回　PCブラウザで携帯サイトのテストをする（仮） 第3回　携帯シミュレーターを使いこなす（仮）　 iPhone向けWebサイトをつくろう　著者：株式会社モディファイ　松本庄司氏 第1回　結局、iPhoneってなんなの？ 第2回　全体構成はどうする？（仮） 第3回　見た目はどうできる？（仮） 第4回　どうやれば楽できる？（仮） 第5回　使えるTipsまとめ（仮）　 モバイルWeb構築の最新潮流　著者：株式会社イオス　吉田 悟美一氏 第1回　モバイルサイトに求められるデザイン力！ 第2回　モバイルサイトをリッチ化する 第3回　コンテンツもよりインタラクティブに（仮） 第4回　サイトの機能もリッチ化する（仮） 第5回　モバイルWebの可能性と未来（仮）　 出遅れるな！Flash Lite入門　著者：株式会社24-7　古本 光司氏 第1回　Flash Liteの基本を学ぼう！ 第2回　Flash Lite 1.1のスクリプト制御（仮） 第3回　時計待ち受けを作ろう！（仮） 第4回　簡単なゲームを作ろう！（仮） 第5回　Flash Lite のまとめと今後（仮）   サイト作成の基本から、テスト・動作確認について、iPhone、デザイン、FlashLiteと、モバイル開発についてが網羅されています。 Web上でここまでモバイル向けの記事がまとまったのは初ではないでしょうか。 記事ごとに曜日別となっており、それぞれ1週間単位で公開されていくようです。 10月はこれだけでかなり楽しめそうです。 気になる記事がありましたら都度ピックアップしていこうと思います。   関連： Web+DB Press Vol45に掲載されたMobaSiFの記事がWeb上で無料公開されています 次号のWeb Designing(2008年7月号)は、ケータイ特集になるようです 「Web+DB PRESS Vol45」はケータイ開発特集になるようです ... Read more..

ケータイでの画像回り込みについてまとめてみました

2008/6/11 水曜日 Posted in デザイン | 7 Comments »

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。   まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あいうえおかきくけこさしすせそたちつてと・・・ こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。 「style="float:left;"」のみ 「align="left"」のみ 「style="float:left;" align="left"」の併記   結果は次のようになりました。 ドコモ　 　1:○　 　2:×　 　3:○　 au　 　1:×　 　2:○　 　3:○　 ソフトバンク　 　1:○　 　2:○　 　3:○　 結局、両方を併記するほかないようです。 ソフトバンクはオールパスです。（PCも当然オールパスでした）   さて続いて、回り込みの解除です。 <br clear="all" style="clear:both;" /> のように書けばOKと思ったのですが、ドコモで解除が行われませんでした。 仕様を読んでみるとXHTMLでは、clearはブロック要素に書かなくてはならないとあります。 ですので、次のようにdivタグで書いてみました。 <div clear="all" style="clear:both;"></div> ※<div />という書き方は出来ないのでは、というご指摘をいただきましたので、修正しました。   ということでまとめとしては、次のように書けば3キャリアに対応した画像回り込み＆解除が行えるようです。 <img src="test.gif" style="float:left;" align="left" /> あいう <div clear="all" style="clear:both;"></div> えおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br /> きちんと表示されました。   関連： 他のケータイサイトのHTMLを参考にする際に便利な裏技 フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」 Read more..