Home > HTML&XHTML

HTML&XHTML Archive

[HTML] パンくずリンクについてのまとめと考察

パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。
ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。

パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、
よくあるデザインパターンは次の通りである。

  1. 1行テキスト
    テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。

    1. ページタイトルを　>　で繋いだもの
    2. ページタイトルを　>　以外の文字で繋いだもの
  2. シンプルなリンクの羅列
    区切り文字を入れずに画像やCSSで階層を表現する。
  3. マルチステップ
    開始から完了までの行程を表示する。
  4. サブナビゲーションつき
    各ページリンクに属するページをマウスオーバーで表示する。
  5. インタラクティブなアクションつき
    deliciousのパンくずリンクは階層表示とタグの絞込みを兼ねている
  6. 実験的なもの
    Booreilandはナビゲーションがパンくずリンクっぽい。

割合についてはWeb Design PracticesのBreadcrumb Navigationという記事が参考になるかも。
圧倒的に水平＋右矢印のデザインが多い。

Continue reading

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

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のにすればおｋらしい）
    ※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＝各記事という扱いになるらしいが…。

    Continue reading

[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に微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

Continue reading

[XHTML]テキストエディター使用者向けコピペ用ソース

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

Usage

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

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

Main

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

Continue reading

[CSS] Flashを背景にする

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

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

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

今更感漂うけど続くよー

Continue reading

 Page 1 of 2  1  2 »

ホーム > HTML&XHTML

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top