[携帯]画像を縦に隙間なく並べる方法 ver02 │ これからゆっくり考L +α
前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげていますが、サンプルを作り直したので書き直してみました。 以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。 3つ並んでいる赤ちゃんの写真のところです。 結論を先に言ってしまうと、3キャリア1ソースで画像を縦に隙間なく表示させることは現状不可能です。 （2010年9月6日現在） ということで、以下検証結果です。 brで画像を改行 <div style="text-align:center;"> <img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /><br /> <img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149"
【ケータイ】tableタグを使って表現力アップ！（初心者向け）
こんにちは。カヤックで携帯サイトのコーディング、運用などをやっているフィリップです。 携帯コーディングでtableを使うと、ページ構成の表現度が結構広がりますので、今回は事例を使って、その基本的な使い方や落とし穴を紹介したいと思います。 tableタグは新しい機種では問題なく使えますが、古い機種の場合では効かないこともあるので、今回は以下の端末を対象とします。また3キャリア向けにxhtmlは1ソースにしています。 【docomo 902以降端末、au WIN端末、softbank 3G端末】 注意：tableの入れ子をすると、表示されない場合があるので（au端末の一部）、tableの入れ子は避けた方がよいでしょう。 【事例1】メニューなどのテキストを綺麗に並べたい時 画面のスクリーンショット html <table width="100%"> <tr> <td width="50%"> <
[携帯]携帯サイトで枠線を表現する方法 │ これからゆっくり考L +α
3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか？ ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。 xhtmlの場合、htmlの場合、と両方確認してみました。 サンプルページ（border使用） QRコード →サンプルページを見る <div style="text-align:center;"> <div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;"> <img src="img/sp.gif" alt="" width="1" height="2" /><br /> ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br /> <img sr
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-03-01 >
[携帯]複数画像を縦に隙間なく表示させられるか │ これからゆっくり考L +α
先日コーディングをしたモバイルサイトの案件で、どうしても複数画像を縦に隙間なく表示させなければならない状況がありまして、その時の検証結果をまとめてみました。 3キャリア（docomo,au,softbank）1ソース対応 対応機種：3G以降 xhtmlで記述 サンプルページ http://sakaki0214.com/sample/090328/index.xhtml ※シュミレーターやFirefoxのアドオン「FireMobileSimulator」や、直接携帯端末で見てください。 各サンプルの簡単な解説 [1]1画像ごとにbrで改行<img src="画像" /><br /> <img src="画像" /><br /> <img src="画像" /><br /> [2]改行なし<img src="画像" /> <img src="画像" /> <img src="画像" /> [3
[携帯]tableを中央揃えにする │ これからゆっくり考L +α
モバイルサイトでtableを中央揃えにする方法です。 ちなみに、docomoのtable対応はxhtml2.0以降です。 iモード対応XHTMLのバージョン（docomo公式） docomoの901,701,702（一部端末）はtableタグがきかないのでご注意を。 サンプルページ →サンプルページを見る 「完璧なセンタリング」は携帯サイトでは難しいです。 スクロールバーが表示される端末だと微妙にずれます。 （その微妙なずれが分からない程度ならOKだと思いますが、サンプルページのような背景画像だと微妙なずれが目立ちます。） tableタグにalign="center" <table align="center" width="220"> ・ ・ ・ </table> ほぼ全端末でtableがセンタリングされます。 tableタグの外側のdivタグでtext-align:center;を指定
携帯サイト（html,table使用可）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html（CSSは使用不可） ・文字コード：Shift-JIS ・改行コード：CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
