memo.xight.org

HTML

2006-11-24 Fri

<object>を利用した，外部のHTMLファイルを読み込む方法

- Summary
<iframe>を利用しないで，外部のHTMLファイルを読み込む方法．

- For Internet Explorer

<object
    classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13"
    data="some.html">
	<p>backup content</p>
</object>


- For Internet Explorer以外
<object
    type="text/html"
    data="some.html">
	<p>backup content</p>
</object>


- 読み込ませるページ
...
<body style="border:0;overflow:visible">
...


- Reference
aplus moments - Insert HTML page into another HTML page
http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/

- Reference 追記 [2006-11-27]
WWW WATCH - 2006-11-25 - IFRAME を使わない方法の補足
http://hyper-text.org/archives/2006/11/object_element.shtml

- via
phpspot開発日誌 - 2006-11-24 - IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法
http://phpspot.org/blog/archives/2006/11/iframehtmlhtml.html

2006-09-07 Thu

Webページにソースコードを表示するには

- 方法
1. <textarea>
Ctrl+A で Copy & Paste が楽．

2. <pre> + CSS

3. <pre> + <code> + CSS

4. <textarea> + dp.SyntaxHighlighter[2006-06-12-7]

- CSSの例

pre.code {
	font-family: monospace;
	white-space:pre;
	overflow:scroll;
}


- vimの設定
.vimrc に記述
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction


対象範囲を選択後，
:call HtmlEscape()


- Reference
i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_129.html

404 Blog Not Found:ソースを貼付ける50の方法
http://blog.livedoor.jp/dankogai/archives/50621177.html

hail2u.net - Weblog - pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html

2xup - 2006-09-07 - pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056

hxxk.jp - 2006-09-06 - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://hxxk.jp/2006/09/06/2210

i d e a * i d e a - 2006-09-07 - ソースの貼り付け方法その後
http://www.ideaxidea.com/archives/2006/09/post_131.html

2006-08-31 Thu

イメージツールバーを無効にする方法

- Summary
画像をマウスオーバーすることで表示されるイメージツールバーを，
無効化するHTMLの記述方法．

Firefoxの拡張 "Image Toolbar" でも有効．

- ページ全体でイメージツールバーを無効にする

<meta http-equiv="Imagetoolbar" content="no" />


- 画像単位でイメージツールバーを無効にする
<img src="path/to/image.gif" alt="サンプル" galleryimg="no" />


- Reference
TAG index - HTMLタグリスト/ページ全般タグ/イメージツールバーを無効にする (ページ全体)
http://www.tagindex.com/html_tag/page/meta_12.html

TAG index - HTMLタグリスト/イメージタグ/イメージツールバーを無効にする (画像単位)
http://www.tagindex.com/html_tag/img/img_gall.html

Image Toolbar :: Mozilla Add-ons :: Add Features to Mozilla Software
https://addons.mozilla.org/firefox/243/

2006-03-15 Wed

target="_blank" を使わないで新しいウィンドウでリンクを開く方法

- Summary
target="_blank" を使わないで新しいウィンドウでリンクを開くための手法．
Behaviour.js を利用すればより簡単，かつHTMLを汚さずに実装可能．
Sample

- Source

var myrules = {
	'.popup' : function(el){
		var href = el.getAttribute('href');
		if (href){
			el.onclick    = function(){ window.open(href); return false;}
			el.onkeypress = function(){ window.open(href); return false;}
		}
	}
};
Behaviour.register(myrules);


<script type="text/javascript" src="behaviour.js"></script>
 
<a href="index.html">Normal</a>
<a class="popup" href="index.html">Pop up</a>


- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/

- via
cl.pocari.org - 2006-03-14
http://cl.pocari.org/2006-03-14-5.html

2006-02-20 Mon

HTML, XML 検証サービス

- HTML/XHTML Validator
  o The W3C Markup Validation Service
    HTML/XHTML Validator の定番
    http://validator.w3.org/

  o Another HTML-lint
    http://openlab.ring.gr.jp/k16/htmllint/

  o WDG HTML Validator
    http://www.htmlhelp.com/tools/validator/

- CSS Validator
  o W3C CSS 検証サービス
    CSS Validator の定番
    http://jigsaw.w3.org/css-validator/

- アクセシビリティ
  o Watchfire WebXACT
    http://webxact.watchfire.com/

- RDF/XML Validator
  o W3C RDF Validation Service
    http://www.w3.org/RDF/Validator/

  o FoaF Explorer
    http://xml.mfd-consult.dk/foaf/explorer/

  o ccValidator
    http://www.yergler.net/projects/ccvalidator/

- RSS Validator
  o Feed Validator for Atom and RSS
    http://feedvalidator.org/

  o Redland RSS 1.0 Validator and Viewer
    http://librdf.org/rss/

- Reference
ValidatorCollection - HTML/XML 検証サービス一覧
http://hpcgi3.nifty.com/spiegel/?ValidatorCollection

2006-02-14 Tue

Windows Media 形式の動画を埋め込むHTMLソースコード

- Summary
Internet Explorer でも Firefox でも再生できるような動画の埋め込み方．

