トップ > html5 > 明日の足音(html5)

明日の足音(html5)

html5

ブログやホームページ等、インターネット上のドキュメントは、大抵、htmlを出力します。
そのhtmlファイルの記述が今後大きく変わっていこうとしています。

下に示したソースは、新しい書き方で書かれたもので、従来のhtmlでは困難だった、正確なフォント指定もできるような書き方(リンク先サンプルはIE専)です。




webページのソースなど気にする人は少ないのですが、html5で実際に書かれた

410 Goneというホームページに出くわす。

記念　ソース

<!doctype html>
<head>
	<meta charset=utf-8>
	<title>Dive Into HTML 5</title>
	<style>
@font-face{
		font-family:"Essays 1743";
		src:url("f/essays1743-min.eot");
		src:local("Essays 1743"),
		url("f/essays1743-min.ttf")
}

@font-face{
	font-family:"Essays 1743 Italic";
	src:url("f/essays1743i-min.eot");
	src:local("Essays 1743 Italic"),url("f/essays1743i-min.ttf")
}

@font-face{
	font-family:"Linux Libertine";
	src:url("f/lin-libertine-min.eot");
	src:local("Linux Libertine"),url("f/lin-libertine-min.ttf")
}

html,body{
	background:#fff;
	color:#000;
	margin:0;
	padding:0
}


body{

	font:large/1.556 "Linux Libertine",Gentium,"Book Antiqua",Cambria,Palatino,Georgia,"Times New Roman",serif;
	word-spacing:.1em
}

#body{
	max-width:800px;
	margin:0 auto;
	padding-bottom:2em
	
}


.u{

	font:100%/1 "Arial Unicode MS",FreeSerif,OpenSymbol,"DejaVu Sans",sans-serif

}


.c{

	font-size:medium;
	line-height:1.75;
	margin:1.75em 0

}


.f img{

	float:left;
	margin-right:5px;
	margin-bottom:5px
}

p{
	font-size:large;
	margin:1.556em 0
}

.c,.a,form div{
	clear:both;
	text-align:center
}

.a{
	font-size:xx-large;
	line-height:.875

}


cite{
	font-style:normal

}

a{
	text-decoration:none;
	border-bottom:1px dotted

}

a:hover{
	border-bottom:1px solid

}

a:link{
	color:#000

}

a:visited{
	color:#666

}

.c a{
color:inherit
}

h1,h2,h3{
font-family:"Essays 1743","Linux Libertine","Book Antiqua",Cambria,Palatino,Georgia,"Times New Roman",serif;
text-transform:uppercase
}

h1{
font-size:266.7%;
line-height:1.1;
text-align:center;
width:100%;
margin:1.49em 0
}

h2{
font-size:210%;
line-height:1.3125;
margin:1.167em 0;
text-align:center
}

h3{
font-size:x-large;
line-height:1.167;
margin:1.556em 0
}

h1:before{
content:"№" counter(h1) ". "
}

body{
	background:#fff url(http://a.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_4794.png) no-repeat bottom left
}

h1:before{
	content:''
}

h1,h2,h3{
	padding:0;
	margin:0;
	border:0;
	line-height:128px;
	text-align:center;
	clear:both
}

h1{
	margin-top:128px;
	font-size:72px;
	text-transform:uppercase
}

h2{
	font-size:48px
}

dl{
	clear:both;
	width:100%;
	overflow:auto;
	background:#fff url(http://b.wearehugh.com/dih5/dot.png) repeat-x 0 0.8em
}

dt,dd{
	background:#fff
}

dt{
	float:left;
	padding-right:3px
}

dd{
	margin:0;
	float:right;
	padding-left:3px
}

.f{
	margin-top:6.224em
}
</style>
	<meta name=viewport content='initial-scale=1.0'>
</head>
<div id=body>
	<hgroup>
		<h1>Dive Into HTML 5</h1>
		<h2>
			by<br>
			Mark Pilgrim
		</h2>
		<h3>with illustrations from the Public Domain</h3>
	</hgroup>
	<p class=a>
	&#8258;
	<p class=f>
	<img src=//c.wearehugh.com/dih5/aoc-d.png alt=D width=104 height=105>
	ive Into HTML 5 seeks to elaborate on a hand-picked Selection of features from the
	<a href=//www.whatwg.org/html5>HTML 5</a>
	specification and other fine Standards. I shall publish Drafts periodically, as time permits.
	<a href=about.html>Please send feedback</a>
	. The final manuscript will be published on paper by O’Reilly, under the Google Press imprint (though perhaps under a different title). The Work will remain online under the
	<a rel=license href=//creativecommons.org/licenses/by/3.0/>CC-BY-3.0</a>
	License.
	<h3>Table of Contents</h3>
	<dl>
		<dt>
		A Quite Biased History of HTML 5
		<dd>
		1
	</dl>
	<dl>
		<dt>
		Installing an HTML 5-capable Browser (or Two, or Three)
		<dd>
		2
	</dl>
	<dl>
		<dt>
		Stop Littering (Your Markup)
		<dd>
		3
	</dl>
	<dl>
		<dt>
		<a href=canvas.html>Let’s Call It a Draw(ing Surface)</a>
		<dd>
		4
	</dl>
	<dl>
		<dt>
		Multimedia in a Flash (Without That Other Thing)
		<dd>
		5
	</dl>
	<dl>
		<dt>
		SELECT * FROM BROWSER WHERE 5 >
		2
		<dd>
		6
	</dl>
	<dl>
		<dt>
		Thread The Needle, Thread The Script
		<dd>
		7
	</dl>
	<dl>
		<dt>
		Let’s Take This Offline
		<dd>
		8
	</dl>
	<dl>
		<dt>
		You Are Here (And So Is Everybody Else)
		<dd>
		9
	</dl>
	<dl>
		<dt>
		Web Forms, Reinvented
		<dd>
		10
	</dl>
	<dl>
		<dt>
		“Distributed Extensibility” And Other Fancy Words
		<dd>
		11
	</dl>
	<p class=a>
	&#8258;
	<p class=c>
	“If you’re good at something, never do it for free.”
	<span class=u>―</span>
	<cite>The Joker</cite>
	<br>
	(but that doesn’t mean you have to keep it to yourself)
	<p class=c>
	Copyright MMIX O’Reilly Media &#8226; written by
	<a href=about.html>Mark Pilgrim</a>
	<form action=//www.google.com/cse>
		<div>
			<input type=hidden name=cx value=014021643941856155761:6jgee_nxreo>
			<input type=hidden name=ie value=UTF-8>
			<input name=q size=25>
			&nbsp;

			<input type=submit name=sa value=Search>
		</div>
	</form>
</div>
<script>
var gaJsHost="http://www.";
document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js'%3E%3C/script%3E"));

</script>
<script>
try{
var pageTracker=_gat._getTracker("UA-7434570-4");
pageTracker._trackPageview();

}

catch(err){

}


</script>

Embedded OpenType (EOT) File Format


参考
CSS Fonts Module Level 3

【レポート】HTML5を今日のブラウザで使う - Operaのエバンゲリストが実験 | ネット | マイナビニュース

HTML5で組んでみた | CSS-EBLOG

<!--[if IE]>
		<script type="text/javascript">
			document.createElement( 'header' );
			document.createElement( 'section' );
			document.createElement( 'nav' );
			document.createElement( 'aside' );
			document.createElement( 'footer' );
			document.createElement( 'article' );
		</script>
	<![endif]-->

URL変更のお知らせ：WAI-ARIA（日本語訳）：日立のユニバーサルデザイン

TOP