携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
CSSの「background-positionプロパティ」の値の指定方法で
各社どのように対応するか詳しく挙動を調べてみたのでメモ。

CSSセレクタbackground-position
設定方法ドコモauSoftBank
キーワード指定 (left center)×
パーセント指定 (33% 50%)×
合成形の指定 (33% center)××
キーワード省略形 (bottom)×
パーセント省略形 (30px)×
※background-positionプロパティはauとソフトバンクのみに対応(ただし、使えるタグが限られる)
※画像はbackground-imageで指定するが、ドコモではbodyタグのみ。

ソース例

<body style="background:url(./image.gif) no-repeat; background-position:30px;">
<!--WRAPPER-->
<div style="font-size:xx-small;">
<div style="background:navy;color:white;text-align:center;"><background-position></div>
<br />
<!--文字-->
background-positionの挙動<br />
body要素に適用<br />
</div>
<!--WRAPPER END-->
</body>

合成形はあまり指定することはないですが、
auでは対応してないようです。

スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
こんばんは。

携帯サイト コーディング&デザインの
プレゼント企画無事終了いたしました。

今回は全部で36名の方からの応募がありました。
当初はもっと少ない(5名くらい?)と思っていたので、ちょっと驚いてます。

ご応募頂いた方、ありがとうございました。
メッセージすべて読ませて頂きました。

当選した方には、すでにメールをお送りしています。
残念ながら、抽選からもれてしまった方、ご期待に添えず申し訳ありません。 m(_ _)m


応募頂いた方ではWEB制作でお仕事をされている方がかなりいらっしゃいました。

もちろん、そういう方も中にはいるだろうなっというのは、
この書籍を書き始めるときから、すでにブログの読者層から見ても
感じていました。(だから、本書がこういった方や個人で携帯サイトを制作されている方向けにターゲットを絞っているのですが…)

中には学生なんていう方も。いやはや、すばらしい!
やはり携帯サイトはそもそも若年層向けのものがヒットしやすいですし、
ユーザもそれだけ多いですから、携帯のことをよく知っているこういった若い方々に
ぜひ、携帯サイト制作にチャレンジしてほしいと思います。

自分もまだまだ若いですが (っと思い込んでいます。笑)




このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
書籍を執筆する段階でもそうだったんですが、
携帯サイトでのau端末の動作を確認する「Openwave SDK 6.2K」って
今公開中止になっていますよね。

これによって携帯サイト開発が滞ってる方って結構いらっしゃるんじゃないでしょうか。
実は私もサブPC用に入れたいのに入手できずにいた者の一人です。笑

プログラムがないかネットで情報を探したところ、
どうやらweb.archive.orgで入手可能な様子。

リンクはっておきますね。
Openwave SDK 6.2K

いつなくなるか分からないので、まだ入手できてない方は、
今のうちににゲットしちゃいましょう。

では。


P.S プレゼント企画ですが、続々とメッセージ届いてます。
ありがとうございます。現在約20名ほど頂いてます。



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯サイト関連書籍

早くも「携帯サイト コーディング&デザイン」の増刷が決定しました!
ご購入いただいた皆様、日頃から当ブログをご覧頂いている皆様
本当にありがとうございます!
また、当初は品切れが続いてご迷惑をおかけしました。

増版のご連絡を頂いたのは先週ですので、
発売日から計算すると…20日くらい?
いやはや自分もびっくりです。

コンピュータ書はもともと万人受けするようなものではないので、
増刷されずに姿を消していく書籍が多いと聞く中、こんな短期間で増刷されるとは。
それだけニーズも多いってことですから、本当にうれしいです。
ちなみに担当者様談では半年で増版でも珍しいとか…(^ ^;)

さてさて、前置きはこのくらいにして本題に。
せっかくですから、こちらでもプレゼント企画をやっちゃいましょう。

ささやかではありますが、
読者の方へ本書をプレゼントさせていただきたいと思います。


以下よりまずはご応募ください。

-------------------------------------------
■「携帯サイト コーディング&デザイン」を2名様にプレゼント。
21日の23:59までご応募を受け付けます。→終了しました。
タイトルは「携帯サイト コーディング&デザイン プレゼント応募」としてください。

※応募のときには住所などは書かなくて結構です。
※当選した方へ後日ご連絡さしあげます。その際にお届け先を伺います。
※2通以上のご応募があった場合は、抽選とさせていただきます。
※ご自身のブログ、Amazonレビューなどで書評をいただける方を優先します。
-------------------------------------------

そんなに人気ブログでもないので、たぶんそんなには集まらないでしょう。発売後ですし。
ですから、たぶん当選確率はかなり高いですよ(笑)
ぜひ、ふるってご応募ください!

