1003｜webデザイン求職者支援受講記録｜#8

webクリエイター訓練

時間割

テスト
  • ボックス内にボックスがあるレイアウトをつくる。

タイプミスが一番厄介です。
出来たと思ってプレビューすると若干くずれがあり、なかなか形にならずにおりましたが、「：」を「；」にしていました。
最初に自宅で作った物は形は似ているもののボーダーを使っていました。講師ブログに掲載の画像が左右とボトムの幅が違うのでそれを作ろうとしたからです。
授業で「ボーダーを使うのは注意が必要」というお話がありました。IE6で崩れる恐れがあるそうです。くわしくは、この先授業で学ぶようです。
（制作時間100分）
講師ブログ（回答）

イラストレーター
  • グラデーション

CSまでしか使った事がなかったので、スライドバーがオブジェクト上に出るのは新鮮でした。小さいオブジェクトでは使いづらそうに見えました。

あまり使われないツールですが表などに使うと便利だそうです。（自分もこれは使ってます）あとアパレル業界で色の組み合わせを試すのに使っているやり方の紹介がありました。

  • 実技

黒い背景の上に線を描いてブレンドツールで線でグラデーションを表現したものを作りました。このような練習用のオブジェクトは120ｍｍ角を基本のサイズにするといいそうです。
20111004101606

課題

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1 column test</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
}

body{
background-color:#D2E5E5;
}

#container{
    font-weight:bold;
    width:800px;
    height:auto;
    margin:0 auto;
    padding:15px 0;
    background-color:#FFFFFF;
}
#header{
    width:770px;
    height:90px;
    margin:0 15px 15px 15px;
    background-color:#E6DCF0;
}
#wrapper{
    width:800px;
    margin:0 0 15px 0;
    overflow:auto;
}
#content{
    width:500px;
    height:300px;
    margin:0 15px 0 0;
    background-color:#CCC;
    float:right;
}

#sidebar{
    width:255px;
    height:300px;
    margin:0 0 0 15px;
    background-color:#CCC;
}
#footer{
    width:770px;
    height:90px;
    margin:0 0 0 15px;
    background-color:#DDF0D5;
    clear:both;
}
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>