CSS Nite × MS

Size: px

Start display at page:

Download "CSS Nite × MS"

ともあきひでやま
5 years ago
Views:

1 Internet Explorer 8 に対応! ブラウザ互換対応と IE8 新機能の実装を Expression Web 2 で実現株式会社セカンドフゔクトリー新谷剛史セールス & デゖレクショングループ

2 株式会社セカンドフゔクトリー 1

3 株式会社セカンドフゔクトリーひと目でわかる Microsoft Silverlight 2 ゕプリケーション開発入門 C# と Expression Blend 2.5 による RIA 開発技法著者 : 株式会社セカンドフゔクトリー判型 :B5 変型ページ数 : 約 250 ページ価格 : 定価 2,919 円 ISBN 発行 : 日経 BP ソフトプレス発行日 :2008 年 11 月予定 2

4 あらやたけふみ技術営業デゖレクションテストマネジメントお客様フォロー講演執筆トレーニング HTML CSS / AJAX Expression MOSS ( マスタページ ) Microsoft MVP for Expressions (Jul Jun 2009) Microsoft Certified Desktop Support Technician (MCDST) Macromedia Certified Dreamweaver MX 2004 Developer 個人情報保護士

5 本日の目標 IE8の新機能実装は Expression Web2が便利 IE8の新機能を coder 視点で確認 IE8の新機能を実装 4

6 Expression Web 2 5

7 Expression とは Expression Studio 2 Expression Web 2

8 Expression Web 2 コーデゖング重視の人向け Web オーサリングツール起動が速い CSS を簡単に適用エラーチェックプレビューデザンフゔルのコピー & ペースト

9 Expression Web 2 IE8 の実装は Expression Web 2 が便利 8

10 Expression Web 2 Microsoft Expression 開発サーバー 9

11 Microsoft Expression 開発サーバー WebSlice の確認に必要 10

12 Live Coding About Expression Web 2 11

13 [Live Coding 補足スラド ] About Expression Web 2 sample フォルダ demo-xml と demo-php のフゔルを使用してデモを行っておりますスラド最終ページを参考に Microsoft サトから Expression Web 2 をダウンロードします起動早い = 軽い = デザンゕプリとの併用が楽 [demo-xml] xml を HTML などに表示するのも簡単開発サーバでの確認 [demo-php] PHP も簡単にプレビュー ( 事前設定が必要です ) 12

14 ンストールとゕンンストール IE8 の新機能 IE8 に対応するコーデゖング Jscript 開発者ツール WebSlice 13

15 IE8 のンストールについて IE8 はまだ β2 ですサービスパック (SP) SP 入れるなら IE8 より先 IE8 入れたら SP 入れるな 14

16 IE8 のゕンンストールについて 15

17 IE8 の特徴 ( 一部 ) ドメンハラト RSS フゖードの認証をサポートプロセスモデルの改善 Tab が落ちない Tab 間ウゖンドウ間の認証問題セッションを明示的に切断する必要性がある InPrivate ブラウズ匿名ゕクセスやゕクセスの足跡を残さないわけではない DOM Storage ゕクセラレータ Web 標準準拠の描画エンジン互換対応が必要 Hack の話 Jscript が ECMA に近いものに ( ECMAScript Language Specification 3rd Edition 準拠 ) 互換モードはないですお気に入りバー WebSlice 開発者ツール 16

18 IE8 に対応したコーデゖング 1.<meta /> http-equiv="x-ua-compatible" content="ie=emulateie7" 2.DTDと標準モード互換モードの対応 3. 互換モード用のEmurateボタン 4.Hack 5.Jscript: 互換モードなし 17

19 参考 IE7 の CSS フゖルタ (CSS ハック ) METAタグによる指定 DOCTYPE 適用されるレンダリングモード DOCTYPE 宣言文 URL の有無 content="ie=8" 影響せず影響せず Internet Explorer 8 標準モード content="ie=edge" 影響せず影響せず Internet Explorer 8 標準モード content="ie=7" 影響せず影響せず Internet Explorer 7 互換モード content="ie=5" 影響せず影響せず Internet Explorer 5 互換モード content="ie=emulateie7" なし影響せず Internet Explorer 5 互換モード HTML (no version) 影響せず Internet Explorer 5 互換モード HTML 2.0 影響せず Internet Explorer 5 互換モード HTML 3.0 影響せず Internet Explorer 5 互換モード HTML 4.0 影響せず Internet Explorer 7 互換モード HTML 4.0 Frameset URLあり Internet Explorer 7 互換モード URLなし Internet Explorer 5 互換モード HTML 4.0 URLあり Internet Explorer 7 互換モード Transitional URLなし Internet Explorer 5 互換モード HTML 4.0 Strict 影響せず Internet Explorer 7 互換モード XHTML 影響せず Internet Explorer 7 互換モード XML 影響せず Internet Explorer 7 互換モード不明な DOCTYPE 影響せず Internet Explorer 7 互換モードなし影響せず Internet Explorer 5 互換モード HTML (no version) 影響せず Internet Explorer 5 互換モード HTML 2.0 影響せず Internet Explorer 5 互換モード HTML 3.0 影響せず Internet Explorer 5 互換モード HTML 4.0 影響せず Internet Explorer 8 標準モード URLあり Internet Explorer 8 標準モード HTML 4.0 Frameset 指定なし URLなし Internet Explorer 5 互換モード HTML 4.0URLあり Internet Explorer 8 標準モード Transitional URLなし Internet Explorer 5 互換モード HTML 4.0 Strict 影響せず Internet Explorer 8 標準モード XHTML 影響せず Internet Explorer 8 標準モード XML 影響せず Internet Explorer 8 標準モード不明な DOCTYPE 影響せず Internet Explorer 8 標準モード 18

