Web�y�[�W��Retina�Ή�������e�N�j�b�N�`���H���FjQuery�~HTML5�~CSS3��^�ʖڂɕ׋��i5�j�i1/3 �y�[�W�j

�O���Web�ɂ�����s�N�Z���̊�{�I�Șb�𓥂܂��A�����Retina�f�B�X�v���C���͂��߂Ƃ��������׃f�B�X�v���C��Web�y�[�W��Ή�������e�N�j�b�N���Љ��B

» 2013�N09��26�� 19��30�� ���J
[�R�c�@�����C�N���X���\�b�h]

�@�O��iWeb�y�[�W��Retina�Ή�������e�N�j�b�N�`��b�m�����j��Web�ɂ�����s�N�Z���̊�{�I�Șb�����܂����B����͂���𓥂܂�����ŁARetina�f�B�X�v���C���͂��߂Ƃ��������׃f�B�X�v���C��Web�y�[�W��Ή�������e�N�j�b�N���Љ�܂��B

CSS Sprite�ŕ����̉𑜓x�ɑΉ�

�@�ł����n�I�ȑΉ����@�ł��B��ʓI��PC�f�B�X�v���C�Ɠ����v�̂ō쐬�����摜��Retina�f�B�X�v���C�Ɏg�p����ƁA�ɂ��񂾂悤�ɕ\������Ă��܂��܂��B�f�o�C�X��ł͓����T�C�Y�ł��A�g���Ă���s�N�Z�����̃^�e�E���R��2�{�ł�����ARetina�f�B�X�v���C�p�Ƀ^�e�E���R2�{�̑傫���̉摜��ʓr�p�ӂ���K�v������܂��B

CSS Sprite��Retina�f�B�X�v���C�ɑΉ�������ۂ̃|�C���g

  • HTML��meta�^�O��viewport���w�肵�Awidth��device-width�ɂ���
  • �^�e�E���R2�{�̉摜��ʓr�p�ӂ���i��2�{�Ƃ����̂�iPhone��Retina�f�B�X�v���C����ɍl�������̂ł��BAndroid����ł���΁A1.5�{��3�{�̉摜��p�ӂ��邱�ƂɂȂ�܂��j
  • Media Queries���g���Adevice-pixel-ratio:2�iresolution:2dppx�j�ȏ�̏ꍇ��2�{�̉𑜓x�̉摜���w��
  • �ʏ�𑜓x�ɍ��킹��2����1�idevice-pixel-ratio�܂���resolution�ɂ��j��background-size���w�肷��
<!doctype html>
<html>
<head>
         <meta charset="UTF-8"/>
         <title>-webkit-mask-image | jHC-Study</title>
         <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
</head>
�c
</html>
HTML
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
    .class {
        background-image: url(image-2x.png);
    }
}
CSS

CSS Sprite�ɂ��Ή��̃����b�g�ƃf�����b�g

�@�摜�t�@�C�����g�����ƂŁA�f�U�C�i�[���쐬�����A�C�R���⃍�S�A���邢�͎ʐ^�Ƃ������A�v���O�����R�[�h�����ł͕\��������Ȃ����G�ȉ摜�ł����ꂢ�ɕ\���ł���̂������b�g��1�‚ł��B

�@����ŁA�����p�r�̉摜��2��ވȏ�p�ӂ��邱�ƂɂȂ�΁A�P���ɊǗ�����t�@�C������2�{�ȏ�ɑ����܂��B���̓_���ő�̃f�����b�g�Ƃ�����ł��傤�B�܂��A�摜�����𑜓x�ł���قǃt�@�C���T�C�Y����剻���A�ǂݍ��݂̕��ׂ������Ȃ��Ă����܂��B����ɂ��A���o�C���‹��ł̓l�b�g���[�N������s����ɂȂ肪���ł���A���𑜓x�̉摜���ʐM�̃{�g���l�b�N�ɂȂ�Ƃ����W�����}���t���܂Ƃ��܂��BPC�‹��ɂ����Ă��A�{���I�ɕs�K�v�ȍ��𑜓x�摜���ǂݍ��܂��̂͌����ėǂ����Ƃł͂���܂���B���\�[�X���₵�Ă܂Ŏ������ׂ����A���O�ɂ悭�������邱�Ƃ���؂ł��B

srcset���g��

�@srcset��img�^�O�����‘�����1�‚ŁAWHATWG�iWeb Hypertext Application Technology Working Group�j�̒�Ăɂ��HTML5�̎d�l�ł��B�]����src�����Ŏw��ł���摜�t�@�C����1�‚����ł����Asrcset�����͕����̉摜�t�@�C�����w�肵�AWeb�u���E�U�̃X�N���[���v���i���A�����A�s�N�Z�����x�j�ɉ����Ăǂ̉摜�t�@�C����ǂݍ��ނ���`�ł��܂��B

�@�d�l���͈̂ȑO����Ă���Ă��܂������A2013�N8���ɂȂ��Ă悤�₭WebKit Nightly Builds�i�����ł�Safari�j�Ŏ�������܂����B�‚܂�A�����_�ł͐��������[�X�ł�Web�u���E�U�Ŏg���Ȃ���AWebKit����h������Blink�������_�����O�G���W���Ƃ���Chrome���ǂ̂悤�ɑΉ�����̂��C�|����ł����A�m���Ƃ��ė}���Ă������Ƃɉz�������Ƃ͂���܂���B

�@�ЂƂ܂������ł͊ȒP�Ȏg�������o���Ă����܂��傤�B�ȉ��̃T���v���R�[�h�ł́A�s�N�Z�����x��2�{�i�A�b�v����Retina�f�B�X�v���C�Ȃǁj�̃X�N���[���ɂ����Ă�image-x2.png��ǂݍ��݁A����ȊO�̃X�N���[���ɂ����Ă�image.png��ǂݍ��ނ悤�ɂ��Ă��܂��B

<img src="image.png" srcset="image-x2.png 2x" />

�@�w����@�Ƃ��āA�܂��摜�t�@�C�����i�T���v���R�[�h�ł�image-x2.png�j���L�q���A���p�X�y�[�X��u���Ă��̉摜��ǂݍ��ރX�N���[���v���i�T���v���R�[�h�ł�2x�j���L�q���܂��B�w��̋L�q���@�͈ȉ��̒ʂ�ł��B

  • Nx �c �ŏ��s�N�Z�����x��N�{
  • Nw �c ��ʕ���N�s�N�Z���ȉ�
  • Nh �c ��ʍ���N�s�N�Z���ȉ�

�@���p�X�y�[�X�ŋ�؂�΁A�����̏�����g�ݍ��킹�邱�Ƃ��”\�ł��B�J���}��؂�Ŏw�肷�邱�Ƃŕ����̉摜���w��ł��܂��B

<img src="image.png" srcset="image-x1.5.png 1.5x, image-x2.png 2x, image-x3.png 3x" />

�@srcset�������T�|�[�g���Ă��Ȃ�Web�u���E�U�ł�srcset��������������Asrc�����݂̂��ǂݍ��܂�܂��B�ł�����Asrcset�������g�p���Ă����Ɉ��e���͂Ȃ��ł��傤�B�ނ���A���̂�������Ή����Ă����΁AWeb�u���E�U���Ή�����Ɠ����ɑ������K�p����܂��B

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

Copyright © ITmedia, Inc. All Rights Reserved.

'; }; BodyAdGAMWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdGAMWithCCE.EVENT_INIT = 'init'; BodyAdGAMWithCCE.EVENT_READY = 'ready'; /** * AdContent �̏������Ɨ��p���� */ BodyAdGAMWithCCE.prototype.init = function () { Logger.writeln('BodyAdGAMWithCCE.prototype.init'); this.dispatchEvent(new CustomEvent(BodyAdGAMWithCCE.EVENT_INIT)); }; /** * �L���g�� GAM ���N�G�X�g */ BodyAdGAMWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); this.dispatchEvent(new CustomEvent(BodyAdGAMWithCCE.EVENT_READY)); }; // global reference window.itm = itm; //entry point const build = function( e ) { BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); } build(); })();

�A�C�e�B���f�B�A����̂��m�点

�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

́uAIR[fBOv͖{ɕKvH
Microsoft  WindowsőO2026
4AI by IT - AIAAA
[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