- ポイント
o Internet Explorer は <embed> , <object> の両方で再生可能．
o Firefox は <embed> タグしか認識しない．
o <object> タグ内で <embed> タグを利用することで，双方のブラウザで再生可能．

- Sample

<object
	id="Player"
	width="480"
	height="360"
	classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
	type="application/x-oleobject"
>
	<param name="autoStart" value="True">
	<param name="URL" value="path/to/file.asx">
	<embed
		width="480"
		height="360"
		type="application/x-mplayer2"
		src="pato/to/file.asx"
		pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin"
		name="mediaplayer"
		showcontrols="1"
		autostart="1"
		showstatusbar="0"
		showdisplay="0"
	>
</embed>
</object>


- [2006-12-07]追記
「再生ソフトウェアを限定しないほうが良い」との意見もある．

<object
	data="path/to/file"
	type="application/x-mplayer2"
	width="300"
	height="200"
>
	<param name="src" value="path/to/file" />
	<param name="autostart" value="true" />
</object>


- Reference
Microsoft - Windows Media Player SDK - Windows Media Player を埋め込む
http://www.microsoft.com/JAPAN/developer/library/wmplay/embeddingwindowsmediaplayer.htm

- Reference 追記 [2006-12-07]
ぽかぽかWeb研究室 - マルチメディアファイルを XHTML 文書に埋め込む
http://yupotan.sppd.ne.jp/web/xhtml-multimedia.html

mozillaZine 日本語版フォーラム - XHTMLページに埋め込んだMediaPlayerの...
http://mozillazine.jp/forums/viewtopic.php?p=3482&sid=ed6003e0483461effd8643760e32c258

2006-01-19 Thu

HTMLとアクセシビリティ

- テーブルとアクセシビリティ
kanzaki.com - テーブルとアクセシビリティ
http://www.kanzaki.com/docs/html/tbl-access.html

- フォームとアクセシビリティ
kanzaki.com - フォームとアクセシビリティ
http://www.kanzaki.com/docs/html/htminfo33.html

- 入力フォーム
みんなのウェブ - 迷わず使える入力フォーム
http://www2.nict.go.jp/ts/barrierfree/accessibility/minna/point7.html

- 身体が不自由な方による貴重な意見
A.A.O. - ウェブを活用する障害者の声
http://www.aao.ne.jp/user/usersvoice/

2006-01-03 Tue

携帯サイトのつくりかた

- Reference
携帯.HTML - 携帯サイトのフォームに入力項目を作る
http://www3.tokai.or.jp/janboon/hphtml/form/input.html
NTTドコモ - 作ろうiモードコンテンツ - XHTML
http://www.nttdocomo.co.jp/p_s/imode/xhtml/
NTTドコモ - 作ろうiモードコンテンツ - HTML
http://www.nttdocomo.co.jp/p_s/imode/tag/
KDDI au: EZfactory
http://www.au.kddi.com/ezfactory/
ボーダフォン - Developers Support Site
http://developers.vodafone.jp/dp/tool_dl/list/

2005-12-14 Wed

Mobile Link Discovery 仕様

- Summary
XHTML/RSS/Atom においてモバイル版 URL へのリンクをメタデータに埋め込む仕様: Mobile Link Discovery について

- XHTML

<link rel="alternate" media="handheld" type="text/html" href="{mobile URL}" />


- Atom
<link rel="alternate" x:media="handheld" type="text/html" href="{mobile URL}" />


- RSS
<rss xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:link rel="alternate" media="handheld" type="text/html" href="{mobile URL}" />


- Reference
Six Apart - Docs: Mobile Link Discovery spec
http://www.sixapart.jp/docs/tech/mobile_link_discovery_en.html
Six Apart - Docs: Mobile Link Discovery 仕様
http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html
- via
cl.pocari.org - 2005-12-09 - Mobile Link Discovery 仕様
http://cl.pocari.org/2005-12-09-4.html

2005-11-29 Tue

Media Playerを埋め込む 

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer">
<param name="Filename" value="URL">
<param name="AutoStart" value="自動スタート true | false">
<param name="AutoRewind" value="自動巻き戻し true | false">
<param name="PlayCount" value="再生回数 0で無限">
<param name="AutoRewind" value="自動巻き戻し true | false">
<param name="Volume" value="音量 -10000~0">
<param name="Balance" value="左右の音量バランス -10000>0<10000">
<param name="ShowControls" value="全てのコントロールバー true | false">
<param name="ShowAudioControls" value="音量コントロールバー true | false">
<param name="ShowDisplay" value="タイトル・著作権 true | false">
<param name="ShowGotoBar" value="関連リンクバー true | false">
<param name="ShowPositionControls" value="早送り・巻き戻しバー true | false">
<param name="ShowStatusBar" value="ステータスバー true | false">
<param name="ShowTracker" value="再生位置バー true | false">

- Reference
Dynamic HTML Styling : DHTML Media Player
http://members.at.infoseek.co.jp/dhtml_s/web_dhtml/dhtml_media_player.htm

2005-10-05 Wed