Internet Explorer 10 PP2��CSS3�@�\�F���W�FIE10�i�v���r���[�Łj�T���i��ҁj�i1/3 �y�[�W�j

Web����҂��m��ׂ�IE10 PP2�̐V�@�\�Ƃ́H CSS3�AECMAScript 5�AWeb�p�t�H�[�}���X�̐V�@�\������BIE9�ȑO�Ƃ̌݊������B

» 2011�N08��02�� 00��00�� ���J
[����`���C��]
WFIE10ivr[ŁjT
Insider.NET

�@

uWFIE10ivr[ŁjTṽCfbNX

�A�ږڎ�

�@�O���Ɉ��������AInternet Explorer 10�i�ȉ��AIE10�j�v���b�g�t�H�[���E�v���r���[�ł̉�����s���B

��7. CSS3

�@IE10 Platform Preview 2�i�ȉ��APP2�j�ł́AIE9�Œlj����ꂽCSS3�̋@�\�ɉ����āA�����‚��̋@�\���lj�����Ă���BIE9�Œlj����ꂽCSS3�̋@�\�́A�u���W�FWeb����ҁ��J���҂̂��߂�IE9�T���i��ҁj�v��IE9�J���҃K�C�h���Q�Ƃ��Ăق����B

�@CSS3��HTML5�Ɠ������A�d�l�����ׂĊm�肵�Ă��Ȃ��󋵂ł���BW3C�̃T�C�g��CSS3�̎d�l�����������J����Ă���BCSS3��HTML5�Ɠ��l�ɑ��Ă̂��̂ɂ́A�x���_�E�v���t�B�b�N�X�i�Q�l�F���L�̕\�j��t���邱�Ƃ���������Ă���B

-ms- Internet Explorer
-moz- Firefox
-webkit- Safari�AGoogle Chrome
-o- Opera
CSS�̃x���_�E�v���t�B�b�N�X
���Ēi�K�̎d�l����������ꍇ�A�x���_�E�v���t�B�b�N�X��t����‚��邱�Ƃ���������Ă���B

�@��������́AIE10 PP1�`PP2�Œlj����ꂽCSS3�̋@�\�ɂ‚��ĉ�����Ă����B���܏q�ׂ��悤�ɁA�u-ms-�v�Ƃ����x���_�E�v���t�B�b�N�X���t���Ă�����̂́A�����I�ɍ폜���ꂽ��A�ύX���ꂽ�肷��”\��������A�܂��A�u�������v�ȍ~�ł́A�x���_�E�v���t�B�b�N�X���O����邽�߁A�����ĔO���ɒu���Ăق����B

�@�܂��́ACSS3�̐V�����@�\�Ŏ�������Ă���uGridddle�v�Ƃ����f�����ȒP�ɏЉ�悤�B

Grid�̃f���E�y�[�W
IE10�ŊJ���ƁA��̂悤�ȃ��C�A�E�g�ŕ\�������B

�@���̃y�[�W�ł́A���̌�ŏЉ��Grid��Flexible Box���g���č���Ă���B���̃E�B���h�E�����������Ă݂�ƁA�ȉ��̂悤�Ƀ��C�A�E�g���ύX�����B

Grid�̃f���E�y�[�W�ŃE�B���h�E��������������
���S���Ȃ��Ȃ��āA�mDebuts�n�������牺�Ɉړ����Ă���B

�@�E�B���h�E������������ƁA�����I�Ƀ��C�A�E�g���ύX����Ă���̂�������B����͕ʂ�JavaScript�Ȃǂ��g���ē��I�Ƀ��C�A�E�g��ύX���Ă���킯�ł͂Ȃ��ACSS3�̐V�����@�\�ɂ���Ď�������Ă���B

�@���̂悤�ɁA�E�B���h�E�E�T�C�Y�ɍ��킹�āA���C�A�E�g���ύX�ł���Ƃ������Ƃ́A�‚܂�^�u���b�g��g�ѓd�b���܂߂����܂��܂ȃf�o�C�X�ɍ��킹�ă��C�A�E�g�����HTML�^CSS�R�[�h��������”\��������Ƃ������Ƃł���B�uWrite once, Run anywhere�v�Ƃ��������������t���v���o����邪�A���݂̂悤�Ƀf�o�C�X���ƂɃy�[�W��p�ӂ��Ȃ��Ă��ςނ悤�ɂȂ�Ƃ�����A�J���҂̕��S���啝�Ɍ��邱�ƂɂȂ�B���񂵂Ȍ������ɂȂ��Ă���̂́A��͂�f�o�C�X���Ƃɓ��������邽�߁A�u���S��1�‚̃R�[�h�łǂ̃f�o�C�X�ł����s�v���������邱�Ƃ͓���ƍl���Ă��邩��ł���B

�@HTML�^CSS�Ƃ������t�����g�G���h�̕����͒P��ɂł��邩������Ȃ����A�����������Ȃ��A�]�����x���x���g�ѓd�b��PC�Ɠ����悤�ɂ��ׂẴf�[�^��]�����ĕ`�悷��̂ɂ͖���������B�������A�t�����g�G���h�̊J���R�X�g�����点�邾���ł��A�J���҂̕��S�͑傫���͂����B

�� 7-1. Multi-column���C�A�E�g

�@Multi-column�́A���̖��̂Ƃ��蕡���J�����̃e�[�u���E���C�A�E�g���ȒP�ɋL�q���邽�߂̎d�l�ł���B�f���E�y�[�W�ł́A�����J������Twitter��̃^�C�����C�����\�������B���쌠�Ȃǂ̖������邽�߁A��ʃC���[�W�͏ȗ�����B

�@�V���v���ȃT���v�����쐬�����̂ŁA������Ő������Ă������B

Multi-column�̃T���v��
3�J�����ɕ�����ĕ\������Ă���B

�@������������Ă���HTML�^CSS�R�[�h���m�F���Ăق����B

<!DOCTYPE html>
<head>
<title>MultiColumn</title>
<style type="text/css">
h1 {
  background: lightgreen;
}
h2 {
  background: lightblue;
}
#multiColumn {
  column-count: 3;
  column-rule-color: lightgray;
  column-rule-width: 2px;
  column-rule-style: solid;
}
</style>
</head>
<body>
<h1>�ؗ�Ȃ�p���P�[�L�̐��E</h1>
<div id="multiColumn">
  <p><img src="pancake.jpg" /></p>
  <p>�ʐ^�����Ďv�킸���ߑ����o���ǎ҂�����̂ł͂Ȃ����낤���B�ʐ^�͂Ƃ��邨�X�̃p���P�[�L�ł���B��ɂ̓}���S�[���̂��Ă���A���ɂ͐��N���[���ƃR�R�i�b�c�A�C�X���T���Ă���B����ɂ́A�L�E�C�ƃ}���S�[�̃\�[�X���������~��`���Ă���B</p>
<h2>���O�̗R��</h2>
  <p>�p���P�[�L�Ƃ������O�̗R�������������낤���H�p���ɋ߂��P�[�L�Ȃ̂ŁA���̖��O���‚����Ɗ��Ⴂ�����������A���̓t���C�p���̃p�����痈�Ă���B�p���P�[�L�́A�t���C�p���Ȃǂ̕���ō��ꂽ���߁A�p���ō���P�[�L�Ƃ����Ӗ��ł��̖��O���‚����Ă���B</p>
<h2>�������߂̐H�ו�</h2>
  <p>�p���P�[�L�ɂ́A�o�^�[�⃁�[�v���V���b�v�ȂNJÂ�����H�ו��ƁA�n����\�[�Z�[�W�Ȃǂɕt�����킹��H���Ƃ��Ă̐H�ו�������B�ǂ��炪�悢�Ƃ������Ƃ��Ȃ����A���������킹���H�ו�������B�}�N�h�i���h�̒��H���j���[�ɂ���}�b�N�O���h�������������낤���B�Â��V���b�v����̃p���P�[�L�ɉ����C�̂���\�[�Z�[�W�����񂾏��i�ŁA�����ȗ��A�^�ۗ��_�������N���������i�ł���B���Ȃ݂ɃO���h���Ƃ����̂́A�p���P�[�L�̕ʖ��ŁA�A�����J�ł��̂悤�ɌĂԒn�悪����B</p>
</div>
</body>
</html>

Multi-column�̃R�[�h
column-count�v���p�e�B�Ɂu3�v���w�肳��Ă��āA3�J�����ɕ�����ĕ\������Ă���B

�@�R�[�h������ƁA�ƂĂ��ȒP�Ȃ��Ƃ�����������������Ǝv���B�J�����𕪂��邽�߂ɂ́Acolumn-count�v���p�e�B�ɕ��������J���������w�肷�邾���ł���B�ucolumn-rule�v����n�܂閼�O�̃v���p�e�B�������‚��w�肵�Ă��邪�A����ɂ��J�����̋��E�ɊD�F�̐����������B���̂ق��̃v���p�e�B��ڍ׏��ɂ‚��ẮA�wInternet Explorer Platform Preview Guide for Developers�x�i�p��B�ȉ��A�v���r���[�E�K�C�h�j���Q�Ƃ��Ăق����B

�@Multi-column��W3C�̃X�e�[�^�X�́u�������iCR�j�v�ƂȂ��Ă���A�قڎd�l���ł܂��Ă���Ƃ����Ă悢�B���̂��߁A�x���_�E�v���t�B�b�N�X�̋L�q�͕s�v�ɂȂ��Ă���B��������̎d�l���傫���ύX����邱�Ƃ͂Ȃ��B

�� 7-2. Flexible Box�iFlexbox�j���C�A�E�g

�@Flexible Box�i�ȉ��AFlexbox�j�́A���C�A�E�g�̋L�q���V���v���ɂ��邽�߂ɒlj����ꂽ���C�A�E�g���L�q���邽�߂̎d�l�ł���B�܂���Test Drive����f���E�y�[�W���m�F���Ăق����B

Test Drive���Flexbox�f���̃C���[�W
���^�̗̈���ɃR���e���c���L�q�ł���B�܂������‚��̃��C�A�E�g���w��ł���B

�@���̃f���ł́A���^�̗̈���ɕ��͂��L�q����Ă���A���W�I�{�^����؂�ւ��邱�Ƃɂ���āA�\���ʒu�Ȃǂ������ł���悤�ɂȂ��Ă���B����܂ł����̂悤�ȃ��C�A�E�g�͋L�q�ł������A���G�ȋL�q���K�v�ł������B�u�ǂꂾ���V���v���ɏ����邩�v���������߂ɃT���v�����쐬�����̂ŁA�������ɉ�����Ă������B

FlexBox�̃C���[�W
����3�‚���A���ɕ���ł���B

�@������������邽�߂�HTML�^CSS�R�[�h�̋L�q���m�F���Ăق����B

<!DOCTYPE html>
<html>
<head>
<title>FlexBox</title>
<style type="text/css">
#flexBox {
  display: -ms-box;
  -ms-box-pack: center;
  width: 80%;
  background: lightgray;
}
#box1 {
  background: lightgreen;
  border: green solid 1px;
  width: 150px;
  margin-left:2px;
}
#box2 {
  background: lightblue;
  border: blue solid 1px;
  width: 150px;
  margin-left:2px;
}
#box3 {
  background: pink;
  border: red solid 1px;
  width: 150px;
  margin-left:2px;
}
</style>
<body>
<div id="flexBox">
  <div id="box1">FlexBox�́AChrome�ASafari�AMozilla�ł��łɃT�|�[�g����Ă��܂��B</div>
  <div id="box2">Opera��IE 9�ł́A�T�|�[�g����Ă��܂���ł������AIE10�ł̓T�|�[�g�����悤�ɂȂ�܂����B</div>
  <div id="box3">���̂悤�ɔ��`�̕\���̈����ׂĕ\������悤�Ȍ`�ŕ\�����邱�Ƃ��ł��܂��B</div>
</div>
</body>

Flexbox�̋L�q��
#flexBox��display�v���p�e�B�Ɂu-ms-box�v���w�肵�āAFlexible Box�\����ݒ肵�Ă���B

�@�����ڂ��悭���邽�߂Ɋe�{�b�N�X�ɐF�Ȃǂ̎w������Ă��邪�AFlexbox���w�肷�邽�߂ɕK�v�Ȃ��̂́A��{�I��display�v���p�e�B�Ɂu-ms-box�v���w�肷�邾���ł���B���̂ق��ɂ����܂��܂ȃ��C�A�E�g���w��ł���悤�ɂȂ��Ă��邽�߁A�v���r���[�E�K�C�h�Ȃǂ��Q�l�Ɋm�F���Ăق����B

�@Flexbox�́A���Ă̂��߁u-ms-�v�Ƃ����x���_�E�v���t�B�b�N�X���K�v�ɂȂ��Ă���B�ŏI�����[�X�Ŋ����ɂȂ����ꍇ�A���̃v���t�B�b�N�X���s�v�ɂȂ邱�Ƃ�F�����Ă����Ăق����B

�� 7-3. Grid���C�A�E�g

�@Grid�́A�J���҂Ȃ畷���Ȃ��݂̂���P�ꂾ�Ǝv���B���̖��̂Ƃ���i�q��Ƀ��C�A�E�g�ł���@�\�ɂȂ�B�O�̏͂�Gridddle���Љ�����A����1��The Grid System�Ƃ����f�����Љ�悤�B

Grid�̃f��
�i�q��ɃJ���������C�A�E�g����Ă���B

�@����܂ł�<table>�^�O���g���΁A�����悤�ȃ��C�A�E�g�������ł������ACSS3�ł͂��ȒP���_��Ɏ����ł���悤�ɂȂ��Ă���B�ȉ��Ɂu�ȒP�ɂł��邩�v���������߂ɃV���v���ȃT���v���Ő������Ă������B

Grid���C�A�E�g�̃T���v��
�\�`���Ƀp�[�c�����C�A�E�g����Ă���B

�@���̃T���v���́ABlog�y�[�W���C���[�W���ă��C�A�E�g���Ă݂��B����ł́A���̃y�[�W���ǂ̂悤�ɋL�q����Ă��邩��CSS��HTML�̃R�[�h�Ŋm�F���Ă������B

<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style type="text/css">
h1 {
  font-family: Algerian;
  font-size: 30px;
}
#grid {
  display: -ms-grid;
  background: lightgray;
  -ms-grid-columns: 150px 1fr 200px;
  -ms-grid-rows: 50px 1fr;
}
#title {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 3;
  background: purple;
  color: white;
  text-align: center;
}
#latestContents {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  background: lemonchiffon;
}
#link {
  -ms-grid-column: 3;
  -ms-grid-row: 3;
  background: lightblue;
}
#profile {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
  background: pink;
}
#content {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  background: lightgreen;
}
.subtitle {
  font-size: 16px;
  font-weight: bold;
}
</style>
</head>
<body>
<div id="grid">
  <div id="title"><h1>Grid Sample</h1></div>
  <div id="link">
    <div class="subtitle">�����N</div>
    <a href="www.atmarkit.co.jp">@IT</a>
  </div>
    <div id="latestContents">
    <div class="subtitle">�V�����</div>
    �V��<br />
    �V��<br />
  </div>
  <div id="profile">
    <div class="subtitle">�M�ҏ��</div>
    ����@�`��<br />
  </div>
  <div id="content">
    <div class="subtitle">�R���e���c</div>
  </div>
</div>
</body>
</html>

Grid���C�A�E�g�̃T���v���E�R�[�h
#grid��Grid���C�A�E�g�idisplay: -ms-grid�j���w�肳��A�e�J�����̕\���ʒu�i-ms-grid-column�A-ms-grid-row�j���w�肳��Ă���B

�@���̃y�[�W�ł́A#grid�ł́udisplay: -ms-grid�v�Ƃ����v���p�e�B�w��ŁAGrid���C�A�E�g���w�肳��Ă���B�܂��A-ms-grid-columns�v���p�e�B��-ms-grid-rows�v���p�e�B�ŁAGrid�̕��ƍ������`���Ă���B�܂��e�v�f�́A-ms-grid-column�v���p�e�B�ʼn��̈ʒu���A-ms-grid-row�v���p�e�B�ŕ\�̏c�̈ʒu���w�肵�Ă���B

�@�Ⴆ�΁A�ȉ��̃R�[�h�ł́A������3�ԖځA�ォ��2�Ԗڂ̈ʒu�ɕ\�����邱�Ƃ������Ă���B

#profile {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

Grid�ł̕\���ʒu���w�肵�Ă���R�[�h
-ms-grid-column�v���p�e�B��-ms-grid-row�v���p�e�B�ŁAGrid��̕\���ʒu���w�肵�Ă���B

�@���̂悤��-ms-grid-column�v���p�e�B��-ms-grid-row�v���p�e�B��Grid�̕\���ʒu���w�肷�邱�ƂŁA�ȒP�ɔz�u���w�肷�邱�Ƃ��ł���B���C�A�E�g��ύX����Ƃ��ɂ��ȒP�ɕύX�ł��邱�Ƃ��C���[�W���Ă���������̂ł͂Ȃ����낤���B

�@Grid���C�A�E�g�́A���Ă̂��߁u-ms-�v�Ƃ����x���_�E�v���t�B�b�N�X���K�v�ɂȂ��Ă���B�ŏI�����[�X�Ŋ����ɂȂ����ꍇ�A���̃v���t�B�b�N�X���s�v�ɂȂ邱�Ƃ�F�����Ă����Ăق����B

�� 7-4. Gradient

�@����܂Ńy�[�W�̔w�i�ɃO���f�[�V������ݒ肵�悤�Ǝv�����ꍇ�A�O���f�[�V�����̂��������摜���쐬���Ĕw�i�摜�Ɏw�肷��K�v���������B

�@CSS3 Gradients�ł́A�w�i�摜�̑���ɃO���f�[�V�����̐F���w��ł���悤�ɂȂ����BTest Drive�Ō��J����Ă����f���ŃO���f�[�V�������w�肷��ƁA�w�i�F���w�肷�邽�߂�CSS�R�[�h���o�͂����B

CSS Gradient�̃f���E�y�[�W
�O���f�[�V�����̐F���w�肷��ƁASample�Ƀv���r���[���\������ACSS markup��CSS�R�[�h���쐬�����B
�@ �i1�j�O���f�[�V�����̐ݒ���s���B
�@ �i2�j�ݒ肵�����e�̃v���r���[���\�������B
�@ �i3�j�ݒ肵���O���f�[�V������CSS�R�[�h���o�͂����B

�@������CSS�R�[�h�𐶐����āAHTML�y�[�W�̒��ł�����w�肷��΁A�O���f�[�V�����̃C���[�W��w�i�F�ł���BHTML�^CSS�R�[�h���m�F���Ă������B

<!DOCTYPE html>
<head>
<title>Gradient</title>
<style type="text/css">
body {
  background-image: -ms-linear-gradient(top left, #B3FFAB 0%, #5E9ADF 50%, #8DEFA4 100%);
}
</style>
</head>
<body>
<h1>Gradient</h1>
<p>�w�i�ɃO���f�[�V������ݒ肷��B</p>
</body>
</html>

�O���f�[�V�����̔w�i�F���w�肵����
background-image�v���p�e�B�Ɏw�肵���u-ms-linear-gradient�v�Ŕw�i�F��ݒ肵�Ă���B

�@�����IE10�ŊJ���ƁA�ȉ��̂悤�ɕ\�������B

�O���f�[�V�����̔w�i�F���w�肵����
background-image�v���p�e�B�Ɏw�肵���O���f�[�V���������������w�i�F���\������Ă���B

�@���̂悤�ɁA�f���E�y�[�W�ō쐬�����O���f�[�V�����E�R�[�h��background-image�Ɏw�肷�邾���ŁA�O���f�[�V���������������w�i�F���\������Ă��邱�Ƃ�������B-ms-linear-gradient�v���p�e�B�́A����̃O���f�[�V�������Ӗ����A�O���f�[�V�����̕�����F���w�肳��Ă���B�ق��ɂ��~��Ƒȉ~�`�̃O���f�[�V�������p�ӂ���Ă���̂ŁA�f���E�y�[�W���v���r���[�E�K�C�h�Ȃǂ��Q�l�Ɋm�F���Ăق����B

�@Gradient�́A���Ă̂��߁u-ms-�v�Ƃ����x���_�E�v���t�B�b�N�X���K�v�ɂȂ��Ă���B�ŏI�����[�X�Ŋ����ɂȂ����ꍇ�A���̃v���t�B�b�N�X���s�v�ɂȂ邱�Ƃ�F�����Ă����Ăق����B

�@�@�@�@�@�@ 1|2|3 ���̃y�[�W��

Copyright© Digital Advantage Corp. All Rights Reserved.

'; this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B