第21回勉強会

日　時：
2015年6月12日　13:10～16:30
場　所：
アワーズ 研修室
出席者：
北條、福田、小野、河野、古屋、土生、山縣（敬称略）

新規ページの作成

6月10日水曜クラブで作成した趣味発見 なるほど楽しい ワード2013 ドリル チャレンジ19「清掃参加のお願いポスター」をウェブサイトに加工した。

  1. 画像の準備
    ワードの画像をコピーし、gif形式の画像としてワードに貼りつけ、これをウエブアートデサイナーに 移し、gif形式の画像として保存した。
  2. ページ構成
    ヘッダー、コンテンツ、フッターを含むコンテナーを作成した。
  3. 文字入力
    ワードのテキストをソース部分に貼りつけた。
  4. マークアップ
    テキストを区分ごとにｐタグで括った。ワードのテキストボックスに入っている2カ所はそれ ぞれdivで括りwaku1、waku2のIDをつけた。
  5. CSSの設定
    各Ｐ要素にクラスand/orIDをつけ、フォント及びフォントサイズを指定した。
    ID　waku1とwaku2はボーダーで枠線を指定し、 border-radiusで角丸に指定した。
    フォントの色変わりの部分は<span>で括りそれぞれの色を指定した。
  6. 背景色の指定
    コンテンツに背景色を指定する。
  7. 画像の配置（別添参照）
    熊手と落ち葉の画像は、コンテンツの背景画像として配置した。
    背景画像は下記のように指定する。

background-image :url(背景画像のファイル名);
background-repeat : no-repeat;
background-position : ｘ軸方向の位置 y軸方向の位置;

ビルダーでは1画像のみの指定で、CSS3で可能になった複数画像に対応していないので下記のとおり手書きする。background-imageにurl(背景画像のファイル名)を「.」(カンマ)でつないで列記する。background-repeat 及びbackground-positionについても同様にカンマでつないで列記する。（下記は3画像の場合）
ビルダーで背景色を後から設定すると、背景画像の指定が消えてしまうので要注意！

background-image :url(背景画像のファイル名),url(背景画像のファイル名),url(背景画像のファイル名);
background-repeat : no-repeat,no-repeat,no-repeat;
background-position : ｘ軸方向の位置 y軸方向の位置,x軸方向の位置 y軸方向の位置,x軸方向の位置 y軸方向の位置;

CSSの一例
body,div,h1,p padding 0px
margin 0px
#container margin auto
width 770px
#header width 100%
height 70px
margin-bottom 10px
#contents width 100%
background-color #5b9bd5
background-image url(aa.gif),url(bb.gif),url(cc.gif),url(dd.gif)
background-repeat no-repeat,no-repeat,no-repeat
background-position aapx aapx,bbpx bbpx,ccpx ccpx,ddpx ddpx
#footer width 100%
color #ffffff
background-color #000000
text-align center
margin-top 10px
p.big font-size 72pt
font-family HGS創英角ｺﾞｼｯｸUB
#waku1 border 3px solid #ffc000
border-radius 30px
padding 0.5em 1em
margin 30px 5px
width 620px
line-height 2em
background-color #fff
#waku1 p font-size 18pt
font-family HG明朝E
line-height 2em
#waku2 p font-size 18pt
font-family HG明朝E
line-height 2em
#waku2 border 3px solid #ffc000
border-radius 30px
padding 0.5em 1em
width 550px
margin 0px 5px 30px 180px
background-color #ffffff
p.dai font-size 26pt
font-family HGS創英角ｺﾞｼｯｸUB
p.toiawase margin-top 1em
p.denwa text-align center
span.kirei color #ffc000
span.shugo color #c45911