リセットCSS後編 - HTML5で縦書き年賀状3

前回ので、ＯＫなのですが、見やすくするために、 body タグ内に直接書いてあるスタイルも style タグの中に移します

<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8 
"/> <style type="text/css">
html{
	background: #fff;
	color: #000;
}

body{
	font: 12px/1.2 "MS Pゴシック",Arial,Helvetica,Verdana,sans-serif;
	margin: 0;
	padding: 0;
}
div,p ,th,td 
{
	margin: 0;
} img{
	border: 0;
}
h1,h2,h3,h4,h5,h6{
	font-size: 100%;
	font-weight:bold;
	margin:1em 0;
	padding: 0;
}
em, strong {
	font-style: normal;
	font-weight: bold;
}
ol, ul, dl {
	margin:1em;
}
ol li {
	list-style:decimal inside;
}
ul li {
	list-style:disc inside;
}
dl dd, ol li, ul li {
	margin-bottom:0.5em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
caption,th{
	font-style: normal;
	font-weight: normal;
	text-align: left;
} 
/*ここまでが、リセットCSS*/

body,outer{
	width:10cm;
	height:14.8cm;
	padding:0;
}
div.outer{
	background:url('URL') bottom right no-repeat;
	writing-mode:tb-rl;
	font-family:'HG正楷書体-PRO'; border:1px solid #00f; /* 見やすいように青い枠線をつけています */ 
}
p{
	font-weight:bold;
	font-size:2em;
}
p.big{
	font-size:6em;
	color:#d00;
	margin:20px 20px 0 0;
}
p.new_year{
	font-size:1.6em;
	margin-top:1em;
}
p.name{
	font-size:2em;
	margin-top:6em;
}
div.outer div{
	margin:17em 15em 0 0;
	padding:0;
}
</style> 
<title>年賀状</title>
</head>
<body> <div class="outer">
	<p class="big">謹賀新年</p>
	<p class="new_year">慎んで新年のお喜びを申し上げます</p>

	<div>
		<p>東京都千代田区永田町一ノ一</p>
		<p class="name">やまだ たろう</p>
	</div>
</div> 
</body>
</html>

これを「 HTML5で縦書き年賀状1 」と同じように保存して、InternetExplorerで見れば、意図したレイアウトで表示されます。ファンブログのスタイルシートを読み込んでいないので背景のピンク色も消えています。

さらに言うと <div class="outer"> は冗長です。
スタイルシートの

body,outer{
	width:10cm;
	height:14.8cm;
	padding:0;
}
div.outer{
	background:url('URL') bottom right no-repeat;
	writing-mode:tb-rl;
	font-family:'HG正楷書体-PRO';
	border:1px solid #00f; /* 見やすいように青い枠線をつけています */
}

を下のように変更。

body{
	width:10cm;
	height:14.8cm;
	padding:0;
	background:url('URL') bottom right no-repeat;
	writing-mode:tb-rl;
	font-family:'HG正楷書体-PRO';
	border:1px solid #00f; /* 見やすいように青い枠線をつけています */
}

下の、 div.outer も削除して、div だけにします。

 div.outer 
div{　 /* この行のdiv.outerを削除する */ 
margin:17em 15em 0 0;
	padding:0;
}

そして、 body の中を、こう変更します。

<body>
	<p class="big">謹賀新年</p>
	<p class="new_year">慎んで新年のお喜びを申し上げます</p>

	<div>
		<p>東京都千代田区永田町一ノ一</p>
		<p class="name">やまだ たろう</p>
	</div>
</body>

これでスッキリしました。ただし、今のままでは青い枠線も印刷されてしまいます。この枠線、レイアウトする時にはあった方が見やすいのですが、印刷する時だけ消せないでしょうか？ということで、次回はmedia属性について。

今回、この記事を書いて、結果を確かめると狙い通りに表示されず３０分くらい悩みました。理由は簡単で、たった1文字の打ち間違いでした。

{ としなければいけないところが、 [ となっていたからでした。

コロンとセミコロンとかもすぐ近くにあるから打ち間違えやすいんだよな。形も似ているし、見ても気づかない。何千行もあるプログラムがたった１文字打ち間違えただけで動かなくて、一晩悩んだこともあります。皆さんも注意しましょう！

豆知識スタイルシートの最初に

html{
font-size:62.5%;
}

と書くと、１文字が10ピクセルになります。
リキッドレイアウトを作る時などは、こうしてから、すべての幅をemで指定すると作りやすいです。リキッドレイアウトというのは、レイアウトをそのままに保ちつつ、画面の大きさに合わせて、サイズが変わるレイアウトです。

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

リセットCSS後編 - HTML5で縦書き年賀状3

HTML、CSS、JavaScript、スパムと悪徳商材の対策