memo.xight.org

2006-12-17 Sun

Yet Another Multicolumn Layout - マルチカラムのHTML/CSSテンプレート

- Reference
Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework
http://www.yaml.de/

カテゴリ: [HTML][CSS]

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

カテゴリ: [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

カテゴリ: [CSS][HTML][vim]

[ 固定リンク ]

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/

カテゴリ: [HTML]

[ 固定リンク ]

2006-08-24 Thu

<link> タグの rel 属性 - 効果的な使用方法と対応ブラウザ

- Reference
linkのススメ - 駄的HTML改善計画
http://car.s35.xrea.com/better/link.php

Web Kanzaki - HTML - link要素の使い方
http://www.kanzaki.com/docs/html/link.html

カテゴリ: [HTML]

[ 固定リンク ]

2006-06-18 Sun

rendr - CSSとHTMLをリアルタイム編集

- Reference
rendr
http://gregtaff.com/rendar2.html

カテゴリ: [HTML][CSS]

[ 固定リンク ]

2006-03-15 Wed

target="_blank" を使わないで別ウィンドウでリンクを開くのに rel="external" を使う

- Reference
tcervo.com - 2004-01-01 - Opening a link in a new window - the valid way
http://tcervo.com/?p=18
- via
hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。
http://hori-uchi.com/archives/000424.html

カテゴリ: [HTML][JavaScript]

[ 固定リンク ]

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

カテゴリ: [HTML][JavaScript]

[ 固定リンク ]

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

カテゴリ: [HTML][XML][Accessibility][WebTool][Stub]

[ 固定リンク ]

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

カテゴリ: [HTML]

[ 固定リンク ]

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/

カテゴリ: [HTML][Accessibility][Stub]

[ 固定リンク ]

2006-01-16 Mon

Dynamic HTML のイベントリファレンス

- Reference
msdn - Dynamic HTML - イベント
http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/events/events.asp?frame=true

カテゴリ: [HTML]

[ 固定リンク ]

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/

カテゴリ: [HTML]

[ 固定リンク ]

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

カテゴリ: [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

カテゴリ: [HTML][Stub]

[ 固定リンク ]

2005-11-08 Tue

エンティティの参照

- 良く使うもの

<	<	左大不等号
>	>	右大不等号
&	&	アンパサンド，アンド
'	'	アポストロフィ
"	"	ダブルクォート
` '		半角スペース

- Reference
Character entity references in HTML 4
http://www.w3.org/TR/REC-html40/sgml/entities.html
Studying XML -- second step -- [ エスケープ ]
http://www.asahi-net.or.jp/~ps8a-okzk/xml/xml_2/escape.html

カテゴリ: [HTML][XML]

[ 固定リンク ]

2005-11-08 Tue

NEXTindex - Web Site 作成支援, Java 入門

- Reference
http://www.nextindex.net/

カテゴリ: [HTML][CSS][Java]

[ 固定リンク ]

2005-10-14 Fri

Mozilla と IE のリストのレンダリングの相違

- Reference
hail2u.net - Weblog - リストの扱いの差
http://hail2u.net/blog/webdesign/css_tips_3.html

カテゴリ: [Web Design][HTML][Stub]

[ 固定リンク ]

2005-10-05 Wed

ブラウザ上でPDFを扱う方法

- PDFの任意のページにリンクする

<a href="example.pdf#page=3">3ページ目を表示</a>

- <embed>タグを利用

<embed
	src="test.pdf"
	width="60%"
	height="80%"
/>

- <object>タグを利用

<object
	classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
	width="60%"
	height="80%"
	id="Pdf1"
>
<param name="SRC" value="test.pdf" />
</object>

- Reference
http://www.keiyu.com/doc/pdflink.htm#02

カテゴリ: [PDF][HTML][Stub]

[ 固定リンク ]

2005-09-15 Thu

良く使うHTMLタグ

<?xml version="1.0" encoding="EUC-JP" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>

- Reference
CHARACTER SETS
http://www.iana.org/assignments/character-sets

カテゴリ: [HTML][CheatSheet]

[ 固定リンク ]

memo.xight.org

Color Reference

カテゴリ

最近の話題

リンク

過去ログ

QR Code