第9回勉強会

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

第8回勉強会宿題の解説

  • 概ね適正に作成されていた。
    改善点を指摘した。
  • 宿題の主要部分naviについておさらいをした。

画像を既定サイズに切り出す方法

  • 画像をウエブアートデザイナーで開き使用するサイズ圧縮する。
  • ウエブアートデザイナーのキャンバスの大きさを切り出すサイズに設定する。
  • 大きさを切り出す部分をキャンバスに合わせて表示させ四角形に切り抜く。
  • web用保存ウイザードに従い保存する。

CSSによるレイアウト練習の続き

  • 実施内容
    文字入力（予め用意したサイトからコピペ）、マークアップ、スタイルの設定、画像の挿入、配置を実施し完成させた。
CSSの設定
* 4方向パディング ０
4方向マージン 0
#main 4方向マージン 自動
4方向ボーダー 2px solid オリーブ
幅 640px
高さ 自動
4方向パディング 0
#header 背景色 黄緑
高さ 100px
背景画像 url(../img/xx_05_1.jpg)
#column 上方向パディング 10px
左方向パディング 5px
幅 145px
回り込み 左
#cont 水平方向の位置 左揃え
上方向パディング 10px
左方向マージン 5px
右方向マージン 5px
幅 480px
回り込み 右
#footer 上方向ボーダー 1px 点線 olive
高さ 20px
回り込み解除 両方
#navi 背景色 黒
上方向パディング 10px
左方パディング 50px
幅 590px
回り込み 左
#navi ul リストスタイル 無し
#navi ul li 垂直方向の位置 中央
水平方向の位置 中央揃え
4方向パディング 0px
上下方向マージン 0px
右方向マージン 5px
左方向マージン 0px
幅 100px
高さ 自動
回り込み 左
#navi ul li a 背景色 白
文字飾り 無し
表示 block
#navi ul li a:hover 前景色 オリーブ
背景色 黄色
body フォントサイズ small
行の高さ 18px
水平方向の位置 中央揃え
#header h1 フォントサイズ 大きい
前景色 白
水平方向の位置 左揃え
上方向パディング 15px
左方向パディング 10px
#cont h2 フォントサイズ 16px;
上下方向パディング 5px
左方向パディング 10px
上方向ボーダー 1px solid olive
左方向ボーダー 10px solid olive
右方向ボーダー 1px solid olive
下方向ボーダー 1px solid olive
下方向マージンﾝ 15px
#cont h3 フォントサイズ 12px
前景色 白
背景色 オリーブ
上下方向パディング 2px
左方向パディング 5px
上下方向マージンﾝ 10px
#column h4 前景色 白
背景色 オリーブ
上方向パディング 3px
#column p 水平方向の位置 左揃え
上下方向パディング 3px
左右方向パディング 10px
4方向マージン 0px
4方向ボーダー 1px solid olive
#cont img 回り込み 右
.imgclear 回り込み解除 両方

注）薄字：前回まで、黒字：前回の宿題、赤字：今回