2018年08月10日

【実践的なコード紹介】CSS・javascript・jQueryでおしゃれな機能を実装しよう

WEBサイト制作でよく使用されるデザイン機能として、ドロワーメニュー・タブメニュー・モーダル・パララックスなどが挙げられます。

今回は、このようなデザイン機能を実装するためのコードを紹介します。

また、ドロワーメニュー・モーダル・を簡単に実装するプラグインも紹介するので、参考にしてください。

自分でコードを書いてデザイン機能を実装する

まずは、自分でコードを記述してデザイン機能を実装する方法を紹介します。

横からでてくるドロワーメニュー

ドロワーメニューの実装方法を紹介します。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>テストです</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
</head>
<html>
<body>
  <div id="menu">
    <ul>
      <li>MENU</li>
      <li>MENU</li>
      <li>MENU</li>
      <li>MENU</li>
      <li>MENU</li>
    </ul>
  </div> <!-- menu閉じタグ -->

  <div id="main">
    <i class="fa fa-bars" id="show"></i><!-- メニューアイコン -->
    <h2>これはテストです</h2>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
  </div><!-- main閉じタグ -->
</body>
</html>

CSSコード

  body {
    padding: 0;
    margin: 0;
  }
  #menu {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background: #222;
    padding: 10px;
    box-sizing: border-box;
    width: 200px;
    min-height: 100%;
  }
  ul{
    list-style: none;
  }
  #main {
    z-index: 1;
    background: gray;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: 1s;
  }
  #main.menu-open {
    left: -200px;
  }
  #show {
    float: right;
    cursor: pointer;
  }

JSコード

  (function() {

    var show = document.getElementById('show');
    var main = document.getElementById('main');

    show.addEventListener('click', function() {
       if (main.className === 'menu-open') {
         main.className = '';//メニューを閉じるコード
       } else {
         main.className = 'menu-open';//メニューを開くコード
       }

    });

  })();

上記のコードはmain要素を左にずらしてメニューを表示させるコードです。

main要素とmenu要素は重なり合っていますが、main要素に「z-index: 1;」を指定することで、main要素が上に表示されます。

メニューが表示されていない状態で、メニューアイコンをクリックすると、main要素が左に200pxずれることで下に表示されているmenu要素が表示されます。

また、このコードを少し変えることでメニューが表示されているときにmain要素を暗くすることが可能です。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>テストです</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
</head>
<body>
	<div class="wrapper">
	  <i class="fa fa-bars" id="show"></i>
    <h2>これはテストです</h2>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

	  <div id="cover"></div>

	  <div id="menu">
	    <i class="fa fa-times" id="hide"></i>
	    <ul>
	      <li>MENU</li>
	      <li>MENU</li>
	      <li>MENU</li>
	      <li>MENU</li>
	      <li>MENU</li>
	    </ul>
	  </div><!-- menu閉じタグ -->
	</div><!-- wrapper閉じタグ -->
</body>
</html>

CSSコード

  body {
    padding: 0;
    margin: 0;
    background: gray;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
    .wrapper {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
  }
  #cover {
    background: #222;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
  }
  #menu {
    z-index: 2;
    position: absolute;
    top: 0;
    right: -200px;
    color: #fff;
    background: #222;
    padding: 10px;
    box-sizing: border-box;
    width: 200px;
    min-height: 100%;
    transition: 1s;
  }
  #show, #hide {
    float: right;
    cursor: pointer;
  }
  body.menu-open {
    overflow-y: hidden;
  }
  /* block要素を追記して表示させる */
  body.menu-open #cover {
    display: block;
  }
  /*rightを0にすることで表示させる*/
  body.menu-open #menu {
    right: 0;
  }

JSコード

	  (function() {
	    'use strict';

	    var show = document.getElementById('show');
	    var hide = document.getElementById('hide');

	    show.addEventListener('click', function() {
	      document.body.className = 'menu-open';//メニューを開くコード
	    });

	    hide.addEventListener('click', function() {
	      document.body.className = '';//メニューを閉じるコード
	    });
	  })();

このように記述すると、メニューが開いたときに画面全体が暗くなります。

タブメニュー

