最速5分見積
もり

で依頼する

ブログ

  1. トップ
  2. ブログ
  3. 【実践的なコード紹介】CSS・javascript・jQueryでおしゃれな機能を実装しよう

Web制作

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

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

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

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

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

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

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

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

HTMLコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(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を利用する場合は、以下のコードを記述しましょう。

hiraku

デザイン機能

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

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

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

　

1
2
3
4
<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」です。

1
2
3
<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>

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

まとめ

いかがでしたか。

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