【ポモドーロタイマーを作ろうVanillaJS編⑦】~CSSによるスタイリングとhtmlの修正~
ポモドーロタイマーvanilla JS編は前回の⑦で、機能自体はほぼ実装完了しました。
前回の記事はこちら。
最後にhtml/CSSを整えていきます。
完成品はこちらです。
(タイマー表示部分とユーザー編集部分)
CSSによるスタイリングとhtmlの修正
htmlとCSSのコードは一番下に載せておきますが、
特に難しいことはしておりません。
意識した部分としては、以下になります。
①箇条書きとなる部分には、ul・liタグを使う
今回のアプリで該当するのは、
「現在設定されている作業時間等を表示する部分」と
「ユーザー編集部分」の2か所になります(赤枠内)。
※ちなみに順序付きの場合は、ol・liタグを使用する。
JSに集中するあまりhtmlがおろそかになってしまい
一番初めは、無意識でそれぞれをpタグで囲っていました....
htmlでの意味付けを意識しないといけませんね。
②idセレクタの使用は本来は避ける
今回は小さいアプリだったので、idセレクタを使用していますが
いくつかの問題点があるのでサイト制作の際は注意すべきです。
<idセレクタの問題点>
・詳細度が高すぎる
・1ページに1回しか使えない
再利用性や拡張性を考えた時に扱いにくいので
これらを念頭に置く必要があります。
※要素セレクタも避けるようにしましょう....
③ユーザー編集部分にformタグを追加する
ここは少し悩みました。
サーバーへデータを送信するわけではないので
formタグを使うべきか、迷いました。
こちらの記事では、「積極的に推奨はしていないけど使用することは問題ない」
とのことでした。
なので今回は、ユーザーが入力する箇所であることを明示する目的で
formタグを使うことにしました。
解釈に間違いがありましたら、ご指摘頂けると嬉しいです。
さらに、formタグに「onsubmit="return false"」の設定を忘れずに。
この設定をしないと、画面が遷移してしまい
初期設定に戻ってしまいます。
一旦、vanilla JSでは完成
ここまでで、一旦完成としたいと思います。
今後はReactでリプレイスしていく予定です!
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="./assets/css/styles.css"> <title>Pomodoro Timer</title> </head> <body> <div class="container"> <div id="timer"></div> <p id="timeState"></p> <p id="cycle"></p> <div class="controls"> <button class="btn" id="start">START</button> <button class="btn" id="stop">STOP</button> <button class="btn" id="reset">RESET</button> </div> <ul class="edit_display"> <li id="input_worktime"></li> <li id="input_breaktime"></li> <li id="input_longbreaktime"></li> <li id="input_cyclecount"></li> </ul> </div> <div class="container"> <p>■タイマーは以下で調整できます■</p> <form id="form_id" method="" action="" onsubmit="return false" > <ul> <li> <label for="work">作業時間: <input type="number" name="work" id="work_time" value="25" /> </label> </li> <li> <label for="break">小休憩時間: <input type="number" name="break" id="break_time" value="5" /> </label> </li> <li> <label for="longbreak">長休憩時間: <input type="number" name="longbreak" id="longbreak_time" value="20" /> </label> </li> <li> <label for="cycle">長休憩までの回数: <input type="number" name="cycle" id="cycle_count" value="4" /> </label> </li> <button type="submit" class="btn" id="submit_btn">設定</button> </ul> </form> </div> <script src="js/main.js"></script> </body> </html>
CSSは以下。
/* resetCSS */ 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; list-style: none; } body { font-family: 'Courier New', monospace; font-family: "メイリオ",Meiryo,"Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif; font-size: 14px; background: #EEEEEE; } .container { width: 270px; background: #fff; margin: 20px auto; padding: 15px; text-align: center; } p { line-height: 2; } #timer { height: 120px; line-height: 120px; background: #DDDDDD; margin-bottom: 15px; font-size: 40px; } #timeState { font-size: 1.7rem; font-weight: bold; } #cycle { font-size: 1.2rem; } .btn { width: 80px; height: 45px; line-height: 45px; background: #DDDDDD; font-weight: bold; cursor: pointer; user-select: none; } .controls { display: flex; justify-content: space-between; padding: 10px 0; margin-bottom: 10px; } .edit_display{ text-align: left; padding-left: 25px; } .inactive { opacity: 0.6; } li { padding: 10px 0 0 30px; text-align: left; } input { width:80px } #submit_btn { margin-top: 20px; }
↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック