��{�I��HTML�̍\����CSS�̐ݒ���@�Łu���j���[�v���������A���̃��C�A�E�g�����R�ɕω������Ă݂܂��傤�B�T���v���\�[�X���_�E�����[�h���Č���ׂĂ݂܂��傤�B
�@�O��AHTML5�{CSS3�́u���j���[�̍����v���o���邾���I �ł́u���j���[�v���ɂ��āA��{�I��HTML�̍\����CSS�̐ݒ���@�ɂ��ĉ�����܂����B����́A���̃��j���[�̃��C�A�E�g�����܂��܂ɕω���������@���w�т܂��B
�@�T���v�������p�ӂ��Ă���܂��̂ŁA�_�E�����[�h���ă\�[�X������ׂȂ���ǂ�ł݂Ă��������B
�@���Ēʏ�AHTML�͏��������Ԃɏォ�牺�ɕ\������܂��B
<div class="headmenu"> <h3>Cat Tsusin</h3> <ul> <li><a href="#">HOME</a></li> <li><a href="#">Introduction</a></li> <li><a href="#">Life</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>
�Ə����A�ȉ��̂悤�ȕ\���ɂȂ�܂��B
�@�����ŁA���́uHOME�v����uContact�v�܂ł̃��j���[���ڂ��A�����牡���тɂ��Ă݂����Ǝv���܂��B
�@�v�f�����ɕ��ׂ�ɂ͂������̕��@������܂����A�����ł�2���Љ�܂��B
�@1�ڂ́ufloat:left;�v�Ƃ���CSS�v���p�e�B���g�������ł��B�_�E�����[�h�����T���v���̒�����usample3�v���������������B���j���[���ڂ�<li>�^�O�ɑ��āufloat:left;�v���w�肳��Ă��܂��B
.headmenu li{ float:left; /*���̗v�f�������牡�ɕ��ׂ�*/ margin:0; padding:10px; border:1px solid #ffffff; }
�@�����A���������ꂾ���I�c�c�ƌ��������Ƃ���ł����A���̎w�肾�����ƈȉ��̂悤�ȕ\���ɂȂ��Ă��܂��܂��B
�@�����ŋN���Ă���̂͂ǂ��������ۂł��傤���B�{���́A<li>�^�O��1�O���̗v�f�ł���<ul>�^�O�ɂ͗ΐF�̒n�F���w�肳��Ă���̂ŁA����Ă���<li>�^�O�S�̂��悤�ɒn�F���~�����͂��ł��B�������A�ufloat:left;�v�̎w��ɂ��A<ul>�^�O�͓���Ă���<li>�^�O���������A�n�F����ɏk�ݏオ���Ă��܂��̂ł��B
�@�Ȃ̂ŁA<ul>�^�O�ɑ��āA�u���Ȃ�������Ă���v�f���v���o���Ăˁ`�v�Ɓg���܂��Ȃ��h�������Ă����Ȃ��Ƃ����܂���B�uoverflow:hidden; zoom:1;�v�Ƃ����w���NjL���܂��B
.headmenu ul{ overflow:hidden; zoom:1; /*�����̗v�f��float�v���p�e�B������Ƃ��̂��܂��Ȃ�*/ margin:0; padding:5px; list-style:none; background:#c3ebbe; /*���j���[���ڑS�̂��n�F�̎w��*/ }
�@����ł�����ƁA<li>�^�O�S�̂��͈͂��A�̒n�F�ŕ\������܂��B
�@���ɕ��ׂ����1�̕��@�́A�ufloat:left;�v�̑���Ɂudisplay:inline-block;�v���g�����Ƃł��B�_�E�����[�h�����T���v���̒�����usample4�v���������������B
/*���j���[���ڂ̐ݒ�*/ .headmenu li{ display:inline-block; /*���̗v�f�������牡�ɕ��ׂ�*/ margin:0; padding:10px; border:1px solid #ffffff; }
�@�������AIE6��IE7�ł́udisplay:inline-block;�v�ɂ͖��Ή��Ȃ̂ŁA���ɕ���ł���܂���B�����ŁA�uCSS�n�b�N�v�Ƃ������̂��g���āA���������ʂ̎w��ɕύX���ď㏑�����܂��B
/*IE6�����̐ݒ�*/ * html .headmenu li{ display:inline; zoom:1; } /*IE7�����̐ݒ�*/ *+html .headmenu li{ display:inline; zoom:1; }
�@�Z���N�^�̖`���Ɂu* html �v�u*+html �v��t���邱�ƂŁA�ݒ肪���ꂼ��IE6��IE7�ł����L���ɂȂ�܂��B���l��CSS�n�b�N�͂ق��ɂ�����̂ł����A�o���f�[�V�����i���͒l�̌��j�ɒʂ邱�Ƃ���ɁA������I�т܂����B
�@�����A����Ŋ����I �Ƃ͂܂������܂���B�usample4-1.html�v���u���E�U�ŊJ�����Ƃ��A���j���[���ړ��m�ɊԊu���Ă��܂��H �udisplay:inline-block;�v���g���ƁAIE6�AIE7�ȂLjȊO�̃u���E�U�ł͗\�����ʂ����Ԃ��ł��Ă��܂��̂ł��B�usample3�v�ƌ���ׂĂ݂�ƁA���̈Ⴂ���������肩�Ǝv���܂��B
�@���̂����Ԃ́AHTML�̋L�q��<li>�̏I���^�O�i</li>�j���玟�̊J�n�^�O�i<li>�j�̊ԂɁA���s��^�u�R�[�h�������Ă��邱�Ƃ������ł��B�Ȃ�c�c
<li><a href="#">HOME</a> <li><a href="#">Introduction</a> <li><a href="#">Life</a> <li><a href="#">Blog</a> <li><a href="#">Contact</a>
�ƁA�I���^�O���̂�����Ă��܂��܂��傤�B
�@���H �ǂ��́H �Ǝv���邩������܂��AHTML5�ŏ����Ă���Ȃ��<li>�̏I���^�O�͏ȗ��Ȃ̂ŁA��肠��܂���B�ȗ��������̂��usample4-2.html�v�ɂȂ�܂��̂ŁA�����Ԃ��Ȃ��Ȃ��Ă��邱�Ƃ��u���E�U�Ŋm�F���Ă݂܂��傤�B
�@���āA�ufloat:left;�v�Ɓudisplay:inline-block;�v�̎g�������ł����A���ɏЉ��u���ɕ��ׂ����j���[���ڂ𒆉����낦�Ƀ��C�A�E�g���邩�ۂ��H�v�Ƃ����̂��A1�̊�ɂȂ邩�Ǝv���܂��B�P�ɍ��ɉ��ɕ��ׂ邾���ł�����ufloat:left;�v�̕����Ή��u���E�U���L���A�w����ȒP�ł��B
�@�������A�ufloat:left;�v���g���������Œ������낦�ɂ���Ƃ��́A���j���[���ڂ̕����Œ�ɂ��Ȃ��Ƃ����Ȃ�������A���j���[�������������Ƃ��ɂ͕��ݒ�̐��l���v�Z����������ȂǁA���삨��ъǗ���A��Ԃ��|����܂��B�ł���A�Ή��u���E�U�ɐ�������������A���̂��߂̑Ώ����K�v�������肵�Ă��A�������낦�Ƀ��C�A�E�g����Ȃ�udisplay:inline-block;�v�̕����Z�ʂ������₷���ݒ���@�Ƃ�����Ǝv���܂��B
Copyright © ITmedia, Inc. All Rights Reserved.