教養と教育ページの作成

準備

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

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

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

テキストの呼び込み

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

画像の挿入

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
2. 「今日は用があり、行く処があるのだ」の直下に写真を挿入します。

マークアップ　大見出し、中見出し、段落、リスト

1. 「今日は用があり、行く処があるのだ」をh1タグで括ります。
2. 「主なボランティア活動：」をh2タグで括ます。
3. h2要素の直下の3行を番号なしリストにし、各リスト項目に仮のリンクを設定します。
4. 「パソコン初歩の研修提供」、「社会福祉関連の活動」、「会の活動を支える活動」をh3タグで括ます。
5. 「毎日は予定があり（教養・・・・役立っています。 」、「ＰＣなどＩＴの世・・・供しています。 」、「研修用教材や機器も用意しています 」、「広報や宣伝活動もあります」、「会の運営に携わる活動もあります 」をpタグで括ります。
6. 上記以外の部分を番号なしリスト設定します。
7. 「nav」要素内のリスト項目「ごあいさつ」削除します。
8. 「教養と教育」のli要素の直下に「ボランティア活動」のli要素を追記して仮のリンクを設定します。
9. 追記した「ボランティア活動」のa要素にクラス「level2」を設定します。
10. 「教養と教育」のa要素にクラス「current」を設定します。

ページ内リンク

1. 3つのh3タグにidを設定します。
2. 上記3.のリンク先を上で設定したidを指定します。

CSSの設定

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

   main ul	margin	20px 50px
   main h3	margin-top	150px

5. kyouyou.htmlのtitleタグの直下に2つのcssファイルのリンクのうち2番目のリンク先「../css/goaisatu.css」を「../css/kyouyou.css」に書き換えます。