タグ: XHTML

[XHTML] 携帯サイト用 XHTML仕様まとめ

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第３次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。

XHTML Basic　» Kanzakiさんの解説
XHTML Basic　» W3C仕様書

XHTML Mobile Profile » Openwaveのリファレンス

  Docomo au Softbank
表示対応機種 FOMAシリーズ
※機種によりimode-XHTMLの対応バージョンが異なる
（FOMAでも古い機種は未対応の様子）		 WAP2.0ブラウザ搭載端末 3GC型（SoftBank 3G series）
※頭文字が7-9の機種
文字エンコード Shift-JIS・UTF-8 Shift-JIS・UTF-8 Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8
※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される
DOCTYPE

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

(Locale/Ver.=ja/1.0)の数字がバージョンによって変化。
1.0、1.1、2.0、2.1、2.2、2.3

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">

※端末はDTDのチェックをしない

 <!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
"xhtml-basic10-plus.dtd">
対応画像フォーマット

iモードブラウザ1.0(XHTML)：JPG・GIF
iモードブラウザ2.0：JPEG・GIF・BMP

 JPEG・PNG・GIF
※256色インデックス以上は減色表示		 JPEG・PNG・GIF
最大ファイルサイズ imodeブラウザ1.0：100KB
imodeブラウザ2.0：500kb 		9KB（画像データ等除く）
画像込みではDocomoとほぼ同等		 300kb
絵文字 公式一覧ページへ
code.cside.com		 一覧ページへ 一覧ページへ
IPアドレス帯域 一覧ページへ 一覧ページへ 一覧ページへ
ユーザーエージェント 一覧ページへ
iモードブラウザ1.0機種の一覧ページへ
iモードブラウザ2.0機種の一覧ページへ		 一覧ページへ 一覧ページへ

Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考：全キャリア絵文字比較表（絵文字を使いこなして見るためのページ）

公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

“[XHTML] 携帯サイト用 XHTML仕様まとめ” の続きを読む→

By HTML&XHTML 、、1件のコメント

[CSS] Flashを背景にする

Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。

まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。

<div id="content">
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
</object>
 <div class="section">
  <h2>Flash Background sample</h2>
  <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
 </div>
</div>

今更感漂うけど続くよー
“[CSS] Flashを背景にする” の続きを読む→

By CSS, HTML&XHTML 、2件のコメント

[XHTML]コピペ用 日本語ダミーテキスト（タグ付き＆タグ無し）

タグ付きダミーテキストのコピペが出来るHTML Ipsumを百式経由で知ったものの、
見たらなんか凄くラテン語（聖書？）だったので日本語で作ってみた。
リストやテーブルタグ付きのダミーはメニュー・更新履歴・企業挨拶風も作ってみた。

ダミー段落（Pタグ・短文）

<p>この文章は仮の内容として挿入されているサンプルです。本公開時に変更されますので、この文章のまま公開されることはありません。</p>



<p>当ウェブサイトは現在鋭意製作中です。本公開後に再びご訪問頂ければ幸いです。</p>

他、段落（中文・長文）、リスト、定義リスト、テーブルなど。
“[XHTML]コピペ用 日本語ダミーテキスト（タグ付き＆タグ無し）” の続きを読む→

By HTML&XHTML 、コメントする

[XHTML]WebサイトのOOP

Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。

オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP（Object Oriented Programming）的なこと出来る？
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。

Class

  1. Header -> #header
  2. Sidebar(Menu) -> #sidebar
  3. Contents -> #contents,#wrapper,#container
  4. Form ->#form,#contact
  5. Fotoer ->#footer

Method

  • List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
  • Headering Title (H1～H6) -> #page-title,#sitename,#content-title
  • Text Section -> div.post , div.section , div.entry
  • Buttons (input type=”button”,button tag, block style Ancher)　-> #submit,#reset
  • Input (form elements)
  • Copyright (address) -> #copyright
  • Image (floating style, ancher style)
  • Table

Property

  • Inlines (strong,em,tt,code…etc)
  • Blocks (div,p,address,blockquote…etc)
  • String (plain text)

4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。

class Header {
}

“[XHTML]WebサイトのOOP” の続きを読む→

By Memo 、、コメントする

XHTMLコーディング過程を晒してみる（画像で）

恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。

ラフデザイン。
ラフデザイン

２カラムでメインメニューは左？ど真ん中にタブのメニュー。
メニューが２箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。

※デザインはデザイナーが作った

“XHTMLコーディング過程を晒してみる（画像で）” の続きを読む→

By Memo 、コメントする

[XHTML]ValidなFlash表示ソース

今更感漂うW3Cに怒られないFlashの表示ソースについて。
マクパペットいじってた時に思い出したのでメモっておきます。

DreamweaverとかでFlashオブジェクトを挿入すると、大体こんなソースですが

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="32" height="32" title="title">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
  <embed src="index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"/>
</object>

これでチェックすると「there is no attribute “width”」だとか「there is no attribute “flashvars”」みたいにエラーが出てしまう。

最新のCS3では対応されてるかもしれないが、未だ旧バージョンを使用してる場合に、
Flash挿入したときバリデータでエラーを出さないようにするためには次のように修正する。

“[XHTML]ValidなFlash表示ソース” の続きを読む→

By HTML&XHTML 、、2件のコメント

[XHTML]コピペ用セレクトメニュー（テキスト編）

入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。

お届け時間指定

業者によって時間は変わるけど大体こんな感じ。

<select name="time">
<option>希望なし</option>
<option>午前中</option>
<option>12時-14時</option>
<option>14時-16時</option>
<option>16時-18時</option>
<option>18時-20時</option>
<option>20時-21時</option>
</select>

“[XHTML]コピペ用セレクトメニュー（テキスト編）” の続きを読む→

By Form 、コメントする

[XHTML]コピペ用フォームパーツ（数字編）

年月日や西暦、商品個数などに使えるセレクトメニューのXHTMLソース。コピペ用です。

月(1～12）のセレクトメニュー

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

9～0のセレクトメニュー

<select name="num">
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
  <option value="0">0</option>
</select>

“[XHTML]コピペ用フォームパーツ（数字編）” の続きを読む→

By Form 、コメントする