コーディング時にガイドラインを表示するjs

gude-line.js

/* ----------- ガイドラインを表示・非表示 ----------- */
(function ($, window, document){
  $(function(){
    // ガイドラインを操作するボタンを追加
    $('body').append('<div class="guide-button-wrap"><div class="guide-button -on">GuideLine</div><div class="hide-button">Hide</div></div>');
    // ガイドラインを追加
    $('body').append('<div class="gl-center"><div class="gl-left"></div><div class="gl-right"></div></div>');

    $('.guide-button-wrap').css({ // 表示切替ボタンの位置調整
      position: 'fixed',
      left: '0',
      top: '50%'
    });

    $('.guide-button, .hide-button').css({ // 表示切替ボタンのスタイル
      padding: '6px',
      borderRadius: '0 6px 6px 0',
      background: 'rgba(0, 0, 0, 0.74)',
      color: '#FFF',
      fontSize: '10px',
      margin: '6px 0 0',
      cursor: 'pointer'
    });

    $('.gl-center').css({ // ガイドライン（センター）のスタイル
      position: 'fixed',
      zIndex: '9999',
      left: '0',
      right: '0',
      top: '0',
      margin: '0 auto',
      height: '100vh',
      width: '1px',
      backgroundColor:' rgba(89, 253, 255,1)'
    });

    /**
     * 両端のガイドラインは、画面幅（スマホなど）によって変更する
     */
     function guideAction () {
      var w = $(window).width();
      var windowSize = 768; // SPとPCで切り替える横幅サイズ
      var gl_left_css = { // 左側のガイドライン
        position: 'fixed',
        zIndex: '9999',
        right: '0',
        top: '0',
        margin: '0 auto',
        height: '100vh',
        width: '1px',
        backgroundColor:' rgba(89, 253, 255,1)'
      };

      var gl_right_css = { // 右側のガイドライン
        position: 'fixed',
        zIndex: '9999',
        left: '0',
        top: '0',
        margin: '0 auto',
        height: '100vh',
        width: '1px',
        backgroundColor:' rgba(89, 253, 255,1)'
      }

      if (w >= windowSize) { // PC版の処理
        //var size = ('980px'); // メインコンテンツ幅を指定
        gl_left_css.left = '980px'; //PC版左側のガイドラインの位置
        gl_right_css.right = '980px'; //PC版右側のガイドラインの位置

      } else { // SP版の処理
        gl_left_css.left = '15px';  //SP版左側のガイドラインの位置
        gl_right_css.right = '15px';  //SP版左側のガイドラインの位置
        gl_right_css.left = 'auto';
        gl_left_css.right = 'auto';
      }

      $('.gl-left').css(gl_left_css);
      $('.gl-right').css(gl_right_css);
      
    };

    // ガイドライン切り替えボタンの操作
    $('.guide-button').on('click', function() {

      if($(this).hasClass('-on')) {
        $(this).removeClass('-on');
        $('.gl-center').hide();
      } else {

        $('.gl-center').show();
        $(this).addClass('-on');
      }
    });

    // ボタンを消すボタン
    $('.hide-button').on('click', function(){
      $('.guide-button-wrap').hide();
    })

    $(window).on('load',function(){
      guideAction();
    });

    $(window).on('resize', function() { // ページ読み込み後、ガイドラインと、それを操作するボタンを表示
      guideAction ();
    }).trigger('resize');

  });

})(jQuery, window, window.document);