トップページの修飾

レイアウト

1. 背景に使用する画像を「images」フォルダーに保存します。
2. Bracktsで「index.html」を開きます。
3. body要素を「<div id="wrapper">」と「</div>」で括ります。
4. h1要素を「<header>」と「</header>」で括ります。
5. h2要素から「参加者一覧ページへ戻る」の直前までを「<main>」と「</main>」で括ります。
6. div ID wrapperの閉じタグ「</div>」の直前にfooter要素挿入します。
7. 各作品へのリンクグループを「<div class="box">」と「</div >」で括ります。
8. 上書き保存します。
   完成イメージ

スタイルシートの作成

1. brackts編集画面を左右に分割し、右側に新規ファイルを作成します。
2. 新規ファイルについてファイルの種類を「CSS」にし、下表のとおり設定して「style」フォルダーに「top.css」として保存します。
3. 「index.html」のhead要素内に「top.css」を呼び込むlinkを設定し上書き保存します。
   <link rel="stylesheet" href="style/top.css">
4. 「index.html」のhead要素内にviewportを設定するメタタグを挿入します。
   <meta name="viewport" content="width=device-width, initial-scale=1.0">