ゴミ置き場 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <title>Camera Test</title> <style> .button { position: fixed; right: 50px; bottom: 50px; } #countdown { font-size: 20px; color: crimson; position: fixed; left: 50px; bottom: 50px; } </style> </head> <body> <h1>HTML5カメラ</h1> <div> <div class="videoarea"> <video id="camera" class="show" autoplay playsinline width="300" height="400"></video> <canvas id="picture" width="300" height="400"></canvas> </div> <div class="button"> <button type="button" id="shutter">シャッター</button> </div> <div class="button"> <button type="button" id="upload">アップロード</button> </div> <div id="countdown"></div> </div> <script> $("#upload").hide(); window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch((err) => { console.log(err.name + ": " + err.message); }); function takepic() { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する //video.pause(); // 映像を停止 //se.play(); // シャッター音 /* setTimeout(() => { video.play(); // 0.5秒後にカメラ再開 }, 500); */ // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); $("#camera").hide(); //$('#picture').addClass('show'); $("#picture").show(); $("#upload").show(); } function newTimer(sec) { return new Promise((onSuccess, onFailed) => { var timeleft = sec; var camTimer = setInterval(function () { document.getElementById("countdown").innerHTML = timeleft; timeleft -= 1; if (timeleft <= 0) { clearInterval(camTimer); document.getElementById("countdown").innerHTML = "ぱしゃ"; onSuccess(); } }, 1000); }) } /** * シャッターボタン */ document.querySelector("#shutter").addEventListener("click", () => { $("#shutter").hide(); newTimer(10).then( () => { //*成功した時onSuccessの処理 takepic(); }, (err) => { //*失敗した時onFailedの処理 console.log(err); } ) }); }; </script> </body> </html>
どうも7noteです。背景色につかえそうな色をまとめてみました。 多くのwebサイトが白背景の黒文字になっていますが、webサイトにこだわりを出している会社なんかは実は白以外の背景色を使っていたりもします。 そんなおしゃれなサイトを作るための参考として、ホームページで背景色として使えそうな組み合わせをいくつかまとめてみました。 これだけに限らず、色には様々ないろがあるのでこだわりの一色をさがしてみてください。 「文字:黒」で映える背景色 ・ 白 ・ ベージュ(赤) ・和紙風 「文字:白」で映える背景色 ・黒〜グレー ・青 ・茶色 ※あまり濃い色が多く見えてしまうとサイトがキツイ印象なってしまうので注意！ まとめ 文字も真っ黒の#000ではなく#333くらいにする方が少し柔らかい印象になりますし、 白文字も真っ白でない方が綺麗に見える場合もあります。 ただ、オシャレな色を選ぶ際は視認性もしっかり意識して選ばなければなりません。 以下のサイトでコントラストチェックをして視認性が良いか判断することができます。 ブログなんかは特に文字も多く読むテキストばかりなので、視認性はとても重要になってきます。 参考： https://lab.syncer.jp/Tool/Color-Contrast-Checker/ http://degitekunote.com/blog/2015/06/29/background-color/ https://www.heyblend.com/ http://talking-ultrasuede.jp/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
よく使うイベントタイプをまとめました。 ビューイベント イベントタイプ 説明 resize ドキュメントビューのサイズが変更された時。 scroll 画面がスクロールされた時。 リソースイベント イベントタイプ 説明 error リソースを読み込めなかったとき。 abort リソース読み込みが中止されたとき。 load リソースの読み込みが完了したとき。 beforeunload アンロードされる前。 unload リソースがアンロードされたとき。 キーイベント イベントタイプ 説明 keydown キーを押されたとき keypress Shift,Fn,CapsLockを除くキーが押された状態にあるとき。 keyup キーを離したとき フォームイベント イベントタイプ 説明 reset リセットボタンが押された時。 submit サブミットボタンが押された時。 フォーカスイベント イベントタイプ 説明 focus 要素がフォーカスされているとき。 blur 要素がフォーカスを失ったとき。 マウスイベント イベントタイプ 説明 click 要素上でクリックしたとき発生。 dblclick 要素をダブルクリックしたとき発生。 mouseenter 要素にカースルが移動したとき発生。 mouseup マウスのボタンが要素上で離されたとき。 mousemove マウスが要素上を移動しているとき。 contextmenu マウスの右ボタンがクリックされたとき。 select テキストが選択されているとき。 ドラッグイベント イベントタイプ 説明 drag 要素もしくは選択文字列がドラッグされている間。（350 ミリ秒ごとに断続的に発火します） 参考
目的 HTMLにてラジオボタンを実装する方法をまとめる 方法 下記のように記載することでラジオボタンを実装する事ができる。 <input type="radio" name="1" value="true">テストテスト true <br> <input type="radio" name="1" value="false">テストテスト false input要素にてtypeをradioにすることで作成することができる。
HTMLで使用するタグ strong(強調できる） <strong>すごいサービスです！</strong> blockquote 引用を表すには blockquote タグを使うことが出来る <blockquote cite="https://kamekame.com"> <p>これから学ぶべきです！</p> </blockquote> hr horizontal rule の略。水平線に線を入れることで段落を変えることを示すことができる。 <hr> br 改行を行うことができる。 私は<br> HTMLを<br> 学ぶ pre 改行や空白をそのまま表現するには pre タグ code コードを表す(コードを見せる） code タグ 実体参照 特殊記号も表現することができる ol 順序付きリスト ol は ordered list 、順序付きのリスト ul 箇条書きリスト ulは、 unordered list 順序がついていないリスト dl 説明リスト 項目は dt 、説明は dd で記述する <dl> <dt>質問A</dt> <dd>回答A</dd> <dt>質問B</dt> <dd>回答B</dd> </dl>
