2006-12-17 Sun
Yet Another Multicolumn Layout - マルチカラムのHTML/CSSテンプレート
- Reference
Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework
http://www.yaml.de/
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以外
- 読み込ませるページ
...
<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-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
2006-06-18 Sun
rendr - CSSとHTMLをリアルタイム編集
- Reference
rendr
http://gregtaff.com/rendar2.html
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
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-16 Mon
Dynamic HTML の イベントリファレンス
- Reference
msdn - Dynamic HTML - イベント
http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/events/events.asp?frame=true
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-11-08 Tue
エンティティの参照
- 良く使うもの
| < | < | 左大不等号 |
| > | > | 右大不等号 |
| & | & | アンパサンド,アンド |
| ' | ' | アポストロフィ |
| " | " | ダブルクォート |
| ` ' | | 半角スペース |
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
2005-10-14 Fri
Mozilla と IE のリストのレンダリングの相違
- Reference
hail2u.net - Weblog - リストの扱いの差
http://hail2u.net/blog/webdesign/css_tips_3.html
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
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