PDF版はこちら

基本レイアウトデザイン（ 要素初期設定 ）
要素
初期設定値
*
マージン（すべて 0）、パディング（すべて 0）、ボーダー（none, 0）、フォント（ファミ
リ：”Hiragino Kaku Gothic Pro”,”MS PGothic”,sans-serif、スタイル：normal、太さ：normal）
、
テキスト（インデント：0、左寄せ、装飾：none、垂直方向：baseline）
、行の高さ（normal）
、
空白の扱い（normal）、アウトライン（none）
html, body, div, p,
ボックス生成規則（block）
h1, h2, h3, h4, h5,
h6, address, hr,
pre, blockquote,
ul, ol, dl, dd, dt,
form
head
ボックス生成規則（none）
li
ボックス生成規則（list-item）
table
ボックス生成規則（table）
tr
ボックス生成規則（table-row）
thead
ボックス生成規則（table-header-group）
tbody
ボックス生成規則（table-row-group）
tfoot
ボックス生成規則（table-footer-group）
col
ボックス生成規則（table-column）
colgroup
ボックス生成規則（table-column-group）
td, th
ボックス生成規則（table-cell）
caption
ボックス生成規則（table-caption）
button,
textarea,
ボックス生成規則（inline-block）
input, select
pre, code, kbd,
フォントファミリ（monospace）
samp
pre
空白の取り扱い（pre）
hr
マージン（0.5em 0）
、枠囲み（1px solid）
a[href]
装飾（underline）
:focus
アウトライン（none）
その他
UA 依存
11
基本レイアウトデザイン（ 基本スタイル ）
要素
スタイル
body
背景画像（url(../images/back.png)、縦横繰り返し）
、文字（サイズ：medium、色：#000）
、
背景色（#666）
p
マージン（1em 0）
h1
幅（400px）
、高さ（100px）
、マージン（0 auto）
、背景画像（url(../images/maintitle.png)、
繰り返し無し）、テキスト（インデント：-1000em）
h2
マージン（上：1em）、パディング（左：0.5em）、枠囲み（3px double #fff）、フォント
（ファミリ：”ヒラギノ明朝 Pro”,”ＭＳ 明朝”,serif、サイズ：1.5em）、文字（色：#eee）、
背景色（#666）
h3
マージン（上：1em）
、パディング（左右共に：0.5em）
、ボーダー（左右共に：1.2em solid
#000、上下共に：1px solid #000）、フォント（ファミリ：”ヒラギノ明朝 Pro”,”ＭＳ 明
朝”,serif、サイズ：1.2em）
h4
マージン（上：1em）
、パディング（左：0.5em）
、ボーダー（左：1.2em solid #000、下：
1px solid #000）、フォント（ファミリ：”ヒラギノ明朝 Pro”,”ＭＳ 明朝”,serif、サイズ：
1em）
h5
マージン（上：1em）
、パディング（左 0.5em）
、ボーダー（下：1.2em solid #000）
、フォ
ント（ファミリ：”ヒラギノ明朝 Pro”,”ＭＳ 明朝”,serif、サイズ：0.9em）
h6
マージン（上：1em）
、パディング（左：0.5em）
、ボーダー（左：1.2em solid #000）
、フォ
ント（ファミリ：”ヒラギノ明朝 Pro”,”ＭＳ 明朝”,serif、サイズ：0.8em）
address
pre
blockquote
フォント（サイズ：0.75em）
マージン（1em 0）
マージン（上下左右：1em）
、パディング（上下左右：1em）
、フォント（サイズ：0.9em）
、
背景色（#ccc）
ul, ol
ul ul, ol ol, ul ol, ol ul
マージン（1em 0）、リストマーク位置（inside）
マージン（左：2em）
dl
マージン（1em 0）
dd
マージン（左：2em）
sub, sup
フォント（サイズ：0.83em）
sub
垂直位置（sub）
sup
垂直位置（super）
table
マージン（1em 0）、ボーダーモデル（collapse）
th, td
枠囲み（solid 1px）
12
基本レイアウトデザイン（ レイアウトスタイル ）
領域
要素
コンテンツ
ボディ部
body
背景画像 (back.png)（和紙の雰囲気で制作）
body 領域
div#bodyArea
背景画像 (../images/leftback.png)（横方向のグラデーション：縦繰
り返し）最小幅 960px
ヘッダ領域
div#header
背景画像 (../images/rightback.png)（leftback.png を左右反転した画
像：縦繰り返し：右寄せ）枠囲み（実線、1px、#666666）
サイト見出し
h1
背景画像（maintitle.png)（行書体「古典を読もう」）、テキスト（古
典を読もう）
フッタ領域
div#footer
フロートクリア（both）、枠囲み（solid 1px #ccc）、パディング（上
下共に：0.5em）
、テキスト（センタリング、
「古典を読もう - address
要素」）
div#footer adrress
テ キ ス ト「Copyright 2010-2011 HIROTAKA YAMASHITA. All
Rights Reserved.」
リンク領域
div#leftArea
領域見出し
div#leftArea h2
フロートブロック（left）、幅（240px）、最小高さ（600px）
幅（178px）、マージン（上：0）、パディング（0.5em 0）、テキスト
センタリング
メニュー領域
div#leftArea ul
マーク種類（none）、マージン（上下左右：0）
メニュー項目
div#leftArea ul li
マージン（下：2px）
div#leftArea ul a
ボックス生成規則（block）、幅（180px）、高さ（45px）、枠囲み
（1px solid #999）、テキスト（インデント：-1000em）、背景画像
(../images/menu.png)（配置：top)
div#leftArea ul a:hover
コンテンツ領域
div#contentsArea
背景画像 (../images/menu.png)（配置：bottom)
最小高さ（600px）
、マージン（左：240px）
、パディング（上下共に：
1em）
13
基本レイアウトデザイン（ 画像 ）
画像名称
ファイル名
サイズ
body 要素背景画像
back.png
フォルダ名
/images/
100px × 100px
制作ツール
GIMP 2.6
leftback.png
フォルダ名
/images/
240px × 45px
制作ツール
GIMP 2.6
画像
画像名称
ファイル名
サイズ
bodyArea(body 領域) 背景画像
画像
画像名称
header(ヘッダ領域) 背景画像
ファイル名
rightback.png
フォルダ名
/images/
サイズ
240px × 45px
制作ツール
GIMP 2.6
maintitle.png
フォルダ名
/images/
400px × 100px
制作ツール
GIMP 2.6 及び Inkscape 0.48
menu 書籍名.png
フォルダ名
/images/
180px × 90px（マウスオーバーアクショ
制作ツール
GIMP 2.6 および Inkscape 0.48
画像
画像名称
ファイル名
サイズ
h1(サイト見出し) 背景画像
画像
画像名称
div#leftArea ul a(メニュー項目) 背景画
像：サンプル
ファイル名
サイズ
ン用）
画像
14
基本レイアウトデザイン（ スタイルシート ）
スタイルシート名称
ファイル名
フォルダ名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
共通スタイルシート
common.css
/css/
@charset "UTF -8";
/*
共通スタイルシート
common .css - UTF -8 - Copyright 2010 HIROTAKA YAMASHITA . All Rights Reserved .
*/
/*
スタイル初期設定
*/
* {
margin : 0;
padding : 0;
border : none 0;
font - family : " Hiragino Kaku Gothic Pro ","MS PGothic ",sans - serif ;
font - style : normal ;
font - weight : normal ;
text - indent : 0em;
text - align : left;
text - decoration : none;
vertical -align : baseline ;
line - height : normal ;
white -space : normal ;
outline - style : none;
}
html ,body ,div ,p,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
address ,hr ,pre ,
blockquote ,ul ,ol ,
dl ,dd ,dt ,form
{ display : block }
head
{ display : none }
li
{ display : list -item }
table
{ display : table }
tr
{ display : table -row }
thead
{ display : table -header - group }
tbody
{ display : table -row -group }
tfoot
{ display : table -footer - group }
col
{ display : table - column }
colgroup
{ display : table -column - group }
td , th
{ display : table -cell }
caption
{ display : table - caption }
pre , code ,
kbd , samp
pre
{ font - family : monospace ; }
{ white - space: pre }
15
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
button , textarea ,
input , select
{ display : inline -block }
hr
{ border : 1px inset }
a[href]
:focus
/*
{ text - decoration : underline ; }
{ outline - style : none }
コンテンツ要素基本スタイル
*/
body {
background - image : url (../ images /back.png );
background - repeat : repeat ;
font -size: medium ;
color: #000;
background - color : #666;
}
p {
margin : 1em 0;
}
h1 {
width: 400 px;
height : 100 px;
margin : 0 auto;
background - image : url (../ images / maintitle .png );
background - repeat : no - repeat ;
text - indent : -1000 em;
}
h2 {
margin -top: 1em;
padding -left: 0.5 em;
border : 3px double #fff;
font - family : " ヒ ラ ギ ノ 明 朝 Pro "," Ｍ Ｓ 明 朝 " , serif ;
font -size: 1.5 em;
color: #eee;
background - color : #666;
}
h3 {
margin -top: 1em;
padding -left: 0.5 em;
padding - right : 0.5 em;
border -left: 1.2 em solid #000;
border -right : 1.2 em solid #000;
border -top: 1px solid #000;
border - bottom : 1px solid #000;
font - family : " ヒ ラ ギ ノ 明 朝 Pro "," Ｍ Ｓ 明 朝 " , serif ;
font -size: 1.2 em;
}
h4 {
margin -top: 1em;
padding -left: 0.5 em;
16
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
border -left: 1.2 em solid #000;
border - bottom : 1px solid #000;
font - family : " ヒ ラ ギ ノ 明 朝 Pro "," Ｍ Ｓ 明 朝 " , serif ;
font -size: 1em;
}
h5 {
margin -top: 1em;
padding -left: 0.5 em;
border -left: 1.2 em solid #000;
font - family : " ヒ ラ ギ ノ 明 朝 Pro "," Ｍ Ｓ 明 朝 " , serif ;
font -size: 0.9 em;
}
h6 {
margin -top: 1em;
padding -left: 0.5 em;
border -left: 1.2 em solid #000;
font - family : " ヒ ラ ギ ノ 明 朝 Pro "," Ｍ Ｓ 明 朝 " , serif ;
font -size: 0.8 em;
}
address {
display : inline ;
font -size: 0.75 em;
font - style : normal ;
}
hr {
margin : 0.5 em 0;
border : 1px solid;
}
pre {
margin : 1em 0;
}
blockquote {
margin : 1em;
padding : 1em;
font -size: 0.9 em;
background - color : #ccc;
}
ul ,ol {
margin : 1em 0;
list -style - position : inside ;
}
ul ul ,ol ol ,ul ol ,ol ul {
margin -left: 2em;
}
dl {
margin : 1em 0;
}
17
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
dd {
margin -left: 2em;
}
sub , sup {
font -size: 0.83 em
}
sub { vertical - align : sub }
sup { vertical - align : super }
table {
margin : 1em 0;
border - collapse : collapse ;
}
th ,td {
border : solid 1px;
}
/*
レイアウト基本スタイル
*/
/*
b o d y 領 域 */
# bodyArea {
min -width : 960 px;
background - image : url (../ images / leftback .png );
background - repeat : repeat -y;
}
/*
ヘ ッ ダ 領 域 */
# header {
border : solid 1px #666666;
background - image : url (../ images / rightback .png );
background - repeat : repeat -y;
background - position : right ;
}
/*
# footer {
clear: both;
border : solid 1px #ccc;
padding -top: 0.5 em;
padding - bottom : 0.5 em;
text - align : center ;
}
フ ッ タ 領 域 */
/*
# leftArea {
float:left;
width :240 px;
min - height : 600 px;
}
# leftArea h2 {
width: 178 px;
padding : 0.5 em 0;
メ ニ ュ ー 領 域 */
18
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
text - align : center ;
margin -top: 0;
}
# leftArea ul {
list - style : none;
margin : 0;
}
# leftArea ul li {
margin - bottom : 2px;
}
# leftArea ul a {
display : block;
width: 180 px;
height : 45px;
border : 1px solid #999;
text - indent : -1000 em;
background - image : url (../ images /menu.png );
background - position : top;
}
# leftArea ul a: hover {
background - position : bottom ;
}
/*
# contentsArea {
min - height : 600 px;
margin -left: 240 px;
padding -top: 1em;
padding - bottom : 1em;
}
コ ン テ ン ツ 領 域 */
19