宿題が終わると暇なので、宿題を終えた後、HTML5で201系と225系の紹介文を打ってみた。
追記：201系の説明に誤りがありました。写真は201系では無く、正しくは103系でした。申し訳ございませんでした。
現在は修正済みです。
↓HTML5ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>html5test</title>
</head>
<body>
<p>
<span class="titles">HTML5を使ったページ</span></p>
<p>
<span class="bold">103系＋225系電車</span></p>
<span class="c"><img src="103+225.jpg" title="103系＋225系5000番台"><br>
103系大阪環状線仕様＋225系阪和線仕様</span>
</p><p class="0">
103系とは、国鉄が開発した、鉄道車両である。<br>
国鉄で最も製造された鉄道車両とも言える。</p>
<p class="0">
225系とは、JR西日本が開発した、鉄道車両である。<br>
先頭車両の先端に、クラッシュブルゾーンを採用。これにより、時速40km/hでトラックとぶつかっても、先頭部分が潰れ、客室に衝撃の伝わりを軽減する事ができる。</p>
<p>
<address>著者：裏223系2000番台
<a href="http://west223sinkaisoku.sblo.jp">http://west223sinkaisoku.sblo.jp</a><br>
<a href="http://blogs.yahoo.co.jp/west223sinkaisoku">http://blogs.yahoo.co.jp/west223sinkaisoku</a><br></address></p><p>© 2011 Ura223-2000</p>
</body>
</html>
以上
CSS
a:link{
color:#FF0000;}
a:visited{
color:#00FF00;}
a:hover{
color:#FF00FF;}
p{
font-family:'メイリオ',Meiryo, 'ＭＳ Ｐゴシック','Osaka';
font-size:12px;
line-height:15px;
}
span.titles{
font-size:200%;
}
span.bold{
font-weight:bold;
font-size:150%;
}
span.c{
font-family:'メイリオ',Meiryo, 'ＭＳ Ｐゴシック','Osaka';
font-weight:bold;
font-size:12px;
line-height:12px;
}
以上。
ブラウザでは、このように表示する。
↓をクリック。
http://rail.west223.net/HTML5/
HTML5なので、対応していない、IE8以前などは正常に表示されない可能性があります。
にほんブログ村 にほんブログ村
にほんブログ村
