デザイン通りにコーディングしやすくする制作補助用プラグイン。

coding-support.js

/*
 * コーディングサポート機能の追加
 */
(function ($, window, document){
  $(function(){

    /* ----------- ↓諸々の設定↓ ----------- */
    // false or true 「画像被せ機能」を使うなら「true」に。使わないなら「false」にする
    var img_cover = true;

    // false or true 「ガイドライン表示機能」を使うなら「true」に。使わないなら「false」にする
    var guide_line = true;

    // PC版の画像URL
    var img_pc_src = 'https://trasharea.red/web-demo/coding-support/img/design.jpg';

    // SP版の画像URL
    var img_sp_src = 'https://trasharea.red/web-demo/coding-support/img/design-sp.jpg';

    // 画像を透過させたい場合は、ここを１以下に設定（PC/SP共通）
    var img_opacity = '0.6';

    // 画像のTOPからの位置調整
    var img_top = '129px';

    // PC版 左側のガイドライン（センターから何px左にズレるか※cssの都合上２倍の数値入力が必要）
    var pc_left_border = '980px';

    // PC版 右側のガイドライン（センターから何px右にズレるか※cssの都合上２倍の数値入力が必要）
    var pc_right_border = '980px';

    // SP版 左側のガイドライン（左端から何pxセンターにズレるか）
    var sp_left_border = ' 20px';

    // SP版 左側のガイドライン（右端から何pxセンターにズレるか）
    var sp_right_border = ' 20px';

    // PC・SPで切り替わるwindowサイズ
    var responsiveSwitch = 768;
    /* ----------- ↑諸々の設定↑ ----------- */

  /*
   * もっとカスタマイズしたい場合は以下を調整する
   * スタイル部分の調整だけなら、cssの知識だけでもイケる（”以下、スタイルの調整”というコメントまでジャンプ）
   * ただし、キャメルケース記法を忘れないこと
   */



    // 操作ボタンの大枠をまず追加
    $('body').append('<div class="js-button-wrap"><div class="js-hide-button">H</div></div>');

    // 条件分岐：画像被せ機能だけがONなら・・・
    if(img_cover === true && guide_line === false) {
        $('.js-button-wrap').prepend('<div class="js-picture-button">P</div>'); // 画像表示ボタンを追加
        console.log('画像被せだけがON');

    // 条件分岐：ガイドライン表示機能だけがONなら・・・
    } else if(img_cover === false && guide_line === true) {
      $('.js-button-wrap').prepend('<div class="js-guide-button -on">G</div>'); // ガイドボタン追加
      $('body').append('<div class="js-gl-center"><div class="js-gl-left"></div><div class="js-gl-right"></div></div>'); // ガイドラインを追加
      console.log('ガイドラインだけがON');

    // 条件分岐：両方ONなら・・・
    } else if(img_cover === true && guide_line === true) {
      $('.js-button-wrap').prepend('<div class="js-picture-button">P</div><div class="js-guide-button -on">G</div>'); // 両方のボタンを追加
      $('body').append('<div class="js-gl-center"><div class="js-gl-left"></div><div class="js-gl-right"></div></div>'); // ガイドラインを追加
      console.log('両方ON');

    } else {
      // 条件分岐：それ以外（つまり両方OFF）なら何の機能も追加されない
      $('.js-button-wrap').remove();
      console.log('elseだから、何も表示されない');
    }

    // 「画像被せ機能」の為の画像追加
    if(img_cover === true) {
      if($(window).width() > responsiveSwitch) {
         var img_src = img_pc_src; // imgのsrcにPC版の画像パスを代入
      } else {
        var img_src = img_sp_src; // imgのsrcにSP版の画像パスを代入
      }

      // src切り替えの条件分岐が終わった後にそのimgタグを追加する
      $('body').append('<img src="' + img_src + '" class="picture-cover" style="display: none;" />');
    }


  /*
   * 以下、スタイルの調整
   */
    // 表示切替ボタンのデザイン（サイズはレスポンシブで切り替わる）
    var $jsButtonWrap = $('.js-button-wrap');
    var $buttonInner =$('.js-button-wrap div');

    $jsButtonWrap.css({ // 表示切替ボタン（親）のスタイル
      position: 'fixed',
      right: '10px',
      top: '50%',
      zIndex: '10000',
      userSelect: 'none'
    });

    $buttonInner.css({ // 表示切替ボタンのスタイル
      width: '30px',
      height: '30px',
      lineHeight: '30px',
      textAlign: 'center',
      borderRadius: '300px',
      background: 'rgba(0, 0, 0, 0.74)',
      color: '#FFF',
      fontSize: '10px',
      margin: '6px 0 0',
      cursor: 'pointer'
    });

    if($(window).width() <= responsiveSwitch) {
      $jsButtonWrap.css({ // 表示切替ボタン（親）のスタイル
        right: 'auto',
        left: '8px',
        top: 'auto',
        bottom: '30px'
      });

      $buttonInner.css({ // 表示切替ボタンのスタイル
        width: '20px',
        height: '20px',
        lineHeight: '20px',
        margin: '20px 0 0',
      });
    }

    // ガイドラインを追加
    $('.js-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 codingSupportAction() {
      var w = $(window).width();
      var windowSize = responsiveSwitch; // SPとPCで切り替える横幅サイズ
      var gl_left_css = { // 左側のガイドライン
        position: 'fixed',
        zIndex: '9999',
        left: '0',
        top: '0',
        margin: '0 auto',
        height: '100vh',
        width: '1px',
        backgroundColor:' rgba(89, 253, 255,1)'
      };

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

      var picture_cover_css = { // 重なる画像のスタイル
        position: 'absolute',
        left: '0',
        right: '0',
        top: img_top,
        margin: 'auto',
        zIndex: '9998',
        pointerEvents: 'none',
        filter: 'brightness(0.9)'
      };

      /*
       * 以下、js　の知識必須
       */

      picture_cover_css.opacity = img_opacity;

      /*
       * ウィンドウサイズ変更による処理（条件分岐）
       */
      if(w >= windowSize) { // PC版の処理
        gl_left_css.right = pc_left_border; //PC版左側のガイドラインの位置
        gl_right_css.left = pc_right_border; //PC版右側のガイドラインの位置

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

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

      $('.picture-cover').css(picture_cover_css);
    } // codingSupportAction End






    // ガイドライン切り替えボタンの操作
    $('.js-guide-button').on('click', function() {
      if($(this).hasClass('-on')) {
        $(this).removeClass('-on');
        $('.js-gl-center').hide();
      } else {

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

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

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

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

    // 画像の表示切替
    $('.js-picture-button').on('click', function() {

      if($(this).hasClass('-on')) {
        $(this).removeClass('-on');
        $('.picture-cover').hide();
        $(this).css({
          backgroundColor:' rgba(0, 0, 0, 0.74)'
        });

      } else {

        $('.picture-cover').show();
        $(this).addClass('-on');
        $(this).css({
          backgroundColor: 'rgba(132, 181, 0, 0.74)'
        });
      }
    });
  });

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