サンプルページの作成
作成準備
テキストをワードで開き、全体をコピーしてメモ帳に貼りつける。
画像部分を「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 |