あっそれと、プレゼントする書籍は初版のほうになります。
2刷りでは初版で直しきれなかった誤植や間違いなどがある程度修正されますが、
出版社の正誤情報で初版のミスは掲載していますので。

それでは。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
先日出版させていただいた「携帯サイト コーディング&デザイン」の中でも
触れている携帯サイトで使えるCSSハックをご紹介。

ドコモ端末だけ内容を表示する
「displayハック」


勝手に名付けてしまってはいますが…

「display:none;」というCSSプロパティと値の組み合わせは、
現在auとソフトバンク端末で対応しています。

CSSで「display:none;」とすると、これが指定された要素は完全に非表示になりますが、
displayセレクタに対応していないドコモ端末は、内容が表示されてしまうという
CSSの対応度を逆手に取ったCSSハックです。

ただし、「3G端末(+XHTMLコーディング)」に限るという条件付き。
したがって、できればドコモユーザだけに表示させたいけど、
まぁ他キャリアにも表示されてもいいや程度に使うと便利かなと思います。

なので、

<div style="display:none;">
ドコモをご利用の方<br />

</div>

のような使い方がいいのではないでしょうか。
あんまり多用するとGoogleさんに怒られるかもしれませんが笑
まぁ1ページに1回程度なら使ってもよいかと思われます。

キャリア別のCSS対応状況についてさらに詳しく知りたい方は、
携帯サイト コーディング&デザイン」を。ぜひぜひ。

また、ハックを見つけたら、こちらで紹介しますね。



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
コカコーラ、GAP、NIKEなど有名ブランドでも
最近は携帯サイトが公開されていることが多く、しかも、かなりイケてる。

そういったリッチなデザインを有する携帯サイトを日々紹介しているブログさんを発見したのでご紹介。
そんな素敵なサイトはこちら。
case:Mobile Designさん

Mobile Design

小さな画面なのに、
ブランディングを維持したまま携帯サイトを作るのって意外と難しいですよね。

最近はXHTML+CSS/Flash Liteでリッチな携帯サイトを作れるようになってきたし、
それを閲覧できる端末も一巡した感がありますが、
今から始める携帯サイト制作の記事が人気だったということからも、
まだまだ携帯サイトを作り始めようかなっていうフェーズにいる人が潜在的に今一番多いはず。

だから今はまだデザインのノウハウなどはまとまった情報はそれほど出てこないし、
それを今解説したこところでまだ早いかなって気もします。

しかし、今後はこういったリッチな携帯サイトを作るニーズも増えてくるため、
いろいろとこういうサイトを参考にしていきたいですね。



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯ユーザに向けたデコメールの作成のポイントや実際の送り方、デザインテクニックなどを
紹介した記事をThinkITにて執筆させていただきました。本日より公開です。

特集「Webデザインまとめ読み」
月曜日公開特集:総まとめ、モバイルサイト動向
第1回:開封率の高いデコメールでメルマガ配信!

今年一発目のThinkITの月間特集として「Webデザインまとめ読み」と題して、
モバイルだけでなく、HTMLやCSS、FLASHなどWebサイト全般で必須となる知識を紹介します。
ぜひご覧ください。

【ThinkIT】 デコメール作成

今月毎週月曜日はモバイルの特集として4回にわたって掲載予定だそうですが、
僕が担当したのは今回の第1回目だけ。他の3回の特集はどのようなものなのか、
執筆する段階でも知らせていただけなかったので、どういった記事が載るのかちょっと気になりますね。
読者の方は要チェックです。

ちなみに、ThinkITでの執筆は今回で2回目。
前回は今から始める携帯サイト制作と題して、
4回にわたって携帯サイトの制作におけるポイントを紹介しました。
これが、非常に反響があったため今回も執筆する運びとなりました。

さて、話は変わりますが、年末に出版させていただいた
初の単著なる「携帯サイト コーディング&デザイン」ですが、
出版してまもないせいか、人気書籍?として、
現在アマゾンをはじめとするネット書店では入手困難な状況が続いているようです。
ご迷惑をおかけし、申し訳ありません。

book_mobile.jpg

Amazonでは2~4週間でのお届けとなっており、現在も在庫切れが発生しています。
前にもお伝えしましたが、アマゾンでは再入荷が遅いので、すぐに入手されたい方は
大手書店の店頭でご購入されるか、大手書店のオンラインサービスをご利用ください。
ジュンク堂(送料無料)紀伊國屋書店のオンラインサービスでは実際に在庫がありますし、
店頭在庫も潤沢で結構平積みされてますよ~

よろしくお願いします!

では。





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。