blog講座のはじまる前に (19時になる前に）
- Dreamweaverを起動
- レジュメをブラウザで開く (http://www.d-improvement.jp/lecture/)
アジェンダ
- おさらい、もう一度確認しておきたいこと (10 / 19:00 〜19:10)
- HTMLに関するTips (20 / 19:10 〜 19:30)
- CSSに関するTips (40 / 19:30 〜 20:10)
- 休憩 (10 / 20:10 〜 20:20)
- IE6, IE7の注意点 (40 / 20:20 〜 21:00)
- Movable Type 4 へのデザイン適用 (20 / 21:00 〜21:20)
- まとめ、質疑応答 (10 / 21:20〜21:30)
おさらい、もう一度確認しておきたいこと (10 / 19:00 〜19:10)
CSSレイアウトの手順
- リセット
- おおまかなレイアウト
- こまかい調整
- 全体調整
※1,2は毎回同じものを使うので、コピペでOK。最初からこまかい調整にこだわらない！
コード、書いてますか？
- 書かないと、覚えられません。
- 最初からきれいなコードを書ける人はいません。たくさん書くことで上達します。
- 自分で「こうかな」と考えてコードを書くことが大切。試行錯誤は絶対に必要。
- 悩む前に手を動かしましょう。10分間なにもしないでうんうん悩むより、5分で10回失敗する方が上達のスピードは速いです。
- コードを書いて思った通りに表示されたら、それが正解です。効率的な記述方法はその後で。
HTMLに関するTips (20 / 19:10 〜 19:30)
コメントの挿入
コメントを挿入することで、ソースコードが読みやすくなる。チームで制作する場合は必須。
<div id="header"><!-- start #header -->
<h1>マサ's ルーム </h1>
<p>3日に1回ほど更新する徒然日記</p>
<!-- end #header --></div>
<div id="content"><!-- start #content -->
<p>あけましておめでとうございます。</p>
<p>ことしの目標は体重を50kg台に戻すことです。がんばります。</p>
<p>2008年1月1日</p>
<!-- end #content --></div>
<div id="footer"><!-- start #footer -->
<address>©2007 mathatelle inc. some lights reserved.</address>
<!-- end #footer --></div>コメントを挿入する位置については、上記以外の方法もある。チームで管理しやすいルールをつくると良い。
2つ以上のclass属性値
class属性値は2つ以上指定ができる。半角スペース区切りで並べる。
<body class="mt-main-index layout-wt">前回の演習で使用したHTMLのソースより。body要素に、「メインページ」「レイアウト（左広・右狭）」という意味を持たせている。
CSSに関するTips (40 / 19:30 〜 20:10)
「セレクタに何を指定したらいいか」で悩んだとき
- セレクタ{プロパティ:値;} →「誰に、何を、どうする」のうち「誰」の特定方法は複数ある。慣れるまで難しい。
- 自分が「こうかな」と思って、コードを書いてみて、その通りに表示されれば、それが正解。
- 効率的な記述方法は慣れてくれば自然と身につく。まずは思った通りに表示されることを重視。
» ブログで『「セレクタに何を指定したらいいか」でお悩みの方へ』という記事を書いてみました。
表示崩れ対策
- Firefoxで確認後、IE6,IE7について確認という確認手順を徹底する。
- htmlタグの閉じ忘れがないか確認する（HTML Validator）。
- Firebugを利用する。
- ブラウザのバグなどによる表示崩れについては、CSSハックやjavascriptライブラリを利用して個別に対応する。
CSSハック
「WebブラウザのバグやCSSの解釈の違いなどを利用して、Webブラウザの種類によって指定を振り分ける手法」のこと。
（Webデザイニング2007年2月号pp.58）
- 文法的に正しくないCSSハックは、できるだけ利用しない。
- 古いハックを使うとIE7で表示がおかしくなる場合があるので注意する。
スタイルの優先順位
- CSS内で、後に出現する方が優先される。
- idセレクタやclassセレクタを利用する場合は、別途のルールで適用される (p.122)。
clearfix
floatを指定したボックスがその親ボックスからはみ出さないようにする目的で使う。clearfixのサンプルを表示する。
利用手順
- clearfixのCSSコードを、自身のCSSソースにコピペ。
- 拡張したいXHTMLの要素（親ボックス）に「class="clearfix"」を指定。
clearfixのCSS
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* for ie */
display: inline-block;
}
/* Hides from IE-mac ¥*/
*html .clearfix{ height: 1%;}
.clearfix{ display: block;}
/* End hide from IE-mac */休憩 (10 / 20:10 〜 20:20)
IE6, IE7の注意点 (40 / 20:20 〜 21:00)
チェックポイント
- XML宣言をつけている（IE6では互換モード、IE7では標準モードになる）
- IE専用のCSSがIE7を考慮していない
- 古いCSSハックを利用している
- そもそも文法を間違えている
- IE6とIE7で表示確認をしていない
IEのバグ
- ボックスモデルに関するバグ
- floatに関するバグ
- フォントサイズに関するバグ
などなど・・・。
IEのバグに遭遇してしまった場合の対処方法
- まず、ググる（Googleで検索）：「ie6 css バグ」で検索 → ヒントになるブログがたくさんヒット
- Firefoxで、グリモン(Greasemonkey)＋Google 検索結果にはてなブックマーク件数を付ける Greasemonkey スクリプトを利用すると、より的確な答えを見つけやすくなる。
javascriptライブラリ「CSS Browser Selector」を利用して、ブラウザ別にスタイルを指定する。
利用手順
- css_browser_selector.jsを任意のディレクトリに配置する。
- head要素内に、<script src="/js/css_browser_selector.js" type="text/javascript"></script> のように記述して、ライブラリを読み込む。
- .ie7 #maincol{・・・・・}のように、個別にスタイルを指定する。
Movable Type 4 へのデザイン適用 (20 / 21:00 〜21:20)
- ログインURL、ログインID、パスワードを大木さんから教えてもらう。
- メニューの「デザイン」＞「テンプレート」をクリック。
- スタイルシート(メイン)をクリック。
- @import url("base_theme.css");
@import url("my_theme.css");
と書いて「保存と再構築」ボタンを押す。 - メニューの「デザイン」＞「テンプレート」をクリック。
- スタイルシート(ベーステーマ)をクリック。
- 先の演習で作成したbase_theme.cssの内容をすべてコピー＆ペーストする。
- 「保存と再構築」ボタンを押す。
- メニューの「デザイン」＞「テンプレート」をクリック。
- 「インデックステンプレートを作成」をクリック。
- 先の演習で作成したmy_theme.cssの内容をすべてコピー＆ペーストする。
- 出力ファイル名をmy_theme.cssとして、「保存と再構築」ボタンを押す。
- 背景画像は、メニューの「新規作成」＞「ファイルのアップロード」からアップロードする。アップロード先は＜サイトパス＞/imgsとする。
- 適当にブログを書いてみる。
- 生成されたページを確認し、微調整をする。
- （できれば）my_theme.cssを書き替えて、オリジナルのデザインを適用する。
まとめ、質疑応答 (10 / 21:20〜21:30)
- Firefoxで表示確認後、IE6,IE7での表示を確認する。
- ブラウザのバグ等による表示崩れについては、CSSハックなどを利用して個別に対応する。
- 問題に出くわしたら、ググる（Googleで検索する）。答えはWeb上で探す。
- コードを書く。書く。書く。書く。書く。書くことで理解できる。