カウントダウン機能の作成 初期値120秒から1秒ずつカウントダウンする機能の作成。 <body onload="init()"> <p>COUNT DOWN: <span id="time"></span></p> </body> ページを読み込んだときにperformance.nowで変数startTimeにその時点の時間をミリ秒で代入します。 setIntervalメソッドで1秒ごとに関数tickを呼び出します。 <script> let startTime; function init() { startTime = performance.now(); setInterval(tick, 1000); } tick関数内は、まず変数nowTimeに関数tickが呼び出されたときの時間をperformance.nowで代入します。 body要素内のspan要素を取得してページを読み込んだときから経過した時間を120秒からカウントダウンする形式で表示します。 performance.nowはミリ秒で取得するので、1秒ごとにカウントダウンするように差分の時間を1000で割ります。 function tick() { const nowTime = performance.now(); const time = document.getElementById("time"); time.textContent = 120 + Math.floor((startTime - nowTime) / 1000); } </script> 下記のコードをコピーしてファイルに貼り付ければ試せます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> let startTime; function init() { startTime = performance.now(); setInterval(tick, 1000); } function tick() { const nowTime = performance.now(); const time = document.getElementById("time"); time.textContent = 120 + Math.floor((startTime - nowTime) / 1000); } </script> </head> <body onload="init()"> <p>COUNT DOWN: <span id="time"></span></p> </body> </html>
初期値120秒から1秒ずつカウントダウンする機能の作成。
<body onload="init()"> <p>COUNT DOWN: <span id="time"></span></p> </body>
ページを読み込んだときにperformance.nowで変数startTimeにその時点の時間をミリ秒で代入します。 setIntervalメソッドで1秒ごとに関数tickを呼び出します。
<script> let startTime; function init() { startTime = performance.now(); setInterval(tick, 1000); }
tick関数内は、まず変数nowTimeに関数tickが呼び出されたときの時間をperformance.nowで代入します。 body要素内のspan要素を取得してページを読み込んだときから経過した時間を120秒からカウントダウンする形式で表示します。 performance.nowはミリ秒で取得するので、1秒ごとにカウントダウンするように差分の時間を1000で割ります。
function tick() { const nowTime = performance.now(); const time = document.getElementById("time"); time.textContent = 120 + Math.floor((startTime - nowTime) / 1000); } </script>
下記のコードをコピーしてファイルに貼り付ければ試せます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> let startTime; function init() { startTime = performance.now(); setInterval(tick, 1000); } function tick() { const nowTime = performance.now(); const time = document.getElementById("time"); time.textContent = 120 + Math.floor((startTime - nowTime) / 1000); } </script> </head> <body onload="init()"> <p>COUNT DOWN: <span id="time"></span></p> </body> </html>
プログラミング勉強日記 2020年10月27日 10cm^2といった表記よりも1cm²といった上付き文字で表示した方がわかりやすいので、その方法を簡単にまとめる。 sup要素を使う方法 superscript(右肩文字・上付き文字)の略である<sup>タグを使用する。ただし、sup要素は特定の意味を持つ表記方法のために使用する要素で、単に文字が上付きになるという表示の目的として使ってはいけない。使い方は以下のようになる。 sup要素は注釈の存在や脚注番号を載せるときに使用してもいい。 HTML(例) 30km<sup>2</sup> (平方キロメートル) <br> 51cm<sup>3</sup> (立方センチメートル) <br> x<sup>10</sup>＋y<sup>7</sup> (xの10乗+yの7乗) <br> x<sup>a</sup>＋y<sup>b</sup> (xのa乗+yのb乗) 実行結果 文字実体参照を使う方法 1乗・2乗・3乗の3種類のみは特殊な文字を表示するために使われる文字実体参照という方法で表すことができる。 文字実体参照はすべて半角文字で&から始まって;で終わる書き方のこと。使い方は下記のようになる。 HTML(例) x¹ (xの1乗) <br> 12km² (平方キロメートル) <br> 80cm³ (立方センチメートル) 実行結果 参考文献 上付き文字を表示する 2乗や3乗などのn乗をHTMLで表示する方法
2020年10月27日 10cm^2といった表記よりも1cm²といった上付き文字で表示した方がわかりやすいので、その方法を簡単にまとめる。
10cm^2
1cm²
superscript(右肩文字・上付き文字)の略である<sup>タグを使用する。ただし、sup要素は特定の意味を持つ表記方法のために使用する要素で、単に文字が上付きになるという表示の目的として使ってはいけない。使い方は以下のようになる。 sup要素は注釈の存在や脚注番号を載せるときに使用してもいい。
<sup>
30km<sup>2</sup> (平方キロメートル) <br> 51cm<sup>3</sup> (立方センチメートル) <br> x<sup>10</sup>＋y<sup>7</sup> (xの10乗+yの7乗) <br> x<sup>a</sup>＋y<sup>b</sup> (xのa乗+yのb乗)
実行結果
1乗・2乗・3乗の3種類のみは特殊な文字を表示するために使われる文字実体参照という方法で表すことができる。 文字実体参照はすべて半角文字で&から始まって;で終わる書き方のこと。使い方は下記のようになる。
&
;
x¹ (xの1乗) <br> 12km² (平方キロメートル) <br> 80cm³ (立方センチメートル)
上付き文字を表示する 2乗や3乗などのn乗をHTMLで表示する方法
Rubyの条件分岐 case文 条件分岐を表現するための文法。複数の条件を指定する時に、if文のelsifを重ねるよりもシンプルにコードを書くことができる sample case 対象のオブジェクトや式 when 値1 # 値1に一致する場合に実行する処理 when 値2 # 値2に一致する場合に実行する処理 when 値3 # 値3に一致する場合に実行する処理 else # どれにも一致しない場合に実行する処理 end while文 繰り返し処理を行うためのRubyの構文。指定した条件が真である間、処理を繰り返す sample number = 0 while number <= 10 puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 無限ループ 処理が永遠に繰り返されること sample number = 0 while true puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 # . # . # . 上記のコードは条件式の部分にはじめからtrueと書くことによって意図的に無限ループを発生させている break eachメソッドやwhile文などのループから脱出するために使われる sample number = 0 while number <= 10 if number == 5 break end puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4 このようにif文などの条件分岐とbreakを使うと、特定の条件のときにループを脱出することができる 現場からは以上です！
case 対象のオブジェクトや式 when 値1 # 値1に一致する場合に実行する処理 when 値2 # 値2に一致する場合に実行する処理 when 値3 # 値3に一致する場合に実行する処理 else # どれにも一致しない場合に実行する処理 end
number = 0 while number <= 10 puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10
number = 0 while true puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 # . # . # .
number = 0 while number <= 10 if number == 5 break end puts number number += 1 end # ターミナル出力結果 # 0 # 1 # 2 # 3 # 4
どうも7noteです。aタグのカーソルやイベントを無効にする系のCSSまとめ記事です。 aタグは基本的にはどこか他のページにリンクさせるために使いますが、都合上aタグの標準の効果が邪魔だったり無効化させたい時ってあると思います。 主にクリックイベントを無効化させたり、カーソルを別の物に変えたりすることができるのですが、 私自身もいつも書き方を忘れて調べてはコピペしてるので、よく使うものをまとめました。 目次 ・ 下線を消す ・マウスカーソルを指(?)以外の形にする ・クリックイベントを無効にする（ページリンクを無効化） ・おまけ：タブ移動でフォーカスが当たるのを無効にする aタグの効果を無効化させるのによく使うCSS 下線を消す a { text-decoration: none; /* 下線を無効化 */ } 無効化した下線を出すときはunderlineを書きましょう。 a { text-decoration: none; /* 下線を無効化 */ } a:hover { text-decoration: underline; /* マウスホバー時だけ下線を出す */ } マウスカーソルを指(?)以外の形にする a:hover { cursor: default; /* マウスホバー時、通常時の矢印(➚)の形にする */ } ブラウザのデフォルトに合わせるならauto。 逆に指の形にする時は、pointerを指定します。 他のカーソルの形は以下のサイトを参考にしてください。 https://developer.mozilla.org/ja/docs/Web/CSS/cursor ※次で説明するpointer-events: none;を指定しても、指(?)の形ではなくすることができます。 クリックイベントを無効にする（ページリンクを無効化） a { pointer-events: none; /* 押してもリンクさせない */ } たとえば特定のチェックボックスにチェックが入っていなければ、次のページには行けないようにしたり、 aタグにjavascriptの処理を入れてしまっていて、ページリンクさせたくない時などに使えます。 標準に戻すときは、autoを指定してください。 おまけ：タブ移動でフォーカスが当たるのを無効にする <a tabindex="-1">リンク</a> 参考：http://freeladay.com/?p=2273 まとめ 大きめの開発の際に、たまに出てくるか出てこないかくらいで忘れがちな事が多いので自分の備忘録的な役割も込めて記事にまとめました。 下線の無効化などは、colorの指定と一緒にreset.css（全ページ共通のCSS）などで予め定義されている場合が多いので大丈夫ですが、pointer-eventsやcursorはたまにしか出てこないのでスペルミスで余計な時間を使うくらいであれば、どこかにストックかお気に入りしておいてすぐにコピペで使えると効率アップに繋がるかもしれませんね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
aタグは基本的にはどこか他のページにリンクさせるために使いますが、都合上aタグの標準の効果が邪魔だったり無効化させたい時ってあると思います。
主にクリックイベントを無効化させたり、カーソルを別の物に変えたりすることができるのですが、 私自身もいつも書き方を忘れて調べてはコピペしてるので、よく使うものをまとめました。
目次 ・ 下線を消す ・マウスカーソルを指(?)以外の形にする ・クリックイベントを無効にする（ページリンクを無効化） ・おまけ：タブ移動でフォーカスが当たるのを無効にする
a { text-decoration: none; /* 下線を無効化 */ }
無効化した下線を出すときはunderlineを書きましょう。
underline
a { text-decoration: none; /* 下線を無効化 */ } a:hover { text-decoration: underline; /* マウスホバー時だけ下線を出す */ }
a:hover { cursor: default; /* マウスホバー時、通常時の矢印(➚)の形にする */ }
ブラウザのデフォルトに合わせるならauto。 逆に指の形にする時は、pointerを指定します。
auto
pointer
他のカーソルの形は以下のサイトを参考にしてください。 https://developer.mozilla.org/ja/docs/Web/CSS/cursor
※次で説明するpointer-events: none;を指定しても、指(?)の形ではなくすることができます。
pointer-events: none;
a { pointer-events: none; /* 押してもリンクさせない */ }
たとえば特定のチェックボックスにチェックが入っていなければ、次のページには行けないようにしたり、 aタグにjavascriptの処理を入れてしまっていて、ページリンクさせたくない時などに使えます。
標準に戻すときは、autoを指定してください。
<a tabindex="-1">リンク</a>
参考：http://freeladay.com/?p=2273
大きめの開発の際に、たまに出てくるか出てこないかくらいで忘れがちな事が多いので自分の備忘録的な役割も込めて記事にまとめました。 下線の無効化などは、colorの指定と一緒にreset.css（全ページ共通のCSS）などで予め定義されている場合が多いので大丈夫ですが、pointer-eventsやcursorはたまにしか出てこないのでスペルミスで余計な時間を使うくらいであれば、どこかにストックかお気に入りしておいてすぐにコピペで使えると効率アップに繋がるかもしれませんね。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
ヘッドレス Chrome で HTML を PDF に変換することができなかった (過去形) ヘッドレス Chrome で HTML を PDF に変換できなくなっていて、調査していたらいつの間にかできるようになった. どうも 86.0.4240.75 の regression で 86.0.4240.111 で修正されたようだ. 参考: ヘッドレス Chrome で HTML を PDF に変換する
ヘッドレス Chrome で HTML を PDF に変換できなくなっていて、調査していたらいつの間にかできるようになった. どうも 86.0.4240.75 の regression で 86.0.4240.111 で修正されたようだ.
参考: ヘッドレス Chrome で HTML を PDF に変換する
Herokuへデプロイする手順 ターミナル brew tap heroku/brew && brew install heroku ターミナル heroku --version ターミナル # Herokuへログインするためのコマンド % heroku login --interactive => Enter your Heroku credentials. # メールアドレスを入力し、エンターキーを押す => Email: # パスワードを入力して、エンターキーを押す => Password: Gemfile # ファイルの一番下の行に追記する group :production do gem 'rails_12factor' end ターミナル # Gemをインストール % bundle install ターミナル % git add . % git commit -m "gem rails_12factorの追加" ターミナル % heroku create アプリケーション名 ターミナル % git config --list | grep heroku ターミナル % heroku addons:add cleardb Creating cleardb on ⬢ アプリケーション名... free Created cleardb-vertical-00000 as CLEARDB_DATABASE_URL Use heroku addons:docs cleardb to view documentation ターミナル % heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL` ターミナル % heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5} # 以下、コマンドの実行結果 Setting DATABASE_URL and restarting ⬢ アプリケーション名... done, v◯◯ DATABASE_URL: mysql2://000000000000:0aa0000@us-cdbr-east-02.cleardb.com/heroku_aaa00000000?reconnect=true ターミナル % EDITOR="vi" bin/rails credentials:edit ターミナル % heroku config:set RAILS_MASTER_KEY=`cat config/master.key` ターミナル % heroku config ターミナル % git push heroku master ターミナル % heroku run rails db:migrate 公開を確認 ターミナル % heroku apps:info ===ajax-app-123456 Addons: cleardb:ignite Auto Cert Mgmt: false Dynos: web: 1 Git URL: https://git.heroku.com/アプリケーション名.git Owner: sample@sample.com Region: us Repo Size: 165 KB Slug Size: 56 MB Stack: heroku-18 Web URL: https:/アプリケーション名.herokuapp.com/ 現場からは以上です！
brew tap heroku/brew && brew install heroku
heroku --version
# Herokuへログインするためのコマンド % heroku login --interactive => Enter your Heroku credentials. # メールアドレスを入力し、エンターキーを押す => Email: # パスワードを入力して、エンターキーを押す => Password:
# ファイルの一番下の行に追記する group :production do gem 'rails_12factor' end
# Gemをインストール % bundle install
% git add . % git commit -m "gem rails_12factorの追加"
% heroku create アプリケーション名
% git config --list | grep heroku
% heroku addons:add cleardb Creating cleardb on ⬢ アプリケーション名... free Created cleardb-vertical-00000 as CLEARDB_DATABASE_URL Use heroku addons:docs cleardb to view documentation
% heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`
% heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5} # 以下、コマンドの実行結果 Setting DATABASE_URL and restarting ⬢ アプリケーション名... done, v◯◯ DATABASE_URL: mysql2://000000000000:0aa0000@us-cdbr-east-02.cleardb.com/heroku_aaa00000000?reconnect=true
% EDITOR="vi" bin/rails credentials:edit
% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
% heroku config
% git push heroku master
% heroku run rails db:migrate
% heroku apps:info ===ajax-app-123456 Addons: cleardb:ignite Auto Cert Mgmt: false Dynos: web: 1 Git URL: https://git.heroku.com/アプリケーション名.git Owner: sample@sample.com Region: us Repo Size: 165 KB Slug Size: 56 MB Stack: heroku-18 Web URL: https:/アプリケーション名.herokuapp.com/
