HTML&XHTML – WebTecNote

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

YouTubeのiframe版埋め込みコードでもwmodeを有効にする

2011/02/21 by

随分前にYouTubeの埋め込み用ソースをValidにするという投稿をしたんですが、最近仕様が変わったらしく、埋め込み用として表示されるソースがiframeになってました。どうもiframe版だと内部でＨＴＭＬ５プレ … 続きを読む

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

2010/10/282009/07/08 by

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

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

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

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

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

[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ

2019/09/022009/07/01 by Tenderfeel

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]テキストエディター使用者向けコピペ用ソース

2009/02/14 by

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

Usage

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

あとは適当に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 by

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 by

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

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

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

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

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

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

他、段落（中文・長文）、リスト、定義リスト、テーブルなど。

[XHTML]buttonタグの挙動について

2009/05/222008/06/10 by

フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。

buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。

<input type="submit"  name="test" value="send" />

<button type="submit" name="test" value="send">submit</button>

[XHTML]ValidなFlash表示ソース

2009/08/172008/06/05 by

今更感漂う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" />
  
</object>

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

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

IEのみに適用させるIF

2009/08/032007/10/16 by

IEのみに有効なif構文。
head内に記述することで、CSSやJavascript等をIEだけに適用させることが出来る。