「効率的なサイト制作のためのDreamweaver活用術seminar」フォローアップ
2011年12月11日に開催された「効率的なサイト制作のためのDreamweaver活用術seminar」のフォローアップです。
- お預かりしました質問の件
は、追記しますので、後でまた覗いてください追記しました。 - スライドはCSS Nite in Ginza, Vol.59フォローアップ | CSS Nite公式サイトから（※すべてではありません）。
HTML5やCSS3などのスキルの獲得には下記のセミナーをオススメします。
ご質問の件
条件コメントを使ったInternet Explorer用の振り分けなど、最近のよく使われているものについて教えて欲しい。
Internet Explorer用の条件分岐
次のように記述することで、Internet Explorer用に条件分岐を行います。
<!--[if lt IE 7]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->
対応するブラウザとセレクタの関係は次の通り。
| 対象ブラウザ | 条件コメントの結果 | CSSセレクタ |
| Internet Explorer共通 | - | .ie（またはhtml.ie） |
| Internet Explorer 6のみ | <html class="ie ie6" lang="ja"> | .ie6（またはhtml.ie6） |
| Internet Explorer 7のみ | <html class="ie ie7" lang="ja"> | .ie7（またはhtml.ie7） |
| Internet Explorer 8のみ | <html class="ie ie8" lang="ja"> | .ie8（またはhtml.ie8） |
| IE9以上とInternet Explorer以外 | <html lang="ja"> | なし |
HTML5対応
Internet Explorer 9より下位バージョン（IE8/IE7/IE6）でHTML5の新要素を扱うために、次のように記述します。
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="
Internet Explorerで「:first-child」「:last-child」などの属性セレクタを使う
そのため、『効率的なサイト制作のためのDreamweaverの教科書』（CS5.5対応版）のサンプルサイトでは、「ie.js」というJavaScriptを読み込んでいます（PDF）。
HTML5 Boilderplate
HTML5を扱うにあたり、必要最小限のテンプレートセットHTML5 Boilerplateが注目されています。使う使わないはともかく、解説などを一読されることをオススメします。
- HTML5 Boilerplate | CSS Radar | For Front End Developers
- HTML5 Boilerplateを読む | complicate000 blog
- HTML5 Boilerplate を使用して Web 開発を容易に始める
- HTML5 Boilerplate, Initializr 2をこれから使う人が押さえるべき5つの原則 | ゆっくりと...
その他
こちらのエントリー（【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis）も参考にしてください。
『効率的なサイト制作のためのDreamweaverの教科書』（CS5.5対応版）
前書の改訂版ですが、レスポンシブWebデザインに対応した作例のチュートリアルに全面的に差し替えています。
Zen CodingやレスポンシブWebデザインを使ったサイト制作の流れのチュートリアルがあります。
リンク集
スライドでの（ほぼ）出現順です。
- Zen Coding
- コードヒントに単位を表示する
- もろもろ
- IEの擬人化
- jQuery Mobile
- レスポンシブWebデザイン
- ガイドライン
- 確認作業
- Dreamweaver CS5.5のビューサイズの固定
ウィンドウサイズを変更せずに表示領域を変更できる - iOSシミュレータ.app
実機での確認のほか、iOSシミュレータを使ってiPhone/iPadでの簡易的な確認ができます。iOSシミュレータを使うには、Apple Developer「iOS Dev Center」からXcode and iOS SDKをダウンロードし、インストールする必要があります（Apple IDが必要。無償で取得可能）。 - Mobilizer.app
iPhone 4 の ほ か、Blackberry Storm、HTCEvo、Palm Preでの確認ができるシミュレーター。Adobe AIR 製なので、Windows 環 境でも実行可能。 - Safariの開発メニューをオンにすると、ユーザーエージェントを切り替えることが可能です
- Dreamweaver CS5.5のビューサイズの固定
- レスポンシブWebデザイン（2）
- 電子書籍
- 草枕を作ろう =縦書きHTML簡単作成ガイド= - - epubcafé
- アップル - 採用情報 - 本社での仕事を探す - iBooks Manager
- hon.jp DayWatch - 米Amazon、電子書籍端末「Kindle」シリーズをEPUB対応にすることを大手出版社に通告
- これが未来の電子書籍なのか？アル・ゴア氏著書『Our Choice』アプリが素晴らしい | 旧 代助のブログ
- 電子雑誌はイケる! ゴルフトゥデイ誌に聞く、デジタル版の仕掛けと手応え | iPad | iPad iPhone Wire
- 山と渓谷社、女性向けアウトドア誌デジタル版をAdobeの電子出版ツールで制作 -INTERNET Watch
- aside
- Baker Ebook Framework 2.0
- Laker compendium - Designing digital publications in HTML5
- CSS Nite in Ginza, Vol.59フォローアップ | CSS Nite公式サイト
補足
- 今回ご紹介したほかに下記についても勉強してみください。
- レスポンシブWebデザイン関連
- レスポンシブ・タイプセッティング
- remという単位の活用
- Dreamweaver CS5.5＋PhoneGap
- Dreamweaver CS5.5ではjQuery Mobileなどを使って制作したコンテンツをPhoneGapというソリューションによって、iOS/Androidアプリ化できます（WindowsではAndroidのみ）。
- レスポンシブWebデザイン関連
- Fireworks
- テーブル拡張機能
- Adobe Fireworks CSS3 Mobile Pack
- プロパティなどの読み方について
ご質問等ありましたら、takano@swwwitch.comまでご連絡ください。
『10倍ラクするIllustrator仕事術』
『10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識』が2011年12月に発売されました。基本的にはプリントメディア向けですが、Web制作のパーツ作り等でも役立つポイントが満載ですので、ぜひご一読ください。
- 書籍のサポートページ
- 生でエキスパートが語る（動画あり）
追記（12月31日）：
動画が公開されました。
© Swwwitch, Inc. Some rights reserved.