�ȉ��̕����̓E�F�u����҂ɂƂ��Ĕ��ɗL�p�ȕ����ł������A�T�C�g���̂����ł��Ă����悤�Ȃ̂ŃL���b�V������T���x�[�W���܂����B ���̕��������J���邱�Ƃɂ��Ă͖|��҂��܂փ��[���ŘA�����Ƃ��Ă��܂����A�܂����ԓ����Ă��܂���B�Ȃ̂ŁA�\���o�ɂ���Ă͌��J���~�߂�\��������܂��B������肪����܂����� eiji.fukushima@gmail.com �܂ł��A�����������B
�܂��A�ȉ��̕����́A�قڌ��̂܂܂Ŏ�������Ă���܂���B�]���ă����N�ꂵ�Ă�����̂�����܂��B�܂��A�摜�̓T���x�[�W�ł��܂���ł����B
CSS Hints for Internet Explorer 5
���������悭�m���Ă���悤�ɁAWindows �� Macintosh �ł� Microsoft Internet Explorer 5 �͂��ꂼ��قȂ�`��G���W���������Ă���A���̂��ߓ��� HTML �� CSS �ɂ��Ⴄ���������܂��B����́A�E�F�u����҂͗����̃u���E�U�œ���m�F�����Ȃ���Ȃ�Ȃ����Ƃ��Ӗ����܂��B�ЂƂ̊��ł��܂��\���ł�������Ƃ����āA���̃u���E�U�ł������悤�ɕ\���ł���Ǝv�����ނ��Ƃ͂ł��܂���B
��ʓI�ɁAMac �ł� IE �́A��茵�i�ɃE�F�u�W���d�l�ɏ]���Ă���A�Ή����Ă��܂��B���̈���AWindows �� IE �� Microsoft �Ǝ��d�l�̃X�^�C���� JScript ���\�b�h�ɑΉ����Ă��܂��B�����āAMac �ł� CSS �Ή��Ɋւ��Ă͑傫����Ă��܂��B�Ⴆ�AWindows �ł������Ɏ��s�ł��Ȃ� position:fixed
���T�|�[�g���Ă��܂��B
Mac �� IE �́A���̑����̃u���E�U�Ɠ����悤�Ƀo�O����قȐ��Ȃ������Ă���A�����ƒm��Ȃ��E�F�u����҂����܂Â����܂��B���̋L���́A�悭��������R�̃^�C�v�̖��ɂ��ċL�q���Ă��܂��B
position:relative
�֘A�̃o�O
margin
���o������o�O
overflow
�錾�����s����ۂ̃o�O
�����̃o�O�́AOS 9 �� OS X �̗����̃v���b�g�t�H�[���ɂ����� Mac�� IE 5 �̑S���̃o�[�W�����Ŕ������܂��B
�K���Ȃ��ƂɁA�E�F�u����҂͂����̕s��ɑR�������܂��B�𗧂� CSS �n�b�N���g���A�u���E�U�U�蕪���� CSS �����ɗ���Ȃ��Ă�����ȃX�^�C�����`�ł���悤�ɂȂ�܂��B
�g����: MacIE �́A CSS �R�����g�����o�b�N�X���b�V�� \
�𐳋K�\����ǂނ��̂悤�Ɏ��̕����̃G�X�P�[�v�R�[�h���Ɖ��߂��܂��B���̂܂������������̍D�s���Ȃ��Ƃ́A�R�����g�̏I�_�}�[�J�[���G�X�P�[�v�ł��邱�Ƃł��B�ȉ��̂悤�ɂ���� IE �� �X�^�C���w��𐳂�����͂ł��Ȃ��Ȃ�܂��B
�v�f { �X�^�C�� : MacIE�p ; } /* �R�����g�̏I�_���G�X�P�[�v���ꂽ�R�����g�ł��B �ȉ��̃X�^�C���� IE �ɂ̓R�����g�̈ꕔ�ƌ��Ȃ���� �ǂݍ��܂�܂���B \*/ �v�f { �X�^�C�� : ���̃u���E�U�p�B�O�L�̃X�^�C���w����㏑���B; } /* ���x�̃R�����g�́A���ʂ̏I�_�����R�����g�ł��B IE �͂��̃R�����g�̏I�_��O�̃R�����g�̏I�_�ƌ��Ȃ��܂��B */
����� IE �̂��߂̃X�^�C����`�����āA���̃u���E�U�̂��߂ɂ͂�����㏑���ł���悤�ɂȂ�܂����B���̃n�b�N�ő����� CSS �֘A�̕s��������ł��܂��B
position:relative
�֘A�̃o�O �i��Ғ�: �ȉ��̕��͂� CSS ���L���Ȏ��o�u���E�U�Ō��邱�Ƃ�O��ɏ�����Ă��܂��j
position
�v���p�e�B�ɂ�4��ނ̒l�istatic
, relative
, absolute
, fixed
�j�̂����ЂƂ��w�肵�܂��Bstatic
�̓f�t�H���g�̒l�ł��Bfixed
�͂܂� Windows�� IE �͑Ή����Ă��܂���B�E�F�u����҂͂悭 position:absolute
���g���Aposition:relative
�������X���ɂ���܂��B
�v�f�ɑ��ΓI�Ȉʒu�w���^�����Ƃ��A���̗v�f�͍ŏ��̓y�[�W���ʂ̈ʒu�ɒu����܂����A�V���� top
�� left
�v���p�e�B���`���邱�Ƃňړ����܂��B�Ⴆ�A���̒i���� top
�� left
�� 10px �ɂ����̂ŁA������Ƃ����߂Ɉړ����Ă��܂��B
���̌��ʂ͋ɂ߂ėL�p�ł��B�����L�p���ƌ����A���Δz�u���ꂽ�v�f�� position:absolute
�Ő�Δz�u���ꂽ�v�f�̃R���e�i�ɂȂ邱�Ƃł��B��������ȃX�^�C���̗v�f���������Ƃ��܂��B
�v�f { position: absolute; top: 10px; left: 100px; }
�c����͒ʏ�u���E�U�E�B���h�E�̍�������� 100,10 �̍��W�ɔz�u����܂��B�������A���̗v�f�̑c��v�f�� position:static
�ȊO�̎��A�v�f�͂��̑c��v�f���瑊�ΓI�Ȉʒu�ɔz�u����܂��B
���̂悤�ɁAposition:relative
�ő��Δz�u�����v�f�́A��Δz�u�����v�f�̃R���e�i�Ƃ��Ďg�����Ƃ��ł��܂��B
���s����
���s����
����ɁA���̒i���𑊑Δz�u���܂����B �܂��Aem
�v�f�� 100,10 �̍��W�ɐ�Δz�u���܂����i�u����͋����v�̕����j�B���W�́A�u���E�U�E�B���h�E�̍�����ł͂Ȃ��A���̒i���̍��������_�Ƃ��ėp���܂��B������ em
�͂��̒i�����ɂ܂�����̂ł��B
����͋����B
position:relative
�͂��̂悤�Ȍ��ʂ̂��߂ɗp�����邾���łȂ��A���܌��ꂵ���T�C�h�G�t�F�N�g�� IE �ɗ^���܂��B�ȉ��̒ʂ�ł��B
�o�O: ���Δz�u���ꂽ�v�f�̓����ɂ���v�f�́A�e�v�f���� position �̒l�� left
�� right
�v���p�e�B���܂��������`�Ōp�����܂��i���� top �� bottom �͌p�����܂���j�B
��:
div#container { position: relative; border: 1px solid #000000; top: 50px; left: 50px; width: 200px; } .testdiv { position: static; border: 1px solid #000000; background-color: #ffffff; padding: 10px; margin: 0px; }
�R���e�i�̓����� <DIV>
�� position
�v���p�e�B�͖����I�� static
�Ɏw�肵�܂����B�������`��͈ȉ��� Mozilla �̃X�N���[���V���b�g�ł��B
MacIE 5 �ł́A���̂悤�ȕ`��ɂȂ�ł��傤�B
�s���Ȃ��ƂɁAIE �͂��ׂĂ� DIV �v�f�i�ŏ��̂ЂƂȊO�j�� 50px �E�Ɉړ����܂��B���̂悤�� DIV �v�f�� position
�irelative�j�� left
�i50px�j�v���p�e�B�̒l��e�v�f����p�����܂��B
�����@: �����B�K���ɂ��A���̂悤�ȃX�^�C���ɂ�����v�͂���قǑ傫������܂���B
�o�O: position
���`���Ă��Ȃ��i�]���� static
�ƂȂ�j�e�[�u�����̐�Ύw�肵���v�f��z�u����Ƃ� IE �̓e�[�u���� position:relative
�ł��邩�̂悤�ȋ�����������܂��B��Δz�u����v�f�̍��W�́A�y�[�W�̍�����ł͂Ȃ��A�e�[�u���̍��������̑��ΓI�Ȓn�_�ɂȂ�܂��B�e�[�u���� position:static
�L���Ē�`���Ă��A���̖��͉���ł��܂���B
��: �ȉ��̃X�N���[���V���b�g�̂悤�ɁA�N���X container
�����v�f�̓e�[�u���ŁA�N���X testdiv
�̗v�f�͂��̃e�[�u���Z���̂ЂƂ̒��ɂ���܂��B
<table class="container" border=2> <tr> <td> Blah! <div class="testdiv"> This is the test DIV in the table </div> </td> <td> Blah! </td> </tr> </table>
.container { position: static; margin-top: 50px; border: 1px solid #000000; } .testdiv { position: absolute; top: 50px; left: 50px; border: 1px solid #000000; padding: 10px; }
testdiv
�́A�R���e�i�� position:static
�Ȃ̂Ńu���E�U�E�B���h�E���瑊�ΓI�ɔz�u����Ȃ���Ȃ�܂���B
Opera 6 �͐������`�悵�܂��Btestdiv
�͊��S�Ƀu���E�U�E�B���h�E���瑊�ΓI�ɔz�u����A�e�[�u���̈ʒu�ɉe������܂���B
�������AIE �͂��������e�[�u���� position:relative
�w�肪����Ă邩�̂悤�ɁA�e�[�u�����瑊�ΓI�Ȉʒu�� testdiv
��z�u���܂��B�܂��A<DIV>
�͂��������e�[�u���̓����Ƀt�B�b�g���邭�炢�ɏ������k�݂܂��B
�i�ʔ������ƂɁAMozilla �ɂ͐������o�O������܂��BMozilla �́A�e�[�u���� position:relative
�ł��鎞���A�e�[�u�������̐�Δz�u�v�f���e�[�u�����瑊�ΓI�ɔz�u���邱�Ƃ��ł��܂����B �j
�����@: �����B�e�[�u�������̗v�f���Δz�u���Ȃ��悤�ɂ��܂��傤�B
�o�O: ��Δz�u�v�f���u���E�U�E�B���h�E�̉E�������͒�̂ւ�ɔz�u����ƁA��� margin ���������A�s�K�v�ȃX�N���[���o�[���o�����錴���ƂȂ�܂��B
��:
div.container { height: 150px; width: 200px; position: absolute; right: 0px; border: 1px solid #000000; background-color: #ffffff; }
���� <DIV>
�͉E�[�ɐڂ��ĕ\������܂��B�ق��Ƀy�[�W�̒��g�͖����̂ŃX�N���[���o�[�͕s�v�ł��B����� Mozilla �͐������z�u���܂��B
IE ���������z�u���܂����A�����������ɖ��p�̉E�}�[�W�������A�s�K�v�ȉ��X�N���[���o�[���o�������܂��B
���� <DIV>
��15�s�N�Z���̗]�v�ȉE�}�[�W���������������A����15�s�N�Z���́A�X�N���[���o�[���Ƃ܂����������ł��B�ɂ��ւ�炸�A�ǂ̂悤�ȏŃX�N���[���o�[���}�[�W���̒��ɒu����邩��������̂͗e�Ղł͂���܂���B���̃X�N���[���o�[�X�y�[�X�̂܂������������̃o�O�̊W�́A���炩�ɂȂ��Ă͂��܂���B
�����@: right
�v���p�e�B�̒l�� 15px �ɂ��āA�E�}�[�W���� -15px �Ɏw�肵�܂��B
div.container { height: 150px; width: 200px; position: absolute; right: 15px; margin-right: -15px; border: 1px solid #000000; background-color: #ffffff; }
���̌��ʂ͈ȉ��̒ʂ�ł��B
�ق��̃u���E�U�� IE �Ɠ�������������̂ŁA���̑����@�̓N���X�u���E�U�݊����ɂقƂ�ǖ��͂���܂���iWindows 2000 ���ł� Mozilla �������B���܂�1�s�N�Z���̂킸���ȃ}�[�W�����o�Ă��܂��܂��j�B
�v�f���u���E�U�E�B���h�E�̒�ɔz�u����ۂɂ������o�O���������܂��B���̏ꍇ�Amargin-bottom
�� -15px �Ɏw�肵�Ȃ���Ȃ�܂���B
���� margin
�̃o�O�͖��炩�ɃX�N���[���o�[�Ɋւ����̂ł��B�s�K�ɂ��A��ɂł͂���܂����قƂ�ǂ̏ꍇ���̃o�O�͕\��܂��B1������2���̊m���� IE �͈ȉ��̂悤�ȃX�^�C���𐳂������߂��܂����A�����[�h�ł܂��ς��Ă��܂��ł��傤�B
�o�O: IE �̓X�N���[���o�[���̗̈���\�������ɑ����Ă���Ƃ܂������ĔF�����܂��B�y�[�W�̒��g�͏c�X�N���[���o�[�̉��ɂ݂͂łāA����ɂ���ĕs�K�v�ȉ��X�N���[���o�[���\��܂��B
��:
body { margin: 0px; padding: 0px; font: 12px helvetica; } div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; } p { border: 1px solid #000000; }
�R���e�i�ƂȂ� <DIV>
�̍�����150�s�N�Z���A����100%�Aoverflow:auto �Ƃ��A�K�v�ł���X�N���[���o�[��\������悤�ɂ��܂����B-moz-box-sizing
�� Mozilla �̃{�b�N�X���f������������邽�߂̂��̂ł��B
���Ɏw�肵�Ȃ���A<P>
�v�f�͏�Ɏg�������̉��� 100% �����A�����̓R���e�i <DIV>
�̑傫���ɂ҂����艈���܂��B�����āA�{�b�N�X�ɂ�������ׂ̍� P
���܂܂��X�N���[���o�[�������܂��B���̎� P
�́ADIV
�̍��}�[�W������X�N���[���o�[�̍��[�ɉ����悤�ɁA������ω����Ȃ���Ȃ�܂���B
Mozilla �ł́A���̃X�^�C���͖]�ʂ�ɂȂ�܂��B
������ IE �ł͂���ȕ\���ɂȂ�܂��B
P �͏c�X�N���[���o�[��˂������ĉ������R���e�i�̉E�[�ɉ��킹�܂��B����ɂ���ăy�[�W�̒��g�̈ꕔ�͏c�X�N���[���o�[�̉��ɉB��Ă��܂��AIE �͉��X�N���[���o�[������邱�ƂƂȂ�܂��B
�����@: ��{�I�������@�́ADIV ��16�s�N�Z���� padding-right
�������邱�Ƃł��B
div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; padding-right: 16px; }
�ł�����������A���̃u���E�U�ɂƂ��ė]�v�� padding
���B���Ȃ���Ȃ�܂���B�K���Ȃ��ƂɃR�����g���̃o�b�N�X���b�V���ɂ��n�b�N�ŁApadding-right
�̒�`�� MacIE �݂̂Ɍ��肷�邱�Ƃ��ł��܂��B
div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; padding-right: 16px; } /* �R�����g���o�b�N�X���b�V���̃n�b�N�� \*/ div.container {padding-right: 0px;} /* �n�b�N�I��� */
����ŁAIE �� padding-right
�� 16�s�N�Z���A���̃u���E�U��0�s�N�Z���Ƃ��邱�Ƃ��ł��܂����BP
�v�f�̓X�N���[���o�[�̍��[�ɉ����悤�ɂȂ�ADIV
�̉��X�N���[���o�[�͂����K�v�Ȃ��̂ŕ\������܂���B
�c�O�Ȃ��m�点�ł��B����{�������Ƃłӂ��̐V���ȕs�K�v�Ȍ��ʂ��łĂ��Ă��܂��܂����B
P
���������ɑ��� P
���Z���Ȃ��Ă��܂��B���ہA����� padding-left
��K�p����O���炷�łɂ���܂����B�O�̃X�N���[���V���b�g�ŁA�ŏ��� P
�͐����������i���[����X�N���[���o�[�܂Łj�ɂȂ��Ă��܂����B�y�[�W�S�̂̃X�N���[���o�[�̐����錴���́A�܂��O�L�́u�]����15�s�N�Z���̃}�[�W���v�ɂ����̂ł��Bmargin-right
�̃n�b�N�ł��̖��͉������܂��B
div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; padding-right: 16px; margin-right: -15px; }
�����Ă��̌��ʂł��B
�s�K�Ȃ��ƂɁA�܂��ŏ��� P
�̖�肪����܂��B�ŏ��̃u���b�N�v�f�́A�}�[�W���̃o�O�ɉe������܂���B�X�N���[���V���b�g�������悤�ɁA�ŏ��� P
�����͉��X�N���[���o�[�̉��ɓ����Ă��Ȃ��̂ŁApadding-right
�ŕs�K�v�Ȍ��Ԃ��ł��Ă��܂��̂ł��B���������̖��i�̌��@�j�͈�ѐ�������܂���B�قƂ�ǂ̏ꍇ�A�ŏ��� P
�͐������U�镑���܂����A���X�����͂Ȃ�܂���B
�ȉ��� Mac OS X �ł� IE 5.2 �����̉�����ł��BOS 9 �łł́A�܂����������悤�ɂ͓����܂���B���̍�Ƃ́A<DIV>
�̍ŏ��̎q�v�f�� -16px �� margin-right
��^���邱�Ƃł��B
div.container>:first-child { margin-right: -16px; }
�c�����Ă܂��R�����g���̃o�b�N�X���b�V���ɂ��n�b�N�ő��̃u���E�U�p�̃X�^�C�����㏑�����܂��B����Ŋ����� CSS �ɂȂ�܂��B
div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; padding-right: 16px; margin-right: -15px; } div.container>:first-child { margin-right: -16px; } /* �R�����g���o�b�N�X���b�V���̃n�b�N�� \*/ div.container {padding-right: 0px;} div.container>:first-child { margin-right: 0px; } /* �n�b�N�I��� */
����ŁA�ʏ�͂��̂悤�ɉ�������܂��B
������x�O�������܂��ƁA������A�̃o�O�͂��C�܂���ɋN���܂��B���� CSS �n�b�N���S�R�����Ȃ���������܂��B
�o�O: <DIV>
���� <P>
��z�u����Ƃ��ɁA<DIV>
�� <P>
�� margin-bottom
�̒l���t�p�� ���܂��B
��:
div.container { height: 100px; width: 90%; border: 1px solid #000000; margin: 0px; } p { margin-top: 0px; font-size: 20px; border: 1px solid #000000; }
���̃X�^�C���͈ȉ��̂悤�ɕ\������Ȃ���Ȃ�܂���iMozilla �ł̃����_�����O�j�B<DIV>
�̊O�ɂ���ŏ��� <P>
�� <DIV>
�̃{�[�_�[�ɐڂ��܂��B
������ IE �ł́A<DIV>
�͓����̍Ō�̎q�v�f�� <P>
�� margin-bottom
�̒l���t�Ɍp�����āA�s�K�v�Ȍ��Ԃ��ł��錴���ɂȂ��Ă��܂��܂��B���̎��̃}�[�W���ʂ� <P>
�̕����̑傫������ł��B
�����@: P
�v�f�� margin-bottom
��0�s�N�Z���Ɏw�肷��B
overflow
�錾�́A�v�f�̂͂ݏo���������ǂ̂悤�Ɉ��������`���܂��B�v�f����߂�ꂽ���ƍ����������Ă��āA��`���ꂽ�̈�ɒ��g�������܂肫��Ȃ��Ƃ��A3�̎�舵����������܂��B
overflow:visible
�ŁA���g�̓{�b�N�X����͂ݏo�ĕ\������܂��Boverflow:hidden
�ŁA�{�b�N�X�ɂ����܂�Ȃ����g�͊��S�ɉB��āA���[�U�ɂ͗��p�ł��Ȃ��Ȃ�܂��Boverflow:auto
�ŁA�{�b�N�X�͕K�v�ɉ����ăX�N���[���o�[��\�����܂��B���̃X�^�C���͑O�o�̃R�[�h�̗�ŗp���܂����B��4�̒l�Aoverflow:scroll
�́A�K�v�̗L���Ɋւ�炸��ɃX�N���[���o�[��\�����܂��B�E�F�u����҂͂߂����ɂ�����g�p���邱�Ƃ͂Ȃ��ł��傤�B
�o�O: �v�f�ւ� overflow
�v���p�e�B�̒l�� visible
�ȊO�̂Ƃ��A�v�f�̒��g���蔲����܂���B���̑�����e�̓y�[�W��ɑ��݂��i�����Ȃ����j�A�X�N���[���o�[�������܂��B
��: �u�B�ꂽmargin�v�Ŏg�p�����R�[�h�̗�ɂ����� P
�v�f��lj�����ƁA�s�K�v�ȃX�N���[���o�[���Ăѕ\��܂��B����̓y�[�W�S�̂̏c�X�N���[���o�[�ł��B
<DIV>
�̗]�v�Ȓ��g�́Aoverflow:auto
�Ɛ錾�����ɂ��ւ�炸�A�y�[�W�S�̂ɂ͂ݏo�ăX�N���[���o�[���܂��B�i�ŏ��̎q�v�f�� P
���Ăт��������Ȃ��Ă��邱�Ƃɂ����ӂ��Ă��������B����͔��ɖ��ȃo�O�ł��B�j
�����@: body
�v�f�� overflow:hidden
�Ǝw�肵�Ă��������B���̑�ɂ�莟�̃o�O�������͈̂ȉ��̒ʂ�B
�o�O: body
�v�f�� overflow
�v���p�e�B�̒l�� scroll
�������� hidden
�ɂ���ƁA���̌㓯���E�B���h�E��t���[���ɓǂݍ��y�[�W�ɃX�^�C������щ��܂��B����͕��ʂɋN���܂����A��ɋN����킯�ł͂Ȃ����Ƃɒ��ӂ��Ă��������B
�����@: �����t���[����E�B���h�E�ɕ\�������y�[�W�ɁAoverflow:auto
�Ɩ��L���邱�Ƃŏ����l�ɖ߂��܂��B
�o�O: overflow
�̒l�� visible
�ȊO�ɂ����v�f�� padding
�X�^�C�����w�肷��ƁApadding ���̃n�C�p�[�����N���N���b�N�ł��Ȃ��Ȃ�܂��B
��:
.container { width: 200px; height: 200px; overflow: auto; padding: 50px; }
���̃X�^�C���́A�O�q�̖��ʂȃX�N���[���o�[�̃o�O�������Ă͐������`�悳��܂��B
�������Apadding
�̈���ɂ��Ԃ郊���N�̓N���b�N�ŗ��܂���B���ӂ���̂́A�Apadding �� �R���e�i�̌�����͈͂̒[����Z�o����邱�Ƃł��B�B�܂��X�N���[������Ă��Ȃ��� padding-bottom
���\������Ă��Ȃ��Ă������Ȃ�܂��B
�����@: �{�b�N�X�̒��g�̗v�f�Ƀ}�[�W�������āA������܂ގ��g�� padding
�� 0 �Ɏw�肵�܂��B
Mac �� Internet Explorer 5 �́AMicrosoft ���̃u���E�U���ōł��E�F�u�W���݊����������ɂ��ւ�炸�A�������� CSS �Ɋւ�����_������܂��B�c�O�Ȃ���A�����̃o�O�����{�I�Ȍ����Ɗ֘A�Â��邱�Ƃ͂ł����A�]���ē���������҂��邱�Ƃ��ł��܂���B
�o�O���������ŗǂ̕��@�́A���ׂẴT�C�g�� IE 5 �Ńe�X�g���邱�Ƃł��B���������ꂾ������Ă��A��ŕs���Ȍ��ۂ��N����ł��傤�B���� IE 6 �������[�X�����悤�]�ނ�������܂���B