試行錯誤ページ158


表の中に入っているものは ぼやけるので、表内のものは なし
1 ↓ width170
top:10px;left:40px;

 
2 ↓ width200
top:10px;left:40px;

3 ↓ width170
top:10px;left:40px;

 
4 ↓ width200
top:10px;left:40px;

5 ↓ width170
top:10px;left:40px;

 
6 ↓ width200
top:10px;left:40px;

ココからワイド版
※フォントが大きいと、そのぶん右側にずれる。
7 ↓ width170
top:10px;left:40px;

 
8 ↓ width200
top:10px;left:40px;

9 ↓ width170
top:10px;left:40px;

 
10 ↓ width200
top:10px;left:40px;

11 ↓ width170
top:10px;left:40px;

 
12 ↓ width200
top:10px;left:40px;

 

試行錯誤147を改良したページ

↓ 画像の上に動く文字(メッセージを1種類しか使えない、改行可)

文字の縦の位置はline-heightで可だが、
横の位置はリセットcss などである程度までは可だが、微調整は難しい
cf『ボックスモデル css』