Web����҂��m��ׂ�IE10 PP2�̐V�@�\�Ƃ́H CSS3�AECMAScript 5�AWeb�p�t�H�[�}���X�̐V�@�\������BIE9�ȑO�Ƃ̌݊������B
�@
�@�O���Ɉ��������AInternet Explorer 10�i�ȉ��AIE10�j�v���b�g�t�H�[���E�v���r���[�ł̉�����s���B
�@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
�@���̃y�[�W�ł́A���̌�ŏЉ��Grid��Flexible Box���g���č���Ă���B���̃E�B���h�E�����������Ă݂�ƁA�ȉ��̂悤�Ƀ��C�A�E�g���ύX�����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
�@������������Ă���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>
�@�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
�@���̃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
�@������������邽�߂�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>
�@�����ڂ��悭���邽�߂Ɋ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
�@����܂ł�<table>�^�O���g���A�����悤�ȃ��C�A�E�g�������ł������ACSS3�ł͂��ȒP���_��Ɏ����ł���悤�ɂȂ��Ă���B�ȉ��Ɂu�ȒP�ɂł��邩�v���������߂ɃV���v���ȃT���v���Ő������Ă������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>
�@���̃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;
}
�@���̂悤��-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�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>
�@�����IE10�ŊJ���ƁA�ȉ��̂悤�ɕ\�������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
Copyright© Digital Advantage Corp. All Rights Reserved.