会員ページへ

ごあいさつページの作成

準備

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

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

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

テキストの呼び込み

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

画像の挿入

  1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
  2. 「ボランティア活動で教養？教育？」の直下及び「ありのままの」の直下にそれぞれの写真を挿入します。
  3. 「お知らせ」画像の呼び込み先を変更します。
    例　img/osirase.gif → ../img/osirase.gif (「../」を加える)

リンクの変更と設定

  1. 「パソボラ講習会」へのリンク先を「koushu.html」に変更します。
  2. 「ホーム」へのリンク先を「../index.html」に設定します。
  3. 外部CSSのリンク先を変更します。「css/base.css」→「../css/base.css」
  4. 「index.html」を開き、「ごあいさつ」ページへのリンクを設定します。

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

  1. 「毎日元気一杯なシニアです！」をh1タグで括ります。
  2. 「ボランティア活動で教養？教育？」と「ありのままに」をh2タグで括ます。
  3. 「横浜市に住まい、・・・シニアです。」、「ぱそぼらという・・・おります。」、「自らもパソ・・・おります。 」、「新しいことに・・・紹介しています。」、「この他にも独自の活動をしております。これらも紹介します。 」をpタグで括ります。
  4. 「ホーム」のリンクに設定してある「class="current"」を削除します。
  5. 「ごあいさつ」のリンクにクラス「current2」を追記します。

マークアップ　レイアウト

  1. 「<h2>ボランティア活動で教養？教育？</h2>」の直下の写真をfigureタグで括り、クラスを「right」に指定します。
  2. 「<h2>ありのままに</h2>」の「h2」にクラスを「clear」に指定します。
  3. <h2 class="clear">ありのままに</h2>の直下の写真をfigureタグで括り、クラスを「left」に指定します。

CSSファイルの作例とリンクの設定

  1. h2要素「ボランティア活動で教養？教育？」の中の「ぱそぼら」部分をクリックするとパソボラのホームページにジャンプするようにリンクを設定します。
  2. ツールバーの「表示」をクリックして「左右分割」にチェックを入れます。
  3. 右側ペインにカーソルを入れ、「base.css」を開きます。
  4. 下表により「goaisatu.html」に設定された要素のうち各ページ共通部分のCSSを追記し、上書き保存します。
    main h2 margin 25px 0 20px
    padding 5px 0 5px 15px
    border-left 9px solid #69cceb    *
    font-size 18px
    color #3A3A3A    *
    nav li a.current2 color #000
    background-color #69cceb    *
    text-decorationr none
    font-weight bold
    * 各自のサイトの色に合わせる。
  5. ファイルから「新規作成」を選択します。
  6. 画面右下の「text」の▼をクリックして「CSS」を選択します。
  7. 1行目に「@charset "UTF-8";」と入力します。
  8. cssフォルダーにファイル名「goaisatu.css」として保存します。
  9. 「goaisatu.html」について、head要素内の２番目のリンク先「css/column3.css」を「../css/goaisatu.css」に書き換えます。
    <link rel="stylesheet" href="../css/goaisatu.css" type="text/css">
  10. 「goaisatu.css」について、2行目以降に 文章の配置についてのSCCを下表により設定します。
    figure.right float right
    margin-left 15px
    figure.left float left
    margin-right 15px