今日やったこと
- ドットインストール「スライドショー」を作り、動画に投稿
- ドットインストール「モーダルウィンドウ」を作り、動画に投稿
- ドットインストール「タブメニュー」を作り、動画に投稿
「スライドショー」
スライドショーではCSSとJavaScriptを存分に活用しました。
特にplayボタンにhiddenクラスをつけて、pauseボタンからhiddenクラスをとることで、 再生と停止を同じ箇所に表示させるのはなるほどな〜と感心しました。
ハンバーガーメニューなどでもおなじみのJavaScriptの活用法ですね。
これにより、クリックするとボタンと画面が切り替わって、もう一回クリックすると元に戻るボタンを作ることができるようになります。
「JavaScriptでモーダルウィンドウを作ろう」
ソースコードはこちらです。
https://github.com/yuta-kinu/MyModalWindow
これはめちゃくちゃ簡単でした。
JavaScriptのミニアプリを作ろうの6番目の講座なのですが、１番簡単かもしれません。
記述量も少ないです。
作ってみて流石に物足りなさを感じたので、maskの背景を薄ピンクにして、modalのアニメーションをいじりました。
見本ではmodalを左から４回転して出てくるようにしました。
「JavaScriptでタブメニューを作ろう」
見本ではpriventdefault()を使ってみるが、使わなくても特にエラーは起きませんでした。
という感じで、今日はそこそこしっかり進めてよかったです。
おわり