�m���ē�����Sass/Compass�̃C���X�g�[���Ǝg�����F�����I WordPress�e�[�}�쐬�V���[�g�J�b�g�i5�j�i1/2 �y�[�W�j

�{�A�ڂł́ACMS�̃X�^���_�[�h�ł�����uWordPress�v�̃e�[�}�쐬���ADreamweaver�����C���ɗp���Ă��܂��܂ȃ��_���ȋZ�p��g�ݍ��킹�Ȃ��甚���I�ɒ��i�͂��ǁj�点����@��������Ă����B����́ASass�x�[�X��CSS�t���[�����[�N�uCompass�v�ɂ‚��āA�T�v��g�����ɉ����A�x���_�[�v���t�B�b�N�X�������K�v���Ȃ��Ȃ�A�摜���t�H���_�ɒu��������CSS�X�v���C�g�𐶐��ł���Ȃǂ̗��_���Љ�B

» 2014�N02��25�� 18��00�� ���J
[���{�a���Chatte.Inc]

�R�[�h���ė��p���Ĕ����I

�@�{�A�ځu�����I WordPress�e�[�}�쐬�V���[�g�J�b�g�v�ł́A����́uDreamweaver�Ŏn�߂�WordPress�T�C�g�\�z�̊�b�m���v�ŁA�uAdobe Dreamweaver CC�v�i�ȉ��ADreamweaver�j��WordPress�̃e�[�}���J�X�^�}�C�Y�ł���悤�ɂ���ݒ�̕��@���Љ�B��2��́uWordPress���S�҂ł������I �e���v���[�g�J�X�^�}�C�Y���V���[�g�R�[�h�쐬�������v��WordPress�̓����\���ADreamweaver���g�����e���v���[�g�̃J�X�^�}�C�Y���@�A�V���[�g�R�[�h�̍����ɂ‚��ĉ�������B

�@��3��́uCSS�R�[�f�B���O�ŋ����Ȃ����߂�Sass�̊�b�m����10�̗��_�v�ł́A����Ȃ锚���̂��߂ɁA�uSass�v�ɂ‚��Ă̊T������������B��4��̑O��u���܂��畷���Ȃ�Sass�̎g��������\�\ �C���X�g�[���ƃR�}���h�ADreamweaver�A�g�v�ł́ASass�̎��H�Ƃ��āASass�̃C���X�g�[�����@�ƃR�}���h�̎g�����ADreamweaver�Ƃ̘A�g�AWordPress�̃e���v���[�g�쐬�ɂ�����Sass�̗L���Ȏg�����ɂ‚��ĉ�������B

�@Sass�𗘗p����CSS������悤�ɂȂ��Ă���ƁA�~�b�N�X�C����C���|�[�g�ł悭�g���R�[�h���ė��p����悤�ɂȂ��Ă��邾�낤�B�Ⴆ�΁A�u���E�U�[�Œ�`�����X�^�C�������Z�b�g������A�Â�Internet Explorer��png���g����悤�ɂ�����A�x���_�[�v���t�B�b�N�X���ȒP�ɓ��͂ł���悤�ɂ�����ł��邩�炾�B

�@���̂悤�ȍė��p����R�[�h�͎����ō���Ă������̂����A���łɂ��܂��܂ȂƂ���ŃR�[�h���z�z����Ă���B���ꂩ��Sass�𗘗p����Ȃ�A���̔z�z����Ă���R�[�h�𗘗p���Ȃ���͂Ȃ����낤�B

�@�����āA����Љ��uCompass�v�𗘗p����ƁA�悭�g���~�b�N�X�C�������łɗp�ӂ���Ă���̂ŁA�킴�킴�T���ɍs���K�v���Ȃ��΂��肩�ASass�̃R�[�f�B���O�����͂Ɍ㉟�����Ă����@�\�����ڂɂȂ��Ă���B����܂ł̘A�ڂ�Sass�ɂ‚��Ă�����x�������Ă���Ȃ�ACompass�̋@�\�̂������������ł���͂����B

�@�����Compass�ʼn����ł���̂���A�C���X�g�[���̎d���A�g�����A�x���_�[�v���t�B�b�N�X�Ή���CSS�X�v���C�g�@�\�ȂǁACSS�R�[�f�B���O�𔚔��I�ɂ͂��ǂ点��@�\���Љ��B

Sass������ɔ���������CSS�t���[�����[�N�ACompass�Ƃ�

�@Compass�̓I�[�v���\�[�X�ō���Ă���CSS�t���[�����[�N���B�t���[�����[�N�Ƃ�����Ɓu�w�K�R�X�g���|����c�c�v�Ə����g�\���Ă��܂���������Ȃ����A�t���[�����[�N�͑�̂̏ꍇ�ɂ����āu�����׋�����΁A����ȏ�̃A�E�g�v�b�g��������A���Y���������I�ɏオ��v�݌v�ɂȂ��Ă�����̂Ȃ̂ŁA�����͂ЂƂ‰䖝���Ă��܂��܂ȋ@�\�ɐG��Ă݂Ăق����BCompass��CSS�̐�����Sass�𗘗p���Ă���B

Compass

Compass�̎�ȋ@�\

�@�ȉ��́A��ȋ@�\���B

  1. CSS�̋L�q�ɂ����āA�x���_�[�v���t�B�b�N�X�Ȃǂ̕��G��CSS���ȒP�ɏ������Ƃ��ł���i�{�e�ʼn���j
  2. CSS�X�v���C�g�摜���ȒP�ɍ�邱�Ƃ��ł���i�{�e�ʼn���j
  3. �S�Ă�CSS�͂��ꂢ�Ƀ}�[�N�A�b�v����A�J���҂��Ƃ̃N�Z���z�������
  4. �@�\�g�����ł���悤�ɂȂ��Ă���i����ʼn���j


GUI������

�@Compass�̓R�}���h�Ŏg�����@�ƁAGUI�Ŏg�����@��2��ނ�����BGUI�͗L����10�h���Œ񋟂���Ă���BCompass��GUI�A�v���P�[�V�����͂���قǑ��@�\�ł���킯�ł��Ȃ����߁A10�h���x�������l�����邩�ǂ����i���ۂɕM�҂͍w�����ė��p���Ă݂��̂����j�����ȂƂ���ł������B

�@�����AGUI��Compass�𗘗p���Ă��������ꍇ�́A���܂��܂ȃT�C�g�ł��]���̍����uCodekit�v���I�X�X���������B�������AMac��p���i������28�h���Ə��X�l������j�B

Compass�̃C���X�g�[��

�@Compass��Sass�Ɠ�����Ruby�ŏ�����Ă���̂ŁARuby�̃C���X�g�[�����K�v���BRuby�̃C���X�g�[���ɂ‚��ẮA�O���Sass�̃C���X�g�[�����ɂ��G�ꂽ�̂ŁA�Q�Ƃ��Ăق����B

�@�C���X�g�[����gem�R�}���h���g���čs�����Ƃ��ł��邪�AGUI�ł��w�������ꍇ��Compass�̃A�v���P�[�V�������_�E�����[�h���ăC���X�g�[�����邾�����B�R�}���h�ŃC���X�g�[������ꍇ�͈ȉ�����͂���

gem install compass

�@Mac�̏ꍇ��sudo����K�v�����邾�낤�B

Compass���C���X�g�[����������̉��

Compass�̊�{�I�Ȏg����

Compass�v���W�F�N�g�̐V�K�쐬

�@Compass���g���ɂ́A�܂��v���W�F�N�g��V�K�쐬����B

compass create �oprojectname�p

�@����͂��낢��Ƌ@�\�����邾���Ȃ̂ŁA�ucompasstest�v�Ƃ����v���W�F�N�g���쐬�����B���炩���߃v���W�F�N�g���쐬����t�H���_�[�Ɉړ����āA�v���W�F�N�g����낤�B

compass create compassproject

�@����ƁA��‚��̃t�@�C��������ăv���W�F�N�g���쐬�����B

Compass�v���W�F�N�g�̐ݒ�

�@�����scss�t�@�C����ҏW���Ă����Acss�t�@�C���𐶐����Ă����`�ō�Ƃ�i�߂Ă����BSass�̃R�}���h����͂���K�v�͂Ȃ��i�������ASass�̃R�}���h��css����邱�Ƃ��”\�����ACompass�̃~�b�N�X�C���Ȃǂ����p�ł��Ȃ��̂ňӖ����Ȃ��j�B

�@�uconfig.rb�v��ҏW����ƁA���܂��܂Ȑݒ���s�����Ƃ��ł���B

�@�f�t�H���g��4�`8�s�ڂ̐ݒ肾���A�M�҂�12�s�ڂ�15�s�ڂ̐ݒ��lj����Ă���B�uoutput_style�v��CSS�̏o�̓t�H�[�}�b�g�̐ݒ�ŁA�urelative_assets�v�͓ǂݍ��މ摜�Ȃǂ̃A�Z�b�g�̃p�X���΃p�X�ŕ\�L���邩���΃p�X�ŕ\�L���邩�̐ݒ肾�B

�@�K�v�ɉ����ĕύX����Ƃ������낤�B�ݒ�t�@�C����Ruby�ŏ�����Ă��邪�A�P�ɃC�R�[���ł‚Ȃ��ꂽ���Ȃ̂ŁARuby���o���ł����v���B

watch�R�}���h�Ŏ����ϊ��ł���悤��

�@�����scss�𐏎�css�ɕϊ����Ăق����̂ŁACompass�Ƀt�@�C�����Ď������Ď����ϊ�������悤�ɂ��Ă݂��B�Ď�������ɂ͈ȉ��̂悤�ɃR�}���h����͂���B

compass watch
�@�@�@�@�@�@ 1|2 ���̃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