タブメニューを表示されるコードを紹介します。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta name="format-detection" content="telephone=no,address=no,email=no">
        <script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
        <title>これはテストです</title>
    </head>

    <body>
        <ul class="tab_menu">
            <li class="active">サンプル1</li>
            <li>サンプル2</li>
            <li>サンプル3</li>
        </ul>

        <div class="content">
            <ul class="box">
                <li>サンプル1</li>
                <li>サンプル1</li>
                <li>サンプル1</li>
                <li>サンプル1</li>
                <li>サンプル1</li>
            </ul>
            <ul>
                <li>サンプル2</li>
                <li>サンプル2</li>
                <li>サンプル2</li>
                <li>サンプル2</li>
                <li>サンプル2</li>
            </ul>
            <ul>
                <li>サンプル3</li>
                <li>サンプル3</li>
                <li>サンプル3</li>
                <li>サンプル3</li>
                <li>サンプル3</li>
            </ul>
        </div><!-- content閉じタグ -->
        <script type="text/javascript" src="main.js"></script>
    </body>

</html>

CSSコード

.tab_menu li {
    color: #333;
    float: left;
    padding: 20px 40px;
    background: #222;
    color: #fff;
    cursor: pointer;
    list-style: none;
    transition: 1s;
}

/*クリックされたタブのデザイン*/
.tab_menu li.active {
    color: #fff;
    background: #81BEF7;
    cursor: auto;
}

.content{
    clear: both;
    padding: 10px 0;
    background: #eee;
    width: 465px;
    margin-left: 39px;
    color: #222;
}

.content ul {
    display: none;
}
.content ul.box {
    display: block;
}

.box li{
    list-style: none;
}

jQueryコード

$(function() {

    $('.tab_menu li').click(function() {

        var i = $('.tab_menu li').index(this);

        $('.tab_menu li').removeClass('active');

        $(this).addClass('active');

        $('.content ul').removeClass('box').eq(i).addClass('box');

    });
});

このように記述することで、このようなタブメニューを実装することが可能です。

モーダルウィンドウ

モーダルウィンドウを表示させるコードを紹介します。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <title>これはテストです</title>
</head>
<body>
  <div id="open">
    ここをクリックするとモーダルウィンドウを開きます
  </div>

  <div id="mask" class="hidden"></div>

  <div id="modal" class="hidden">
    <p>モーダルです</p>
    <div id="close">
      閉じる
    </div>
  </div>
</body>
</html>

CSSコード

body {
  font-size: 14px;
  font-family: Verdana, sans-serif;
}

#open{
    cursor: pointer;
    width: 500px;
    border-radius: 13px;
    text-align: center;
    line-height: 50px;
    margin: 15px auto 0;
    background: #222;
    color: #fff;
}

#close{
    background: #81BEF7;
    width: 100px;
    margin: 0 auto;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
}

#mask {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
    background: #fff;
    width: 800px;
    padding: 20px;
    border-radius: 4px;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 1s;
    z-index: 2;
    text-align: center;
}

#modal p {
  line-height: 1.5;
  margin: 0 0 20px;
}

#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -300px);
}

jsコード

(function() {
  'use strict';

  var open = document.getElementById('open');
  var close = document.getElementById('close');
  var modal = document.getElementById('modal');
  var mask = document.getElementById('mask');

  /*「open」要素がクリックされると「mask」と「modal」要素の「hidden」要素が削除されてモーダルウィンドウが表示される*/
  open.addEventListener('click', function() {
    modal.className = '';
    mask.className = '';
  });

    /*以下は「mask」と「modal」要素を非表示にするコード*/
  close.addEventListener('click', function() {
    modal.className = 'hidden';
    mask.className = 'hidden';
  });

  mask.addEventListener('click', function() {
    modal.className = 'hidden';
    mask.className = 'hidden';
    //close.click();
  });
})();

このようなコードを記述すると、以下のようなサイトが制作できます。

「ここをクリックするとモーダルウィンドウを開きます」をクリックするとモーダルウィンドウが表示されます。

パララックス

パララックスとは、日本語で「視差」という意味です。

簡単に説明すると動くスピードに変化をつけることになります。

今回はスクーロールして画像が一番上にきたら、固定されるパララックスサイトのコードを紹介します。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta name="format-detection" content="telephone=no,address=no,email=no">
        <title>テストです</title>
    </head>

    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
    </body>

