「ありのままに」ページの作成

準備

1. Jimdoありのままにページから、ヘッダー画像及び写真を取得し「img」フォルダーに保存します。
2. エクスプローラーを開きtextフォルダーの「volunteer.html」をコピーして、ファイル名を「arinomamani.html」に変更します。
3. Jimdoありのままにページ全体を選択しコピーして、メモ帳にコピーしておきます。

Bracketsの起動とファイルの起動

1. Bracketsの起動し、ファイルから「フォルダーを開く」をクリックし、準備で作成した「講習会」選択します。
2. 「arinomamani.html」を選択します。

テキストの呼び込み

1. 「main」要素の内容を削除します。
2. メモ帳にコピーしたテキストの「ありのままに日々活動中です！」から「趣味豊かに楽しんでいます」までを「main」要素内に貼り付けます。

画像の挿入

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
2. 「HP作成勉強会」、「パソコンの世界 」及び「趣味特技の世界 」の直下に写真を挿入します。

マークアップ　大見出し、中見出し、中見出し、段落、画像

1. 「ありのままに日々活動中です！」をh1タグで括ります。
2. 「HP作成勉強会」、「パソコンの世界 」及び「趣味特技の世界 」をh3タグで括ます。
3. h1の直下「ありのままの、日々の活動を紹介します。」をpタグで括ります。
4. h3要素の直下の写真とその説明文を「figure」タグで括り、説明文を「figcaption」タグで括ります。
5. 「ボランティア活動」のli要素を削除します。
6. 「ありのままに」のa要素に「class="current"」を追加設定します。
7. 「ありのままに」のli要素の下に「HP作成勉強会」li要素、「パソコンの世界 」li要素及び「趣味特技の世界」li要素を挿入し、それぞれ仮のリンクを設定します。
8. 上記3つのli要素のa要素にクラス「levele2」を設定します。

グループ分け

1. 「<h3>HP作成勉強会」から</main>の直前までをdivタグで括り、class「column」を指定します。
2. 「<h3>HP作成勉強会」から「<h3>パソコンの世界」の直前までをdivタグで括り、class「column3」を指定します。
3. 「<h3>パソコンの世界」から「<h3>趣味特技の世界 」の直前までをdivタグで括り、class「column3」を指定します。
4. 「<h3>趣味特技の世界」から</div class="column">の閉じタグ</div>の直前までをdivタグで括り、class「column3」を指定します。

CSSの設定

1. cssのリンク先を「column4.css」に指定したlink要素を削除します。