装飾をする
トップページと詳細ページに装飾をします。
コピペが多いので、3つのファイルを開いておくと手間が省けます。
背景に色を付ける
「sozai.html」を開き<body>に背景色を指定します。
<body bgcolor="カラーコード">
<body bgcolor="#ffeee6">これを「flour.html」「vegetable.html」にも追加します。
「#〇〇〇〇〇〇」は色を指定する際に使うコードで、数字やアルファベットの組み合わせで成り立っています。
背景、文字、枠線などに色を付けることができます。
ブラウザで確認
<div></div>の幅を指定
<div></div>の幅を指定して、センター揃えにする
<div width="700" align="center">「flour.html」「vegetable.html」にも追加します。
ブラウザで確認
<table>の枠を装飾する
テーブルに色を付けたり、線の太さ（cellspacing)や余白(cellpadding)を整えます。
いろいろ数値を変えてみて、お好みの設定をしてみてください。
<table border="1" bgcolor="#ffffff" cellpadding="5" cellspacing="0" bordercolor="#ccc">
ブラウザで確認
以上で「素材サイトを作ってみよう」は終了です。
「HTMLでホームページを作る」ことができましたね^^
もし表示が違う場合は、下記を確認してみてください。
・タグの閉じ忘れがないか
・< または >が抜けていないか
・" "が抜けていないか
・スペルミスがないか
2025/12/10
