この研修では、JavaScript
フォルダの中の3-1
というフォルダの中に課題を作成してください。
問1:画面にカーテンをつけてみましょう!!
実際の動きはこちらから確認してください。
0から実装するのが一番良いですが、全てを書くのは難しいと思いますので
下のソースコードをコピぺして足りないところを補充していきましょう。
<htmlのコード>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <!-- jQueryを動かすために必要な物がここに必要 --> <title>Document</title> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> <button class="click">クリック</button> <script> // ここにjQueryを記入 </script> </body> </html>
<CSSのコード>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .box{ display: flex; justify-content: space-between; } .left{ width: 50%; height: 100vh; background-color: black; position: absolute; left: 0; transition: all 2s ease; } .left.action{ width: 0; transition: all 2s ease; } .right{ width: 50%; height: 100vh; background-color: black; position: absolute; right: 0; transition: all 2s ease; } .right.action{ width: 0; transition: all 2s ease; } .click{ position: absolute; top: 50%; left: 50%; transform: translate(-50%); }