サンプルページの作成
作成準備
テキストをワードで開き、全体をコピーしてメモ帳に貼りつける。
画像部分を「images」フォルダーに保存する。(webアートデザイナーを使うと便利)
HTML
サイトを開きHTMLの新規作成をする。
メモ帳に貼りつけたテキストを<body>と</body>の間に貼りつける。
相当部分に画像を挿入する。
タイトル部分を「h1」、表部分を除きその他を「p」タグで括る。
表部分に3行2列の表を挿入し、該当項目をセルに移動する。
CSSの設定
下表とおり設定する
* | padding | 0px |
margin | 0px | |
body | font-family | "HG丸ゴシックM-PRO", sans-serif |
line-height | 2 | |
font-size | 12pt | |
#container | margin | 20px auto |
width | 640px | |
h1 | font-size | 20pt |
border-bottom-width | 3px | |
border-bottom-style | double | |
border-bottom-color | black | |
width | 450px | |
margin | 20px auto | |
line-height | 1 | |
#setumei | text-align | center |
table | font-size | 16pt |
border | 3px double #00b050 | |
border-collapse | collapse | |
margin | 30px auto 50px | |
width | 90% | |
tr,td | border | 3px double #00b050 |
td | padding | 5px |
.img | text-align | right |
margin-bottom | 50px | |
#denwa | text-indent | 4em |
#waine | float | right |