20 参考 IE7 の CSS フゖルタ (CSS ハック ) HTML フゖルタ次のルールは IE のみに適用されていましたが IE 7 以降では無視されます * html{ } * html body{ } * html.foo{ } _ ゕンダースコゕフゖルタ次のルールでは min-height プロパテゖに対応しているブラウザと IE に高さの最小値が適用されていました IE 7 では _height はカスタムプロパテゖとして処理され高さは適用されません.myclass { min-height: 300px; _height: 300px;... } /**/ コメントフゖルタ次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では値が適用されます.myclass { height/**/: 300px;... } "html > body" 子セレクタフゖルタ次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では値が適用されます html > body { height: 300px;... } "head + body" 隣接セレクタフゖルタ次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では値が適用されます Head + body { height: 300px;... } "head:first-child + body" 最初の子と隣接セレクタによるフゖルタ次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では値が適用されます head:first-child + body { height: 300px;... } 19

21 Live Coding Web 標準と互換モード 20

22 [Live Coding 補足スラド ] Web 標準と互換モード sample フォルダ demo-qurks のフゔルを使用してデモを行っておりますサンプルの HTML を参考に互換表示設定を確認してください <meta> 記述の有無で表示が変わることを確認しました自分の作成したコードで表示の違いを確認してみましょう 21

23 開発者ツール Firebug / Firefox や Dragonfly / Opera のようなツール 22

24 WebSlice IE8 標準モードですブックマークの一種 FireFoxでWebSlice WebChunks 対応はわずかこれだけ Flashは?Silverlightは?AJAXは? Layer positionの話運用を見据えた対応 23

25 参考 WebSlice 1. 必須 Web Slice (WebSlice として表示させるエリゕを囲むためのブロック要素 ) class= hslice + id 必須 2. 必須 Entry Title( タトル ) class="entry-title" 3. 任意 : でもほぼ必須 Entry Content( コンテンツ ) class="entry-content 4. 任意 End Time( エンドタム )abbr-design-pattern : See > end time : <abbr class= endtime title= T17:00:00 >2day7hours</abbr> 5. 任意 Alternative Display Source( 代替表示要素 ) 6. 任意 Alternative Navigation( 代替ナビゲーション ) 7. 任意 Time to Live( コンテンツの表示期限 ) このコンテンツは 15 毎に更新します 8. 任意 Alternative Update Source( 更新プログラムの別ソース ) See > <a rel="feedurl" href="dummyurl.dummy.domain/feedfile.xml">subscribe to WebSlice</a> 24

26 Expression Web 2 + WebSlice の確認 F12 キー他のブラウザでプレビューされてしまう場合はフゔル > ブラウザでプレビュー > Windows Internet Explorer

27 他の Web オーサリングツールでの確認 1. サーバーにフゔルをゕップして確認公開前のフゔルは注意 2. ントラネットワーク向けサーバー 3. Apacheなど構築 XAMPP などが簡単 26

28 Live Coding こんなに簡単 WebSlice 27

29 [Live Coding 補足スラド ] Web 標準と互換モード sample フォルダ demo-webslice のフゔルを使用してデモを行っております基本は 3class 1id ですスラド 24 ページでオプションを紹介しておりますセミナー中動画の WebSlice を表示できておりませんでしたが 8. Alternative Update Source の記述を使用することで表示できるという情報がありました WebSlice の動画表示できた方情報をください 28

30 Expression Web 2 で PHP フゔルをプレビュー XAMPP Windows 版をンストール後ツール > ゕプリケーションのオプションを選択全般タブの PHP 部分で左図のように phpcgi.exe のパスを指定します PHP フゔルを開き F12 キーを押してプレビューしてみましょう

31 ダウンロード URL Expression Studio 2 IE8 t.mspx ( バーチャルメージもあります ) ご質問はこちらまで araya@2ndfactory.com 会社ゕドレスのためこまめに確認をしておりますがお返事までお時間をいただくことがございますことをご了承ください

スライド 1

スライド 1 IE8 Beta2 紹介セミナーマイクロソフト株式会社デベロッパー & プラットフォーム統括本部 Next Web 推進部エバンジェリスト渡辺弘之 Agenda Internet Explorer 8(IE8) とは Internet Explorer 8 の特徴より速く + より便利に + より安心に Internet Explorer 8 の特徴より速く + より便利に + より安心に高速化のための様々な改善