ボランティア活動ページの作成

準備

1. Jimdoボランティア活動ページから、ヘッダー画像及び写真を取得し「img」フォルダーに保存します。
2. エクスプローラーを開きtextフォルダーの「kyouyou.html」をコピーして、ファイル名を「volunteer.html」に変更します。
3. Jimdoボランティアのmain部分を選択しコピーして、メモ帳にコピーしておきます。

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

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

テキストの呼び込み

1. 「main」要素の内容を削除します。
2. メモ帳にコピーしたテキストを「main」要素内に貼り付けます。

画像の挿入

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
2. 「ＩＴ講習」、「応用講習」及び「若芽会」の直下に写真を挿入します。
3. 「Ａの家」、「Ｂセンター」、「Cショップ」及び「Ｄの会 」の直下にイラストを挿入します。

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

1. 「ボランティア活動に集中してます！」をh1タグで括ります。
2. 「パソコン初歩の研修提供」と「福祉施設訪問でのパソコン操作支援」をh2タグで括ます。
3. 「ＩＴ講習」、「応用講習」、「若芽会」、「Ａの家」、「Ｂセンター」、「Cショップ」及び「Ｄの会 」をh3タグで括ます。
4. h1とh2要素の直下のテキスト及び「main」閉じタグの直前のテキストpタグで括ります（4箇所）。
5. 「ＩＴ講習」、「応用講習」及び「若芽会」の写真とその説明文を「figure」タグで括り、説明文を「figcaption」タグで括ります。
6. 「Ａの家」、「Ｂセンター」、「Cショップ」及び「Ｄの会 」の写真を「figure」タグで括ります。
7. 「教養と教育」のa要素に設定してある「class="current"」を削除します。
8. 「ボランティア活動」のa要素に「class="current2"」を追加設定します。

グループ分け

1. 「<h3>ＩＴ講習」から次の<h2>の直前までをdivタグで括り、class「column」を指定します。
2. 「<h3>Ａの家」から次のpタグの直前までをdivタグで括り、class「column」を指定します。
3. 「<h3>ＩＴ講習」から「<h3>応用講習」の直前までをdivタグで括り、class「column3」を指定します。
4. 「<h3>応用講習」から「<h3>若芽会」の直前までをdivタグで括り、class「column3」を指定します。
5. 「<h3>若芽会」から</div class="column">の閉じタグ</div>の直前までをdivタグで括り、class「column3」を指定します。
6. 「<h3>Ａの家」とその画像、「<h3>Ｂセンター」とその画像、「<h3>Cショップ」とその画像、「<h3>Ｄの会」とその画像をそれぞれdivタグでで括り、class「column4」を指定します。

CSSの設定

1. ファイルから「新規作成」を選択します。
2. 画面右下の「text」の▼をクリックして「CSS」を選択します。
3. 1行目に「@charset "UTF-8";」と入力します。
4. 2行目以降に 文章の配置についてのSCCを下表により設定し、cssフォルダーにファイル名「column4.css」として保存します。
   

   .column4	width	152px
   .column4 figure	text-align	center

5. title要素の直下に2つのcssファイルのリンクのうち2番目のリンク先「../css/kyouyou.css」を削除ます。
6. cssのリンク先を「column3.css」に指定したlink要素及び「column4.css」に指定したlink要素を追記します。