デモ - Microsoft







メディアクエリ
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 およびその他の製品名は、米国およびその他の国における登録商標または商標である可能性があります。
このプレゼンテーションに記載されている情報は、情報の提供のみを目的としており、このプレゼンテーションの発行時点におけるマイクロソフトの見解を反映したものです。マイクロソフトは
市場条件の変化に
対応する必要があるため、このプレゼンテーションはマイクロソフトの一部の義務として解釈することはできず、またマイクロソフトは記載事項について発行日後に
その正確さを保証することはできま
せん。明示、黙示、または法令に基づく規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。

Download Report