「ＨＰ作成勉強会」ページの作成

準備

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

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

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

テキストの呼び込み

1. 「main」要素の内容を削除します。
2. メモ帳にコピーしたテキストの「ＨＰ作成の勉強会中です！」から「・・・から申し込みください 。」までを「main」要素内に貼り付けます。

画像の挿入

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。

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

1. 「ＨＰ作成の勉強会中です！」をh1タグで括ります。
2. 「参加者作品」及び「開催案内」をh2タグで括ます。
3. h1要素の直下の「誰でもが・・・・・います。」をpタグで括ります。
4. 「<h2>参加者作品</h2>」直下の「参加者の作品一覧は、参加者作品のページへ！」をpタグで括ります。
5. 「参加者作品のページへ！」の部分に仮のリンクを設定します。
6. nav部分「ありのままに」のa要素のクラスを削除します。
7. nav部分「ＨＰ作成勉強会」のa要素にクラス「current2」を追記します。
8. nav部分「ＨＰ作成勉強会」のli要素の直下にリンク付きli要素「参加者作品のページ」を追記し、a要素にクラス「level3」を設定します。

PDFファイルをページ内に埋め込んで表示する

ここではGoogle Docs Viewerを利用する方法を記載します。

1. ローカルサイトにpdfフォルダーを作ります。
2. 埋め込むPDFのファイル名を半角英数にして、pdfフォルダーに保存します。
3. このファイルをアップロードします。
4. アップロードしたファイルの絶対URLを取得します。
5. 取得したURLをエンコードします。
6. 「<h2>開催案内</h2>」の直下に「 <iframe src="http://docs.google.com/viewer?url=「ファイルのURL」&embedded=true" width="幅" height="高さ" style="border: none;"></iframe>」を記載します。
   ここで「ファイルのURL」は上記5.でエンコードしたURLで指定します。

先のJimdo講習会の時に各自のグーグルドライブにアップロードしたファイルを使用することも出来ます。又 PDFファイルを画像化して画像として貼り付けるのが簡単です。

PDFファイルのダウンロード設定

1. 「同じものを以下からダウンロードできます。」にh3を設定します。
2. 「ダウンロード」から「ダウンロード」までをdivで括りクラスを設定します。
3. 上記divにCSSでdisplayをflexに設定します。
4. 上部の「ダウンロード」をPDFのアイコン画像に入れ替えfigureタグで括ります。
5. 挿入したアイコン画像にPDFファイルへのリンクを設定します。
6. 「新規開催の勉強会、２０１８年９月開講」から「ダウンロード」までをdivで括ります。
7. 各行をpで括ります。
8. 「新規開催の勉強会、２０１８年９月開講」を太字に設定します。
9. 下部の「ダウンロード」をCSSでボタン状に加工し、PDFファイルへのリンクを設定します。（border で枠線を入れ、背景色を設定、角丸はborder-radius）
10. 「参加を希望・・・・申し込みください 。」をｐで括ります。

CSSの設定

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