advanced search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Ballyhoo

Posted By

masaya on 01/14/07


Tagged

css template html xhtml


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

basicmagic
1976dan
oamaxa


XHTML basic template (ja/utf-8)

Published in: HTML 

URL: http://masaya-sugawara.com/

各種CSSファイル(master.css, base.css, content.css, hack.css)と合わせて参考にどうぞ.
文字サイズを変更してもレイアウトを保ちます(フッター箇所の3カラム除く).
また, メインエリアの画像は文字サイズの拡大縮小に応じてリサイズするようにしてあります.


Plain TextExpand 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. 	<meta http-equiv="Content-Language" content="ja" />
  8. 	<meta http-equiv="Content-Style-Type" content="text/css" />
  9. 	<meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. 	<meta http-equiv="pragma" content="no-cache" />
  11. 	<meta http-equiv="cache-control" content="no-cache" />
  12. 	<meta http-equiv="expires" content="0" />
  13. 	<meta http-equiv="imagetoolbar" content="false" />
  14.  
  15. 	<title>XHTML basic template</title>
  16.  
  17. 	<meta name="robots" content="FOLLOW" />
  18. 	<meta name="googlebot" content="index,follow" />
  19. 	<meta name="description" content="" />
  20. 	<meta name="keywords" content="" />
  21. 	<meta name="copyright" content="" />
  22. 	<meta name="MSSmartTagsPreventParsing" content="true" />
  23. 	<meta name="author" content="" />
  24.  
  25. 	<link rel="start" href="" title="" />
  26. 	<link rel="shortcut icon" href="favicon.ico" />
  27. 	<link rel="icon" type="image/png" href="favicon.png" />
  28. 	<link rel="stylesheet" type="text/css" media="screen,projection" href="c/master.css" charset="UTF-8" />
  29.  
  30. 	<script type="text/javascript" src="j/common.js" charset="UTF-8"></script> 
  31. </head>
  32. <body>
  33. <noscript>
  34. 	<div id="warning">
  35. 		<h2>当サイトを正しく表示するには JavaScript が必要です. 設定をオンにしてからページをロードし直してください.</h2>
  36. 	</div>
  37. </noscript>
  38. <!-- head -->
  39. <div id="head">
  40. 	<!-- Container -->
  41. 	<div class="Container">
  42. 		<h1><a href="/" title="XHTML basic template">XHTML basic template</a></h1>
  43. 		<p>made by <a href="http://masaya-sugawara.com" title="masaya-sugawara.com">masaya-sugawara.com</a></p>
  44. 	</div>
  45. 	<!-- / Container -->
  46. </div>
  47. <!-- / head -->
  48.  
  49. <hr />
  50.  
  51. <!-- nav -->
  52. <div id="nav">
  53. 	<!-- Container -->
  54. 	<div class="Container">
  55. 		<ul>
  56. 			<li><a href="/" title="Menu">Menu</a></li>
  57. 			<li><a href="/" title="Menu">Menu</a></li>
  58. 			<li><a href="/" title="Menu">Menu</a></li>
  59. 			<li><a href="/" title="Menu">Menu</a></li>
  60. 			<li><a href="/" title="Menu">Menu</a></li>
  61. 			<li><a href="/" title="Menu">Menu</a></li>
  62. 		</ul>
  63. 	</div>
  64. 	<!-- / Container -->
  65. </div>
  66. <!-- / nav -->
  67.  
  68. <hr />
  69.  
  70. <!-- content -->
  71. <div id="content">
  72. 	<!-- Container -->
  73. 	<div class="Container">
  74. 		<!-- main -->
  75. 		<div id="main">
  76. 			<!-- Container -->
  77. 			<div id="sample1" class="Container">
  78. 				<h2>Main Title</h2>
  79. 				<p><a href="http://www.flickr.com/photos/97799173@N00/337290746/" title=""><img src="http://farm1.static.flickr.com/154/337290746_b24ece3425_o.jpg" width="" height="" alt="" /></a><br />
  80. 				Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text.</p>
  81. 				<h3>Sub Title</h3>
  82. 				<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
  83. 				<p>Text text text text text text text. Text text text text text text text text text text text text .</p>
  84. 			</div>
  85. 			<!-- / Container -->
  86.  
  87. 			<hr />
  88.  
  89. 			<!-- Container -->
  90. 			<div id="sample2" class="Container">
  91. 				<h6>h6—XHTML basic template</h6>
  92. 				<h5>h5—XHTML basic template</h5>
  93. 				<h4>h4—XHTML basic template</h4>
  94. 				<h3>h3—XHTML basic template</h3>
  95. 				<h2>h2—XHTML basic template</h2>
  96. 				<h1>h1—XHTML basic template</h1>
  97. 				<h1>h1—XHTML basic template</h1>
  98. 				<h2>h2—XHTML basic template</h2>
  99. 				<h3>h3—XHTML basic template</h3>
  100. 				<h4>h4—XHTML basic template</h4>
  101. 				<h5>h5—XHTML basic template</h5>
  102. 				<h6>h6—XHTML basic template</h6>
  103. 			</div>
  104. 			<!-- / Container -->
  105. 		</div>
  106. 		<!-- / main -->
  107.  
  108. 		<hr />
  109.  
  110. 		<!-- sub -->
  111. 		<div id="sub">
  112. 			<!-- Container -->
  113. 			<div class="Container">
  114. 				<h4>Sub Title</h4>
  115. 				<ul>
  116. 					<li><a href="/" title="Link Text">Link Text</a></li>
  117. 					<li><a href="/" title="Link Text">Link Text</a></li>
  118. 					<li><a href="/" title="Link Text">Link Text</a></li>
  119. 					<li><a href="/" title="Link Text">Link Text</a></li>
  120. 					<li><a href="/" title="Link Text">Link Text</a></li>
  121. 				</ul>
  122. 			</div>
  123. 			<!-- / Container -->
  124.  
  125. 			<!-- Container -->
  126. 			<div class="Container">
  127. 				<h4>Sub Title</h4>
  128. 				<ul>
  129. 					<li><a href="/" title="Link Text">Link Text</a></li>
  130. 					<li><a href="/" title="Link Text">Link Text</a></li>
  131. 					<li><a href="/" title="Link Text">Link Text</a></li>
  132. 				</ul>
  133. 			</div>
  134. 			<!-- / Container -->
  135.  
  136. 			<!-- Container -->
  137. 			<div class="Container">
  138. 				<h4>Sub Title</h4>
  139. 				<p>Text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text.</p>
  140. 			</div>
  141. 			<!-- / Container -->
  142. 		</div>
  143. 		<!-- / sub -->
  144. 	</div>
  145. 	<!-- / Container -->
  146. </div>
  147. <!-- / content -->
  148.  
  149. <hr />
  150.  
  151. <!-- extra -->
  152. <div id="extra">
  153. 	<!-- Container -->
  154. 	<div class="Container">
  155. 		<!-- e1 -->
  156. 		<div id="e1">
  157. 			<h5>Extra Title</h5>
  158. 			<p>Text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text.</p>
  159. 		</div>
  160. 		<!-- / e1 -->
  161.  
  162. 		<!-- e2 -->
  163. 		<div id="e2">
  164. 			<h5>Extra Title</h5>
  165. 			<p>Text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text.</p>
  166. 		</div>
  167. 		<!-- / e2 -->
  168.  
  169. 		<!-- e3 -->
  170. 		<div id="e3">
  171. 			<h5>Extra Title</h5>
  172. 			<p>Text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text.</p>
  173. 		</div>
  174. 		<!-- / e3 -->
  175. 	</div>
  176. 	<!-- / Container -->
  177. </div>
  178. <!-- / extra -->
  179.  
  180. <hr />
  181.  
  182. <!-- foot -->
  183. <div id="foot">
  184. 	<!-- Container -->
  185. 	<div class="Container">
  186. 		<p>
  187. 			<!--Creative Commons License--><a rel="license" href="http://creativecommons.org/licenses/by/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by/2.1/jp/88x31.png"/></a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/2.1/jp/">Creative Commons Attribution 2.1 Japan License</a>.<!--/Creative Commons License--><!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#">
  189. 				<Work rdf:about="">
  190. 					<license rdf:resource="http://creativecommons.org/licenses/by/2.1/jp/" />
  191. 				</Work>
  192. 				<License rdf:about="http://creativecommons.org/licenses/by/2.1/jp/"><permits rdf:resource="http://web.resource.org/cc/Reproduction"/><permits rdf:resource="http://web.resource.org/cc/Distribution"/><requires rdf:resource="http://web.resource.org/cc/Notice"/><requires rdf:resource="http://web.resource.org/cc/Attribution"/><permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/></License></rdf:RDF> -->
  193. 		</p>
  194. 	</div>
  195. 	<!-- / Container -->
  196. </div>
  197. <!-- / foot -->
  198. </body>
  199. </html>

Report this snippet 

You need to login to post a comment.