CSS HTML Javascript

JavaScriptを書いていく

ボタンにマウスを ホバーしたときのスタイルを付けたあとに、JavaScriptを書く準備をしていきます。

  • ホバー
  • JavaScriptファイルの作成

ホバー

・前回まででボタンのスタイリングをやってきました。

・今回はボタンをマウスホバーをすると薄くなるように設定した後にJavaScriptを書いていくためのファイルを用意していきます。

・まずはボタンがクリックできることがわかりやすいようにカーソルをポインターに変えていきます。

・セレクタは#prev,#next でcursor: pointer;と書いて行きましょう。

・次にホバーすると透明度が薄くなるとクリックすることがわかりやすいのでその指定をしていきましょう。

・セレクタは#prev:hover,#next:hoverとしてあげてopacityを.8としていきましょう。

・こんな感じですね

#prev:hover,

#next:hover {

  opacity: .8;

}

JavaScriptファイルの作成

・ではHTMLとCSSの準備ができたのでJavaScriptの準備をしていきましょう。

・scriptタグを配置していきたいのでHTMLのbodyのと自宅の直前に書いていきましょう。

・ここに書いていくのはJavaScriptが重くなりがちなのでまずはHTMLとCSSを読み込んが後にJavaScriptを読み込むためです。

・scriptタグは  <script src="js/main.js"></script>と書いていけばいいですね。

・VS Codeを使っている方は"js/main.js”の部分をマウスホバーするとfollow linkとでてくるのでそちらをクリックするかホバーした状態でcommand + クリックで新しいファイルを作ることができます。

・後は作ったファイルの中にJavaScriptののコードを書いていけばいいですね。

・まずは'use strict’;と書いていきエラーチェックを自動でやってくれるようにしておきましょう。

・後はJavaScriptを書いていくためのブロックを作っておけば準備は完了ですね。

・JavaScriptの中身はこんな感じです。

'use strict';

{

}

-CSS, HTML, Javascript