memo.xight.org

日々のメモ

カテゴリ : XHTML

1ページ目 / 全1ページ

XHTML + CSSのテンプレート集

Summary

Jimmy Lin による XHTML + CSSのテンプレート集.
1段組, 2段組, 3段組の固定幅,流動幅(リキッドレイアウト)のテンプレート集.

対応ブラウザ

Internet Explorer 5.0+
Firefox 1.5
Opera 8.5
Safari 2

Reference

Jimmy Lin - Templates
http://www.jimmylin.info/templates.html

via

phpspot開発日誌 - 2006-09-19 - ValidなCSS/XHTMLテンプレート集
http://phpspot.org/blog/archives/2006/09/validcssxhtml.html

理想的なサイトマップ

Summary

<ul>と<li>だけでサイトマップを表現.
lastitem クラスがミソ.

HTML Source

<ul id="linkList">
	<li>
		<a href="/">Home</a>
		<ul>
			<li>
				<a href="/1/">2nd - 1</a>
				<ul>
					<li>
						<a href="/1/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/1/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/1/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="/2/">2nd - 2</a>
				<ul>
					<li>
						<a href="/2/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/2/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/2/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li class="lastitem">
				<a href="/3/">2nd - 3</a>
				<ul>
					<li>
						<a href="/3/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/3/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/3/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


CSS Source

ul#linkList ul {
	margin-left:0;
	margin-bottom:1em;
	padding-top:0.3em;
	background:url("first-item.png") 20px 0px repeat-y;
	line-height:1;
}

ul#linkList li{
	list-style: none;
}

ul#linkList ul li{
	margin:0.3em 0 0.3em 0;
	padding-left:45px;
	background:url("all-item.png") 20px 0.7em no-repeat;
}

ul#linkList ul li.lastitem{
	background:url("last-item.png") 20px 0.5em no-repeat;
}


画像

first-item.pngの画像
all-item.pngの画像
last-item.pngの画像

Reference

ミツエーリンクス - サイトマップ
http://www.mitsue.co.jp/sitemap/

XHTML2 で<img> タグ

Summary

  <img>は空要素なので,中にデータを書くことが不可能.
  代替テキストは alt 属性しかない.

XHTML2では任意の要素に src 属性を入れることが可能になる.

例:
<p src="map.png">
駅を出て左折後に<strong>メインストリート</strong>を直進して下さい。
</p>

Reference

XHTML Frequently Answered Questions (私的日本語訳) - Software Linkage
http://linkage.xrea.jp/documents/W3C/XHTML_FAQ/#img

「XHTML文書」を text/html として認識させるべからず

認識させるべき文書型

  application/xhtml+xml
  application/xml
  text/xml

認識させるべき理由

  text/html として認識させた場合,文書が「壊れている」かどうかに関係無く,レンダリングを続行してしまう
  xml:lang などの予約属性や名前空間宣言などに代表される「XML 文書に特化された記述」は全く生かされない
  他の XML 応用言語と組み合わせたり,スーパーセットを作り上げたりした場合,出来上がった文書はもはや HTML 文書ではなくなる
  XSLT による変換をはじめとする,XML 処理系やアプリケーションが利用できない
  現状の Web ブラウザでは,text/html の文書では,CDATA 区間や,内部サブセットに記述された実体参照が殆んど認識されない

Reference

  「XHTML文書」を text/html として認識させるべからず @ レナ姫のWeb研究室
  http://www3.sppd.ne.jp/lena/web/html-xhtml.htm

XHTML Primary 規格書 第3版

基本構造

  head要素にはtitle要素が必須
  meta, link各要素は任意
  object要素はhead内には挿入出来ない。
  body要素の中身は,常にh1要素が先頭に存在していなければならない
  div要素はフッター記述にのみ使用可能

見出しの記述 (H1,H2...)

  見出し要素はbody直下のみに使用可能

ISO/IEC 15445:2000 との整合性

  table 要素の summary 属性は必須
  table 関聯要素における配置関係属性(halign, valign各属性)を禁止。
  img, object各要素から,width, height各属性を廃止
  address, pre各要素中には,img, object各要素は記述出来ない
  object 要素において archive 属性は使用できない
  input 要素において src 属性は使用できない
  textarea, select 要素において name 属性が必須

Reference

  XHTML Primary 規格書 第3版
  http://www3.sppd.ne.jp/lena/web/xhtml-primary.htm