WEB制作会議

■ WEB制作会議
2007/02/13（TUE）
第２回 OJTレポート
■実施日：2/10(土) PM2:30∼
■作業者：仲村さん
■見学者：熊谷
■内容：服部国際 CSSWEBコーディングについて
01「文章構造について考える」
・CSSノメリットを活かした構造にすることが大切
・ソースも少なくすっきりできる
・タグをきれいに使用することで、検索エンジンが重要なワードを拾ってくれる
・ユーザビリティを考慮した際、音声認識ソフトの認識が、
テーブルコーディングの時より正しく認識される
・スタイルシートを外しても、上から読んでいてわかりやすい
・ブラウザに独自スタイルシートなどを設定している人にも親切
02「Fireworksのスライスツールと書き出し」
・Photoshopとほぼ同様のスライス機能
（イメージのみ／スライスのない領域は含めるのチェックを外せばゴミも出ず、
あらかじめファイル名を指定しGIFかJPGを選択しておくと便利）
・切り出しのポイント
→※背景になりそうな部分は、
テキストを外し、縦を眺めに設定しておくと、
ブラウザ機能で文字サイズを大きくしたときにも対応できる
→divやtableのwidth指定は、細かく計算してからでないとレイアウトが崩れる原因になるので注意
03「CSSの指定について」
・複数コンテンツを持つサイトを作るときは、共通で使用するCSS（main.cssなど）
と、
コンテンツ内でのみ使用するCSSと分けておく
・メニューや背景など、大事なところには<div id= >を指定してあげるとよい
（idは１つにしか指定できない）
・#Contents このidに含まれている範囲にのみ指定したスタイルが適応される
・CSSのデフォルト設定で、<h1>や<p>などのタグは、
ある程度の上部に行間ができるようになっているのでクリアする
以下のようにfontsizeを％で指定してあげると、
ブラウザでの文字サイズ変更に耐えられる
（他にも、px（ピクセル）／em（１行分）
といった指定の方法もあるが、固定されてしまうので%がおすすめ）
#Contents .Box p{
margin: 0 ;
padding: 0 ;
fontsize: 80% ;
line-height: 150%;
}
また、idなどでdivの幅をしていたとしても、以下のようにクラスにもwidthを指定してあげるとmacでのレイアウト崩れを防げる
#Contents .Box{
margin: 0 ;
padding: 0 ;
width:599px;
}
・Dreamweaverのデザインウィンドウから、CSSスタイルタブを使用して、
テーブルの背景画像の指定をする
#Contents .Box th{
margin: 0 ;
padding: 0 ;
width: 200px ;
txt-aligh：left;
background : url(../lib_images/common/dotted.gif)repeat-x left bottom
}
・２段組のヘッダーにあたる画像のレイアウト崩れを直すには、floatを指定する前に回り込みを解除する為の
記述をいれてあげる
.cl{
clear: both ;
}
#Contents .Linknavi div.Left
margin: 0 ;
padding: 0 ;
width:599px;
float : left ;
}
#Contents .Linknavi div.Right{
margin: 0 ;
padding: 0 ;
width:599px;
float : right ;
}
完成品はぜひ仲村さんに見せてもらってください。
■参考URL
仲村さんおすすめ：コーディングに役立つアプリケーションのご案内
（Win用）
①Sleipnir（スレイプニル）
http://www.fenrir.co.jp/sleipnir2/
ieブラウザの表示機能に拡張機能をあわせもつとっても便利なブラウザです。
→スタイルシートを外した状態や、独自ブラウザの指定などが
（他にもいろいろ）
できるそうです。
②HTML内部を見られるソフト
http://extensions.tabbrowser.jp/plugins/files/spec100/Hawkeye.si
画像のaltチェックとか出来るそうです。
（プラグイン追加用ソフト）
http://extensions.tabbrowser.jp/plugins/files/spec100/UserActionExtension.si
↑先にこちらを入れないと動作しないようです。
■OJTを受けてみての感想
コーディング中に、
仲村さんの工夫がいろいろと見ることができてとても有意義な時間でした。
とてもわかりやすく教えていただいたので、
みなさんも時間があったらぜひ教えてもらってください。
コーディング中のTipsですが、
仲村さんは指定したスタイルがdivの中に反映されているのかどうかを判断する為に、
backgroundeにredやyellowといった色をつけて確認しながら作業を進めていました。
はっきりした色だと、
どれくらいの行間をdiv間にとっているのかなど一目瞭然でた。
また、
ユーザビリティのこともよく知っていてとても感心しました。
CSSのソースレベルではわかりにくい点は、
DreamweaverのCSS機能を利用することで、
スタイルの指定方法がわかりやすく
なっているのでぜひ活用していきたいと思います。
ありがとうございました。

Download Report