2007.4.21.sat.
第3回
今回はCSSの有効的な使い方を学んでいきました。
1.サイトの管理
まず、前回のリモート情報を変更しました。
そしてサーバーのアップロードやダウンロードに便利な同期という方法を学びました。
この同期とは、ローカル（PCのハードディスク）とサーバー（インターネット上で公開されている空間）が同 じ状態を保てます。
例えば大規模なサイトを複数のチームで更新作業等をしている時にはとても便利です。
自分のPCに保存されていた、（公開中のページより）古いデータを誤ってアップロードしてしまうと大変な事になってしまいます。
他のデザイナーが該当ページを更新していても、昔の情報に戻ってしまう、「先祖がえり」とい う現象を招いてしまいます。
そんな時に、作業前は必ず同期をとるよう徹底することで、常に最新のデータをサーバーよりダウンロードできます。
大人数で同じサイトを管理するときには、必ず同期を取るようにしましょう。
2.背景画像の作り方
サイトを見ていると、背景に斜線や横線などの繰り返し画像が使われているのをよく見かけますよね。
今回は斜線の背景を作ってみます。
大きな画像を貼り付けると、データが重く表示に時間がかかってしまい、見ている人にはストレスになってしまいます。
そこで、小さな画像を貼り付け、繰り返し表示するように指示します。
画像がきれいに繰り返されるように、そしてできるだけ小さく切り出します。
多くの模様は、10ピクセル×10ピクセル内で書き出せるものです。
それでは、Fireworks で画面を大きくして見てみましょう。
書き出しは図柄がはっきりしているものはGIFで書き出してオッケーです。
一つの背景画像のデータがとても軽く、これならケータイサイトでもすぐに表示されます。
みなさん切り出すサイズを決めるのに少し戸惑ったようですね。
一度事を掴んでしまえば、どんな模様をした繰り返し画像でも上手に切り出すことが出来るようになります。
いろんな模様で練習してみましょうね！
◆↓↓↓こちらが今回作った画像です。
　　
3.ＣＳＳ　DIVタグ
本題のCSSに入っていきます。
<DIV></DIV>タグを挿入します。
<DIV class=”○○○○○”>と、<DIV></DIV>タグにclassをつ けるのが一番良いでしょう。
<DIV>は改行の <br> タグも必要ないので便利です。
その変わりデフォルトでは、1行に一つしか使えません（入りません）。
フォントの色やサイズを変えるには<span></span>を使いま しょう。
注意点として、文字をコピーペーストする時に、重複する余計な<span></span>が入りやすいので注意しましょう。
今回はタイトル文字に背景画像と、アイキャッチになるラインを入れてみました。
一度作ってみてから背景を変えてみたり、文字の大きさ・色・高さを変えてみたり、クイックタグ編集で 簡単にできますね！
これがCSSの良いところです。
色や大きさを変えていろいろ慣れるように実験してみました。
次に全く同じものをTABLE タグを使って作ってみます。
見た目では同じモノがつくれます。
しかしソースコード（HTML文章）を見てみると、<DIV>だと1行でつくれたものが
<TABLE>タグで作ると、とても長いソースコードになってしまいます。
この差は歴然ですね！
複数のページに同じタイトルがあったら・・・
そうです。CSSで作っていれば、CSS書類を更新するだけで、全ページ、全サイトの変更が自動的に行えます。
もし・・・<TABLE>タグだったら、1ページ1ページこの長いコードを見つけては修正し ていかないといけません。
今日は、<TABLE>タグとCSSの違いがはっきりとわかりましたね！
◆↓↓↓こちらが今回作ったものです。

◆CSSで作った場合のソース
★CSSコード★
.title {
font-size: 12pt;
font-weight: bold;
color: #FFFFFF;
background-image: url(images/title.gif);
background-repeat: repeat;
border-left-width: 8px;
border-left-style: solid;
border-left-color: #66FFFF;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 18px;
}
<div class=”title”>タイトルタイトルタイトル</div>
◆テーブルで作った場合のソース
★CSSコード★
.title_2 {
font-size: 12pt;
font-weight: bold;
color: #FFFFFF;
line-height: 2.5;
text-indent: 20px;
}
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”8″ bgcolor=”#66FFFF”></td>
<td background=”http://blogdezin.img.jugem.jp/20101114_682773.gif” class=”title_2″>タイトルタイトルタイトル</td>
</tr>
</table>

cssコードは別ファイルで書き出すことが出来ますので、青い部分のソース量に注目してみましょう！
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
《 課題 》
本日は最初の課題が出ました。
山梨県の情報誌『 どこでも使えるクーポン誌　DC山梨 』の公式サイトTOPデザイン案です。
仮定や空想の課題ではなく、いきなり本番の案件ですっ！
良いデザインが出れば採用となりますので、皆さんがんばってみましょう！
きっと、『 どこでも使えるクーポン誌　DC山梨 』の次号（6/15号）発行時には、公開されたデザインが閲覧できることでしょう。
授業課題に関わる素材・資料参考は、「受講生サポート」ページからダウンロードできます。
▼受講生サポート
http://support.dezin.jp（移動しました）
WEBデザイン応用編の生徒さんは、ファイルをダウンロードし課題の制作を進めましょう。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
今週も皆さんお疲れさまでした～！
CSSはちょっと難しかったですね。
でもここが最初の山ですよっ。必ず身に付けて自分のモノにしていきましょうね。
来週もがんばりましょう！

WEB（ホームページ）デザイン中級者向き　山梨県デザインスクール　ウェブデザインスタジオ山梨