新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

携帯サイト(モバイルサイト)でCSS

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

携帯サイト(モバイルサイト)でCSSを使う方法です。
以前、「モバイルサイトを本格的に始めよう」で書いたようにDoCoMoが基準になります。
DoCoMo以外が対象だったらこんなことしなくても大体OKなハズ。

スポンサーリンク
 

SA800iで撮ったP905i1. XHTMLでサイトのデータを作ります。
携帯サイトなのでTABLEタグやPタグ(改行が入ってしまう)などは使わないように気をつけましょう。

2. できたらソースの最初の行に

<?xml version="1.0" encoding="Shift_JIS"?>

と書きます。
これはXML宣言といって、文書がXMLであることを明確にするためのものです。
一般のWebサイトではレイアウトが崩れたりするので僕は使っていません。

3. 拡張子を.xhtml(もしくは.xml)にします。

4. あとは、タグ内に属性でスタイルシートを適応させます。
たとえば本文はこんな感じで。

<div style="background-color:#000;color:#fff;font-size:xx-small">こんにちは</div>

たとえば罫線はこんな感じで。

<hr style="border-style:solid;border-color:#FFA900;height:0" />

なお、拡張子を.xmlにしたときはAUでは見れませんでした。
したがって拡張子は.xhtml推奨です。

これでダメな場合は、.htaccessを使って.xhtmlや.xmlを使えるようにするか、
無敵のCGI(perl)を使ってxml書き出しをしてあげればできます。

DOCOMO P905i / au W53CA / ソフトバンク 912SHで動作確認済

 - デザイン, 携帯電話・スマホ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

ソフトバンクがイー・アクセスを買収。ケータイ三国志の様相に

1年以上前の記事です。内容が古い可能性があります。ビックリしましたね。ちょっと前 …

オリンピック情報はLINE(ライン)でリアルタイムにゲット!

1年以上前の記事です。内容が古い可能性があります。最近、ちょこちょこLINEを使 …

no image
iOS 4.3でテザリングが標準になるかもしれない【iPhone】

1年以上前の記事です。内容が古い可能性があります。これが実現されたらソフトバンク …

ドコモケータイ用twitterクライアント「twittie」by「Colors」

1年以上前の記事です。内容が古い可能性があります。ケータイ用twitterクライ …

カレンダー表示にマップ表示もできるFlickr(フリッカー)が凄い

1年以上前の記事です。内容が古い可能性があります。ここ数日、Flickrをよくい …

Androidスマホで「・(中黒・中点)」を入力する方法

1年以上前の記事です。内容が古い可能性があります。「ダイ・ハード」や「プロット・ …

no image
iPhone(アイフォーン)が発売されました

1年以上前の記事です。内容が古い可能性があります。□<iPhone>ついに発売開 …

「おはようパンダ」が無料で復活。今度はラクダもいるらしい【iPhoneアプリ】

1年以上前の記事です。内容が古い可能性があります。最近、どうも「ねむログ」に飽き …

電源が切れてしまっても(電源オフでも)なくしたケータイ(スマートフォン)の場所が探せるサービスをソフトバンクが開始

1年以上前の記事です。内容が古い可能性があります。スマートフォンを無くしてしまっ …

行きつけのGEORGIA(ジョージア)自動販売機に近づくと永作博美さんや新井恵理那さんがメッセージ♡【スマホで販促02】

1年以上前の記事です。内容が古い可能性があります。スマホを使ったおもしろブランデ …

血液型オヤジ