</html>

CSSコード

body {
    margin:0;
    padding:0;
    height:5000px;
}

#box1{
    width: 400px;
    height:200px;
    background: url('../img/1.jpg') no-repeat;
}

#box2{
    width: 400px;
    height:200px;
    background: url('../img/2.jpg') no-repeat;
}

#box3{
    width: 400px;
    height:200px;
    background: url('../img/3.jpg') no-repeat;
}

#box4{
    width: 400px;
    height:200px;
    background: url('../img/4.jpg') no-repeat;
}

#box5{
    width: 400px;
    height:200px;
    background: url('../img/5.jpg') no-repeat;
}

#box6{
    width: 400px;
    height:200px;
    background: url('../img/6.jpg') no-repeat;
}

JSコード

$(function() {
    $(window).scroll(function() {
        var sample = $(this).scrollTop();

        /*スクロールした分だけ縦方向にずれる*/
        $('#box1').css('background-position', '0 '+sample+'px');

        if (sample > 200) {
            $('#box2').css('background-position', '0 '+(sample-200)+'px');

        } else {
            $('#box2').css('background-position', '0 0');
        }

        if (sample > 400) {
            $('#box3').css('background-position', '0 '+(sample-400)+'px');
        } else {
            $('#box3').css('background-position', '0 0');
        }

        if (sample > 600) {
            $('#box4').css('background-position', '0 '+(sample-600)+'px');
        } else {
            $('#box4').css('background-position', '0 0');
        }

        if (sample > 800) {
            $('#box5').css('background-position', '0 '+(sample-800)+'px');
        } else {
            $('#box5').css('background-position', '0 0');
        }

        if (sample > 1000) {
            $('#box6').css('background-position', '0 '+(sample-1000)+'px');
        } else {
            $('#box6').css('background-position', '0 0');
        }

    });
});

このように記述することで以下のようなサイトが制作できます。

画像ではわかりづらいですが、スクロールすると下に表示されている画像が上の画像に覆いかぶさるようになります。

プラグインを利用してデザイン機能を実装する

ここからは、プラグインを利用してデザイン機能を実装する方法を紹介します。

ドロワーメニュー

Drawer

このプラグインを使用するためには、プラグインファイルをダウンロードするかCDNを利用する必要があります。

ダウンロードを利用して使用する場合は公式サイトからダウンロードできます。

公式サイトURL:http://git.blivesta.com/drawer/

CDNを利用する場合は、以下のコードを記述しましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

hiraku

このプラグインは、公式サイトからファイルをダウンロードして利用します。

公式サイトURL:https://appleple.github.io/hiraku/

読み込むためには、以下のコードを記述します。

<link rel="stylesheet" type="text/css" href="./hiraku.css">
<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<script src="./hiraku.js"></script>

ファイルを読み込むためのパスは、自分の環境に合わせて記述してください。

Modaal

Modaalは、モーダルウィンドウを実装するためのプラグインを紹介です。

公式サイトURL:https://github.com/humaan/Modaal

公式サイトからファイルをダウンロードします。

そのダウンロードしたファイルから使用するのは、「modaal.min.js」と「modaal.min.css」です。

<link rel="stylesheet" href="modaal.css">
<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<script src="modaal.min.js"></script>

このように記述することで、ファイルを読み込むことができます。

まとめ

いかがでしたか。

もし、実装したい機能があれば、参考にしてください。

【実践的なコード紹介】CSS・javascript・jQueryでおしゃれな機能を実装しよう

自分でコードを書いてデザイン機能を実装する

横からでてくるドロワーメニュー

タブメニュー

モーダルウィンドウ

パララックス

プラグインを利用してデザイン機能を実装する

ドロワーメニュー

Drawer

hiraku

Modaal

まとめ

営業日や診療日カレンダーをWEBサイトで表示させる方法3選

コーディングの指示書の書き方と指示出しに使いやすいツールご紹介

WordPress構築時のコーディング指示書＜ディレクトリマップの作り方＞

WordPressのフォームからメールが届かない時に使うプラグイン

WordPressブロックテーマの基本機能や管理画面を解説