HTML&XHTML

[html] HTML5のサンプルソースと仕様メモ

2009/07/08 HTML&XHTML No comments

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5 demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。(MIMEをXHTMLのにすればおkらしい
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性ping (aarea要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性id, tabindex, hidden
  • 廃止された要素center, font, strike

Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle=各記事という扱いになるらしいが…。

(さらに…)

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

2009/07/01 HTML&XHTML 1 comment , ,

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第3次世代の機種です。
やっぱり三社三様だけど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]テキストエディター使用者向けコピペ用ソース

2009/02/14 HTML&XHTML No comments

新規でXHTMLのページ作る時に使うタグをバラした。
Dreamweaverなら各ブロックのソースをスニペットにして保存すると便利です。

Usage

  1. Mainのソースをテキストファイルにコピペする
  2. 半角英数の適当な名前+html拡張子で保存する。(ex:hoge.html)
  3. 必要なタグをコピペで追加していく

あとは適当にBodyタグの中を編集すればページが完成。

Main

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
</head>
<body>
<p>Sample Page</p>
</body>
</html>

(さらに…)

[CSS] Flashを背景にする

2009/02/06 CSS, HTML&XHTML 2 comments ,

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>

今更感漂うけど続くよー
(さらに…)

[XHTML]コピペ用 日本語ダミーテキスト(タグ付き&タグ無し)

2009/01/08 HTML&XHTML No comments ,

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

ダミー段落(Pタグ・短文)

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

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

他、段落(中文・長文)、リスト、定義リスト、テーブルなど。
(さらに…)