こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、かっこいいランディングページの作り方について学習しました。※CSSは難しいので、JavaScriptにのみ注力しましょう!
demoは、「こちら」で確認できます。
環境構築
最初に、簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 7 8 |
$ tree . ├── index.html ├── script.js └── style.css └── ps.jpg └── xbox.jpg |
ps.jpgは、「こちら」、xbox.jpgは、「こちら」です。
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Split Landing Page </title> </head> <body> <div class="container"> <div class="split left"> <h1>Playstation 5</h1> <a href="#" class="btn">Buy Now</a> </div> <div class="split right"> <h1>XBox Series X</h1> <a href="#" class="btn">Buy Now</a> </div> </div> <script src="script.js"></script> </body> </html> |
この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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); :root { --left-bg-color: rgba(87, 84, 236, 0.7); --right-bg-color: rgba(43, 43, 43, 0.8); --left-btn-hover-color: rgba(87, 84, 236, 1); --right-btn-hover-color: rgba(28, 122, 28, 1); --hover-width: 75%; --other-width: 25%; --speed: 1000ms; } * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; height: 100vh; overflow: hidden; margin: 0; } h1 { font-size: 4rem; color: #fff; position: absolute; left: 50%; top: 20%; transform: translateX(-50%); white-space: nowrap; } .btn { position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; top: 40%; transform: translateX(-50%); text-decoration: none; color: #fff; border: #fff solid 0.2rem; font-size: 1rem; font-weight: bold; text-transform: uppercase; width: 15rem; padding: 1.5rem; } .split.left .btn:hover { background-color: var(--left-btn-hover-color); border-color: var(--left-btn-hover-color); } .split.right .btn:hover { background-color: var(--right-btn-hover-color); border-color: var(--right-btn-hover-color); } .container { position: relative; width: 100%; height: 100%; background: #333; } .split { position: absolute; width: 50%; height: 100%; overflow: hidden; } .split.left { left: 0; background: url('ps.jpg'); background-repeat: no-repeat; background-size: cover; } .split.left::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--left-bg-color); } .split.right { right: 0; background: url('xbox.jpg'); background-repeat: no-repeat; background-size: cover; } .split.right::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--right-bg-color); } .split.right, .split.left, .split.right::before, .split.left::before { transition: all var(--speed) ease-in-out; } .hover-left .left { width: var(--hover-width); } .hover-left .right { width: var(--other-width); } .hover-right .right { width: var(--hover-width); } .hover-right .left { width: var(--other-width); } @media (max-width: 800px) { h1 { font-size: 2rem; top: 30%; } .btn { padding: 1.2rem; width: 12rem; } } |
ここまで実装すると以下のようになります。

JavaScriptの実装
このアプリケーションの鍵は、先ほど設定したCSSの「hover-left, hover-right」です。
このクラスを「container」クラスが付与された要素に追加するとエフェクトをつけることができます。
1 2 |
<body> <div class="container hover-left"> <<< こんな感じで |
要素を取得する
JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。
1 2 3 4 |
// 要素を取得する const left = document.querySelector('.left') const right = document.querySelector('.right') const container = document.querySelector('.container') |
mouseenterイベントの登録
次にmouseenterイベントを登録しましょう。
1 2 3 |
// mouseenterイベントを登録する left.addEventListener('mouseenter', () => container.classList.add('hover-left')) right.addEventListener('mouseenter', () => container.classList.add('hover-right')) |
これで、カーソルを当てた時に要素が広がります。
mouseleaveイベントの登録
次にmouseleaveイベントを登録しましょう。マウスを要素から離した時のイベントです。
1 2 3 |
// mouseleaveイベントを登録する left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) |
これでOKです。CSSができればJavaScriptでエフェクトをつけることはさほど難しくありません。
おわりに
JavaScriptのmouseenter/mouseleaveイベントを使うとクラスの付け替えがとても簡単に実装できましたね。
あとは、CSSができればかっこいいWebページが作り放題です^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 要素を取得する const left = document.querySelector('.left') const right = document.querySelector('.right') const container = document.querySelector('.container') // mouseenterイベントを登録する left.addEventListener('mouseenter', () => container.classList.add('hover-left')) right.addEventListener('mouseenter', () => container.classList.add('hover-right')) // mouseleaveイベントを登録する left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) |
コメントを残す
コメントを投稿するにはログインしてください。