HOME

--- ���� --- ���X�g ���o�� �e�[�u�� ���p �t�H�[�� �t���[�Y�v�f �A���J�[ ���X�g�Q �}�[�N�A�b�v CSS ����p�X�^�C�� ���C�A�E�g �e�L�X�g �摜�u�� body�v�f

�摜�u��

CSS�ɂ��摜

���h���̂��߂́i�R���e���c�łȂ��A���邢�͑����I�ȁj�O���t�B�b�N�͂��ׂ�CSS�ɋL�q����̂����z�I�B
���S�ȕ��@�͍��̂Ƃ���Ȃ��̂ŁA���ꂼ��̗��_�ƌ��_���l���Ȃ��痘�p�ł�����@�őΏ�����B

���@A�FFIR�iFahrner Image Replacement�@�t�@�[�i�[���摜�u���j

CSS��background�i�܂���background-image�j�v���p�e�B���g�p���ăe�L�X�g���摜�Œu������I���W�i���̕��@�B

�}�[�N�A�b�v

�E�^�O�̒lj��F���o���v�f�ɉ����ă}�[�N�A�b�v��Ńe�L�X�g���ēx����^�O��K�v�Ƃ���B<span>���œK�B
<span>�͔ėp�C�����C���v�f�ł���A����̈Ӗ��I�\��������킳�Ȃ��B

<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

CSS

�菇1�D<span>�v�f���g���ăe�L�X�g���\���ɂ���
�菇2�D�X�^�C����`�����^�C�v�̔w�i�摜��<h1>�v�f�Ɋ��蓖�Ă�

#fir {
	width: 287px;
	height: 29px;
	background: url(fir.gif) no-repeat;
	}
#fir span {
	display: none;
	}

���_�F

�E�}�[�N�A�b�v�ł͂Ȃ�CSS���g�p���ĉ摜��񋟂��邱�ƂŁACSS���T�|�[�g���Ă��Ȃ��u���E�U��f�o�C�X�ł����̃e�L�X�g�����͕\�������B

�E�O���t�B�b�N����������̂́A�}�[�N�A�b�v���X�V����̂ƈ���ĊȒP

���_�F

�E�����_�ł́A��ʓI�ȃX�N���[�����[�_�[��display�v���p�e�B�̒l��none�Ɏw�肵�Ă���Ɠǂݏグ�Ȃ��Ȃ�B

�E�Ӗ��̂Ȃ�<span>�v�f���K�v

�E���[�U���u���E�U�ʼn摜���g�p�s��CSS�L���ɂ��Ă���ƁA�e�L�X�g���w�i�摜���\������Ȃ��Ȃ�B

�����̃y�[�W�̃g�b�v��

���@B�FLIR�iLeahy/Langridge Image Replacement�@���[�t�B�[/�����O���b�W���摜�u���j

FIR�ŕK�v�Ƃ����A�Ӗ����Ȃ����s�Œ���<span>�v�f�Ȃ��ʼn摜�u�����������邱�Ƃ�ڎw���B display�v���p�e�B���g���ăe�L�X�g���\���ɂ������Ɋ܂�ł���v�f�i�����ł�<h1>�j�̍�����0�ɐݒ肵�A��p�f�B���O��u���摜�̍����Ɠ����ɐݒ肷�邱�ƂŃe�L�X�g���ז��ɂȂ�Ȃ��Ƃ���Ɉړ�����B

�}�[�N�A�b�v

<h1 id="lir">Leahy/Langridge Image replacement</h1>

#lir {
	padding: 90px 0 0 0;
	overflow: hidden;
	background: url(lir.gif) no-repeat;
	height: 0px !important; /*�����Ă��̃u���E�U�p�̒l*/
	height /**/:90px; /*IE5/Win�p�̒l*/
	}

�e�L�X�g�ƒu������摜�͍���90�s�N�Z���ŁA��p�f�B���O�Ɠ����l�B
������0�ɐݒ肵�A�e�L�X�g�i�����<h1>�v�f���Ɋ܂܂����́j�����ʓI�Ɏ�菜���B
!important���[���ŁA��s����l���㑱�̒l���㏑������B
��Windows��IE��!important���[���ɑΉ����Ă��Ȃ��B�܂��ʏ�̃u���E�U��2�Ԗڂ�height���[���𖳎����邪Windows��IE5�͔F������B
/**/�́AIE6�ɂ����߂�����邽�߂ɓ�����Ă���i��Alternate Box model Hacks�j
�܂��A�Ō��height�́A�K���u���Ɏg�p����摜�̍����Ɠ����ɂȂ�B

���_�F

�E�lj��̃}�[�N�A�b�v���s�v

�E�X�N���[�����[�_�[���e�L�X�g�𐳏�ɓǂݏグ��

���_�F

�EWindows��IE5�̂��߂̃{�b�N�X���f���n�b�N���K�v

�E���[�U���u���E�U�ʼn摜���g�p�s��CSS�L���ɂ��Ă���ƁA�e�L�X�g���w�i�摜���\������Ȃ��Ȃ�B

�����̃y�[�W�̃g�b�v��

���@C�FPhark����

��\���ɂ������e�L�X�g�ɑ傫�ȕ��̃e�L�X�g�C���f���g�����蓖�Ă�B�e�L�X�g�͉�ʏ�ɑ��݂��邪�A�ő�̃��j�^�ł��\������Ȃ��͈͂ɂ���Ƃ����A�I���ȕ��@�B

�}�[�N�A�b�v

<h1 id="phark">The Phark Method</h1>

#phark {
	height: 26px;
	text-indent: -5000px;
	background: url(phark.gif) no-repeat;
	}

���_�F

�E�lj��̃}�[�N�A�b�v���s�v

�E�X�N���[�����[�_�[���e�L�X�g�𐳏�ɓǂݏグ��

���_�F

�E���[�U���u���E�U�ʼn摜���g�p�s��CSS�L���ɂ��Ă���ƁA�e�L�X�g���w�i�摜���\������Ȃ��Ȃ�B

�����̃y�[�W�̃g�b�v��

���S����

�قȂ�T�C�g���S��񋟂���B
��D�u���E�U��CSS��K�؂ɏ������郍�S�ibackground�v���p�e�B�ŎQ�Ɓj
��D�Â��u���E�U�A�n���h�w���h�f�o�C�X�A�X�N���[�����[�_�[�Ȃǂɒ񋟂��郍�S

�}�[�N�A�b�v

<div id="logo">
    <span><img src="logo_lofi.gif" width="173" height="31" alt="Beautifuldays" /></span>
</div>

�z�[���y�[�W�ɖ߂�N���b�J�u�����S������}�[�N�A�b�v

<div id="logo">
    <span><a href="/"><img src="logo_lofi.gif" width="173" height="31" alt="Beautifuldays" /></a></span>
</div>

CSS

#logo img {
	display: block;
	width: 0;�@�c