���C�A�E�g�����݂Ɏg�����Ȃ��F�ɂ킩�f�U�C���i2�j�i1/3 �y�[�W�j

��{�I��HTML�̍\����CSS�̐ݒ���@�Łu���j���[�v���������A���̃��C�A�E�g�����R�ɕω������Ă݂܂��傤�B�T���v���\�[�X���_�E�����[�h���Č���ׂĂ݂܂��傤�B

» 2013�N03��28�� 18��00�� ���J
[���c�@����CChime of Shigan]

�@�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

�i1�j���ڂ����ɕ��񂾃��j���[�y����1�z

�@���Ēʏ�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

�i2�j���ڂ����ɕ��񂾃��j���[�y����2�z

�@���ɕ��ׂ����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

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

Copyright © ITmedia, Inc. 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