携帯サイト（モバイルサイト）でCSS

2008/05/15

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

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

1. 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で動作確認済

: Flickr（フリッカー）リニューアル後、set画面からスライドショーの埋め込みソースが取得できなくなった

1年以上前の記事です。内容が古い可能性があります。Flickr（フリッカー）リニ …

: スマホ（スマートフォン）版「Feedly」でタイトルがおかしい時はfont（フォント）を変えろ

1年以上前の記事です。内容が古い可能性があります。Googleリーダーが終わるの …

: Googleリーダー（RSSリーダー）もケータイに対応してるらしい

1年以上前の記事です。内容が古い可能性があります。ケータイ（P905i）で何でも …

: カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 1 – 「Custom Field GUI Utility」の巻【ワードプレス】 #wp

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

: 「HTML5」「CSS3」「ActionScript3.0」

1年以上前の記事です。内容が古い可能性があります。近頃はディレクション業にかまけ …

: 知らん間にウィルコム（WILLCOM）とイー・モバイルがワイモバイル（Y!mobile）になっていた

1年以上前の記事です。内容が古い可能性があります。今度はYahoo!がケータイ事 …

: ケータイ業界に本格参入？ Googleがモトローラ・モビリティを買収

1年以上前の記事です。内容が古い可能性があります。いろいろな企業を買収しているG …

: ケータイに掛かってきた電話をiPhoneに転送するようにした

1年以上前の記事です。内容が古い可能性があります。iPhoneを買ってこのかた、 …