Sass��Compass���g���āA�Y�����f�U�C���e�N�j�b�N�F�Y�����f�U�C���i2�j�i1/2 �y�[�W�j

Sass��Compass���g���āA���Ȃ���Ԃł�����Ƃ��������Ɍ����鏬�Y����Tips���Љ�B�O���f�[�V�����A�p�ۂ̂���y���Œ��ʓI�Ȏg�����Ƃ́H

» 2013�N02��27�� 12��49�� ���J
[�Ԓ� ���q�C�t���[�����X]

�@�V���[�Y��2��A�O���ɑ����A�����Sass��Compass���g���āA���Ȃ���Ԃł�����Ƃ��������Ɍ����鏬�Y����Tips���Љ�܂��B

�@����́A�O���f�[�V�����A�p�ۂ̂���y���Œ��ʓI�Ȏg�����ɂ‚��ĉ�����܂��B

�@�i���j���̃y�[�W�ł́A�X�̃f�U�C���v�f�𕪂���₷���������邽�߂ɁA�����T�C�Y���摜���g�債�Ďg�p���Ă��܂��B

1: �Y�����O���f�[�V����

�@CSS3�ł̓O���f�[�V������������悤�ɂȂ������Ƃ���A�摜���g�킸�Ɏ��݂ɃO���f�[�V������`�悵�āACSS�����ł�胊�b�`�ȃr�W���A���\�����”\�ɂȂ�܂������A����ɃO���f�[�V�����Ƃ����Ă��A���܂��g�����Ȃ��̂ɂ́A���܂��܂ȃR�c������܂��B

�@����1�‚̗�Ƃ��āA�Y�����O���f�[�V�������Љ�܂��B

�x�^�h������O���炢�́A�����Ȗ��x���̃O���f�[�V�����Ŗ{�����ۂ��������o����

�@�ꌩ�A1�F�Ńx�^�h��ɂ����悤�Ɍ����邯�ǁA�悭����Ɣ����ɏ㉺�ŐF�̖��邳���قȂ�O���f�[�V�������A�u�Y�����O���f�[�V�����v�ƌĂ�ł��܂��B

�@���̂悤�ɃY�����O���f�[�V�������g���ƁA���ۂɌ������̂̕��ʂɓ������Ă���悤�ȃ��A���Ȏ������o�邽�߁A�x�^�h��ɂ�������A���b�`�ő��݊��̂���f�U�C���ɂȂ�܂��B

�@��̎Q�l��ł��g�p���Ă��܂����A�O�񂲏Љ���A�u�Y�������v��u�Y�����e�L�X�g�V���h�E�v�Ȃǂƕ��p����Ƃ����ʓI�ł��B

�F�̍����傫���O���f�[�V�����͎g���ɂ���

�@��_�ɐF��ω��������O���f�[�V�����́A�ꌩ�؂₩�Ŕ������̂ł‚��‚��g���Ă݂����Ȃ��Ă��܂��܂����A�ӊO�ƃf�U�C���̍\���v�f�Ƃ��āA���܂��g�����Ȃ��̂�����ł��B

�@�����̃O���f�[�V�����́A��ʂ̒��ŋ����咣���Ă��܂����߁A���̍\���v�f�ƌ��܂��Ă��܂��₷���A�f�U�C���̈ꕔ�Ƃ��Ĉ����ɂ͂��Ȃ荂�x�ȃo�����X���o���K�v�ɂȂ�܂��B�O�񂲏Љ��Tips�́ANG�Ȕw�i�Ɠ����悤�ȗ��R�ł��B

�@�܂��A�F�̍����傫���قȂ�O���f�[�V�����́A���R�ȁu�ʁv�ɂ͌����Â炢�Ƃ����̂��g�����Ȃ��̂�������R��1�‚ł��B���݂���u�ʁv�Ɍ�������̂�͕킵�Ĕw�i��`�悷�邱�Ƃ�S�|����̂��A���R�Ȏ����̂���A������Web�f�U�C�������1�‚̃R�c�Ƃ����܂��B

�O���f�[�V������CSS���ȒP�ɍ���T�[�r�X�uUltimate CSS Gradient Generator�v

�@�O���f�[�V������CSS�쐬�ɂ�CSS��GUI�ŊȒP�ɐ����ł���T�[�r�X�uUlutimage CSS Gradient Generator�v�������߂ł��B

�@�uSwitch to SCSS�v���N���b�N����ƁACompass��mixin�𗘗p���āA���ȗ������ꂽSCSS�R�[�h����������܂��B����SCSS�𗘗p����ɂ�Compass�𓱓����Ă��邱�Ƃ��O��ƂȂ�܂����A�R�[�h���ȑf�Ȃ̂ŁA�ォ��F��ς���ۂɂ��ƂĂ��֗��ł��B

�Y�����O���f�[�V������mixin�ɂ��Ă݂悤

�@��L�̃T�[�r�X�A�uUltimate CSS Gradient Generator�v�ŃY�����O���f�[�V����������Ă������̂ł����A������ėp�I��mixin������Ă����Ƃ���ɕ֗��Ɏg�������ł��B

��̕����������邢�O���f�[�V������mixin

�@�F���Â��ł���Sass�̃t�@���N�V�����A�gdarken�h�𗘗p���܂��B

�@�ϐ��g$color�h�Ƀx�[�X�ƂȂ�F�i�O���f�[�V�����̉��̕��̐F�j���A"$lighten" �ɏ�̕��̐F�������ǂꂾ�����邭���邩�̃p�[�Z���e�[�W��ݒ肵�܂��B

��Compass��mixin�𗘗p���Ă���̂ŁA���Lmixin�𗘗p����ɂ�Compass�𓱓����Ă��邱�Ƃ��O��ƂȂ�܂��B

@mixin gradient-top-lighten($color:#666, $lighten:10%){
  background-color: $color;
  @include filter-gradient(lighten($color, $lighten), $color, vertical);
  @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

�@�g���Ƃ��͈����ʼn��̃x�[�X�ɂȂ�F��ݒ肵�܂��B���邭���銄�����f�t�H���g�w�肵��10���̂܂܂ŗ��p����ꍇ�́A�����͐F������OK�ł��B

@include gradient-top-lighten(#222);

�@���邭���銄����5���̏ꍇ�́A�ȉ��̂悤�ɏ����܂��B

@include gradient-top-lighten(#222, 5%);

�@�ȉ��̂悤�ɏ����Ă����v�ł��B

@include gradient-top-lighten($color:#222, $lighten:5%);

��̕��������Â��O���f�[�V������mixin

�@�F�𖾂邭�ł���Sass�̃t�@���N�V�����A�glighten�h�𗘗p���܂��B

�@��L�Ɠ��l�ɁA�g$color�h�Ƀx�[�X�F�A�g$darken�h�ɏ�̕��̐F�������ǂꂾ���Â����邩�̃p�[�Z���e�[�W��ݒ肵�܂��B

@mixin gradient-top-darken($color:#666, $darken:10%){
  background-color: $color;
  @include filter-gradient(darken($color, $darken), $color, vertical);
  @include background-image(linear-gradient(darken($color,  $darken) 0%, $color 100%));
}

�@��Lmixin�Ɠ��l�ɁA�g���Ƃ��͈����ʼn��̃x�[�X�ɂȂ�F��ݒ肵�܂��B�Â����銄�����f�t�H���g�w�肵��10���̂܂܂ŗ��p����ꍇ�́A�����͐F������OK�B

@include gradient-top-lighten(#48B1F2);

�@�Â����銄����20���̏ꍇ�́A�ȉ��̂悤�ɏ����܂��B

@include gradient-top-lighten(#48B1F2, 20%);

�@�������A�ȉ��̂悤�ɂ������܂��B

@include gradient-top-lighten($color:#48B1F2, $darken:20%);
�@�@�@�@�@�@ 1|2 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { 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�[�}

4AI by IT - AIAAA
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