Web�u���E�U��CSS�n�b�N���t�B���^Tips
�A�ڃC���f�b�N�X��
Web�u���E�U��CSS�n�b�N���t�B���^Tips�i1�j

IE 6�ŋ����Ȃ����߂́A9�‚�CSS�n�b�N

�L����Ѓ^�O�p���_
��� ����
2009/10/8
Web�u���E�U���Ƃ̃����_�����O�G���W���̈Ⴂ�ɂ��N���郌�C�A�E�g�̕\��������ɋ��������Web�f�U�C�i�̂��߂ɁAWeb�u���E�U���ƂɎg���邩�ǂ����̕\�������Ȃ�������������邽�߂�CSS�n�b�N���t�B���^Tips�����͂����܂��i�ҏW���j

�ł������g���Ă���̂Ɂc�c�A����A�����炱��

�@������Web�f�U�C�i�̔Y�݂�1�‚́A���C�A�E�g�̕\�������肾�Ǝv���܂��B����́A�eWeb�u���E�U���̗p���Ă��������_�����O�G���W���̈Ⴂ����N�����Ă���ꍇ�������ł��B���̒��ł��A�ł�Web�f�U�C�i��������Web�u���E�U�Ȃ̂́A�}�C�N���\�t�g���J�����Ă���IE�iInternet Explore�j�̃o�[�W����6�ł��B

�@IE 6�́A�����J�n������Windows XP�Ƀf�t�H���g�ŃC���X�g�[������Ă���Web�u���E�U�Ƃ������Ƃ�����A���̒��̑����̃��[�U�[�͂���Web�u���E�U���g���Ă��܂��B�����Ƃ��AWeb�֘A�̎d�������Ă�����́AIE 7/8��Firefox 3/3.5 �AGoogle Chrome 2/3�AOpera 9/10�ASafari 3/4�Ȃǂ��g���Ă���ꍇ���������Ǝv���܂����A�܂��܂��啔���̃��[�U�[��IE 6�Ńl�b�g�{���Ƃ����̂��قƂ�ǂł��B

�@�����m�̂Ƃ���A�啔���̃��[�U�[�ɑ΂���R���e���c������Ă����Ȃ��Ƃ����Ȃ�Web�f�U�C�i�́AIE 6�ŕ\�����Y���Ȃ��悤��HTML��CSS�̃R�[�f�B���O���Ă����̂��d���ł��B������IE 6�̏ꍇ�́A�d�l�ʂ�̐������R�[�f�B���O���s���Ă���ɂ�������炸���C�A�E�g���Y���Ă��܂����Ƃ�����܂��B

�@�����̖����������邽�߂ɁACSS�n�b�N���t�B���^�Ƃ����AIE 6�̕\��������C�����Ă����e�N�j�b�N���g���܂��BCSS�n�b�N�̊�{�ɂ‚��ẮA���L�L�������Q�Ƃ��������B���̋L����CSS�̊�{���Љ��A�ځu���܂��畷���Ȃ�CSS�^�X�^�C���V�[�g�����v�Ɋ܂܂�܂��̂ŁACSS���̂̊�{��}���������͘A�ڂ�ʂ��Ă��Q�Ƃ��������B

�@����́A���ۂ̃R�[�h���ɋ����A���L��9�‚̃e�N�j�b�N���Љ�܂��B�d���Ńo���o��CSS�n�b�N���g���Ă���㋉�҂��A���ꂩ��CSS�n�b�N���g���Ă��������Ǝv���Ă��鏉�S�҂̕����A���܈�x�`�F�b�N���Ă݂Ă��������B

  1. ����PNG��\����������@
  2. min-width�Amax-width���g������
  3. min-height��Ή���������@
  4. height��100���ɂ�����@
  5. �t���[�g����2�{�}�[�W����ʏ�ɖ߂����@
  6. ���X�g�̏c���у��j���[
  7. ���T�C�Y���ɂ����
  8. �t���[�g���Ƀe�L�X�g��3px����Ă��܂��Ă����ꍇ
  9. �O���̗v�f��overflow:auto;���w�肵�Ă����ꍇ

�y1�z����PNG��\����������@

�@IE 6�ł́A����PNG�ɑΉ����Ă��܂���BIE 6�ł��ق���Web�u���E�U�Ɠ����悤�ɂ����\������ɂ́A�uAlphaImageLoader�v�t�B���^�Ƃ���IE�̓Ǝ��g����u�C���|�[�^���g�n�b�N�i!important Hack�j�v�𗘗p���܂��B

�@���̂ق���Web�u���E�U�͓���PNG���ǂݍ��܂�܂����AIE 6�̓C���|�[�^���g�n�b�N�Ȃǂɂ��background��������A����PNG���\���ł��܂��B

�� �\��

p {
    backgroud:url(sample.png) no-repeat !important;
    background:none; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoder(src="sample.png");
}

�� �R�[�f�B���O�T���v��

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����PNG��\����������@</title>

<style type="text/css">

p {
height:100px;
background:url(sample.png) no-repeat !important;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sample.png");
}

</style>
</head>
<body>
<p>PNG�摜</p>
</body>
</html>

�y2�zmin-width�Amax-width���g������

�@IE 6�ł́A�Ǝ��́uexpression�v���\�b�h���g�p���邱�Ƃɂ���āA�umin-widht�v�umax-width�v�������ł��܂��B

�@�܂��A���̂ق���Web�u���E�U�p�Ɂumin-width�v�umax-width�v�̎w����L�q���܂��B���Ɂuexpression���\�b�h�v���g���A��Ɏw�肵���umin-width�v�umax-width�v�Ɠ��������ɂȂ�悤�Ɏw����L�q���Ă����܂��B

�� �\��

p{
    min-width:300px;
    max-width:600px;
    width:expression(document.body.clientWidth < 300? "300px" : document.body.clientWidth > 600? "600px" : "auto");
}

�� �R�[�f�B���O�T���v���i���N���b�N����ƁA���ۂɃT���v����Web�u���E�U�Ō����܂��j

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>min-width�Amax-width���g������</title>

<style type="text/css">

p{
background:#ccc;
min-width:300px;
max-width:600px;
width:expression(document.body.clientWidth < 300? "300px" : document.body.clientWidth > 600? "600px" : "auto");
}

</style>
</head>
<body>
<p>min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width</p>
</body>
</html>

  1/3

�@INDEX
Web�u���E�U��CSS�n�b�N���t�B���^Tips�i1�j�@
IE 6�ŋ����Ȃ����߂́A9�‚�CSS�n�b�N
Page1
�ł������g���Ă���̂Ɂc�c�A����A�����炱��
�y1�z����PNG��\����������@
�y2�zmin-width�Amax-width���g������
  Page2
�y3�zmin-height��Ή���������@
�y4�zheight��100���ɂ�����@
�y5�z�t���[�g����2�{�}�[�W����ʏ�ɖ߂����@
�y6�z���X�g�̏c���у��j���[
  Page3
�y7�z���T�C�Y���ɂ����
�y8�z�t���[�g���Ƀe�L�X�g��3px����Ă��܂��Ă����ꍇ
�y9�z�O���̗v�f��overflow:auto;���w�肵�Ă����ꍇ
IE 6�ȊO�Ŏg����CSS�n�b�N��

[an error occurred while processing this directive]
�u�f�U�C���n�b�N�v�R�[�i�[��



HTML5 + UX �t�H�[���� �V���L��
��IT���[���}�K�W���@�V������X�^�b�t�̃R���������[���œ͂��܂��i�����j

���ڂ̃e�[�}

�f�U�C���n�b�N �L�������L���O

�{�� ����