メディア クエリ CSS3 グリッド CSS3 Flexbox CSS3 マルチカラム 推奨事項 参考資料 <style type="text/css"> @media (orientation: landscape) body { background-color Green #landscape display block #portrait display none } @media (orientation: portrait) body { background-color Maroon #landscape display none #portrait display block } </style> <div id="landscape"> <div id="portrait"> </div> </div> 3 2 1 1 2 3 #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } #banner { -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; } #toc { -ms-grid-column: 1; -ms-grid-row: 2; 目次 } #textArea { -ms-grid-column: 2; -ms-grid-row: 2; } #images { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 2; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 3; } バナー テキスト領域 フッター 拡張 イ メ ー ジ 拡 張 #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } 目次 テキスト領域 残りのスペース 1 分画 6 分画 イ メ ー ジ 130 ピクセル <div id="playControl"> <button>Back</button> <button>Play</button> <button>Forward</button> </div> #playControl { display: -ms-box; -ms-box-orient: horizontal; -ms-box-align: middle; } button { -ms-box-flex: 1; } <div id="playControl"> <button>Back</button> <button>Play</button> <button>Forward</button> </div> #playControl { display: -ms-box; -ms-box-orient: horizontal; /* -ms-box-orient プロパティで 定義された軸に対して 垂直方向の配置) */ -ms-box-align: middle; /*-ms-box-orient プロパティで 定義された軸に対して 水平方向の剰余スペースの配分) */ -ms-box-pack: center; } @media all and (min-width: 300px) and (max-width: 400px) { #playControl { -ms-box-orient: vertical; /*-ms-box-orient プロパティで 定義された軸に対して 水平方向の剰余スペースの配分) */ -ms-box-pack: center; } } @media all and (max-width: 299px) { #playControl { -ms-box-orient: vertical; } #playButton { -ms-box-flex: 10; -ms-box-ordinal-group: 1; } #backButton { -ms-box-ordinal-group: 2; } #fwdButton { -ms-box-ordinal-group: 2; } } <style type="text/css"> div { column-width: 12em; column-rule: thin solid black; column-gap: 2em; } </style> <div> <p> … </p> <p style="break-before: column;"> </p> <p> … </p> </div> 12em 2em 12em http://ie.microsoft.com/testdrive/Info/Downloads/Default.html www.ietestdrive.com http://channel9.msdn.com/events/mix/mix11/htm11 http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platformpreview-and-css-features-for-adaptive-layouts.aspx http://www.w3.org/TR/css3-mediaqueries/ http://www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css3-grid-align/ http://www.w3.org/TR/css3-multicol/ © 2010 Microsoft Corporation. All rights reserved. Microsoft、Windows、Windows Vista およびその他の製品名は、米国およびその他の国における登録商標または商標である可能性があります。 このプレゼンテーションに記載されている情報は、情報の提供のみを目的としており、このプレゼンテーションの発行時点におけるマイクロソフトの見解を反映したものです。マイクロソフトは 市場条件の変化に 対応する必要があるため、このプレゼンテーションはマイクロソフトの一部の義務として解釈することはできず、またマイクロソフトは記載事項について発行日後に その正確さを保証することはできま せん。明示、黙示、または法令に基づく規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
© Copyright 2024 ExpyDoc