Javascriptで自動計算フォームを作る

完成品 コードの作成 Javascriptを作る コード完成版 完成品 コードの作成 まずは元となるHTMLを作成します。 HTML <form name="form1"><table border="1"> <tbody> <tr> <td align="center">商品名</td><td align="center">単価(円)</td><td align="center">数量</td><td align="center">金額(円)</td></tr> <tr> <td><input type="text" style="width: 60px;"/></td><td></td></tr></tbody></table></form>

Githubにおいてあるコードをブログに埋め込む方法

ソースコードの表示 手順 Githubにリポジトリを作成する URLをコピー 完成したコードを貼り付ける ソースコードの表示 HTMLやCSS、Javascriptで作ったWEBデザイン要素のサンプルコードを表示することがよくあります。 ブログの文章とコードを明確に分けるた…

はてなブログで使える記事カードを自作する!!

記事カードとは どんな記事カードにするか Twitterシェアボタンを作る 続きを読むボタン カード本体を作る コード完成形 完成品 記事カードとは 記事カードとはブログ内に別の記事を並べるときに使うカードのようなデザインのことをいいます。 小さなカード…

パスワード付きページを作る

ページにパスワードを設定する Javascriptコード ページにパスワードを設定する リンクで別ページに移動したときにパスワードを求められ、あらかじめ設定してあるパスワードを入力しないとページが見られないということを実現させるコードを作りました。 パ…

音楽に合わせて動くオーディオビジュアライザー

※iosで正常動作しないことがあります。 // 音楽ファイルを選択(サーバー等にアップロードされることはありません。)

Javascriptでページのスクショを撮るボタンの作り方

完成品 サンプルコード 仕組み テーマ ◆JavascriptでWEBページのスクショを撮るボタンを作る 完成品 完成品 リンクをクリックするとページ全体のスクショを撮りダウンロードできます。 スクリーンショットをダウンロード // サンプルコード JS <div id="target">リンクをクリ</div>…

Javascriptで電卓を作る方法!!

完成品 使うコード HTML Javascript CSS JavascriptでWEB上で動作する電卓を作っていきます。 完成品 使うコード HTML HTML <div class="boxB"><form class="formcss" id="calcForm" name="form"> <table id="calcTable"> <tbody><tr> <td colspan="3"><input name="text" type="text" value="" /></td> <td></td></tr></tbody></table></form></div>

Ephram Bluetooth5.0 【k7】レビュー

付属品 Ephram Bluetooth5.0 【B07VZTKFL8】の仕様 操作方法 レビュー【感想】 装着感 ケースについて 肝心の音質は? 付属品 本体 充電ケース イヤーピース 充電ケーブル 説明書 Ephram Bluetooth5.0 【B07VZTKFL8】の仕様 操作方法 電源ON・OFF 2秒長押し …

Google Driveにある音声をブログで再生する方法

Google Drive上の音声ファイルをブログで流す方法 ブロガーの悩み ファイルの共有をONにする 取得したリンクを編集する オーディオを再生する controls属性 preload属性 loop属性 動画を再生する controls属性 preload属性 poster属性 表示サイズの変更 Goog…

audio-technica ATH-CKS1100 レビュー

付属品 audio-technica ATH-CKS1100の仕様 音質 付属品 収納ケース イヤホン本体 audio-technica ATH-CKS1100の仕様 ケーブルとユニット部分は着脱式になっています。 Amazonで見る 音質 音質 全音域がまろやかな感じになっている 高音域はこもったような音 …

Javascriptで入力した文章を音声で読み上げる

完成品 サンプルコード テーマ ◆Javascriptで音声読み上げプログラムを作る 完成品 デモページへ サンプルコード 上の完成品と同じ1秒ごとに切り替わるサンプルコードです。 切り替わる時間を変える場合は赤字の部分を変更してください。 1/1000秒単位の時間…

ブラウザで動くカメラを作る!!

完成品 サンプルコード テーマ ◆Javascriptでブラウザで動くカメラを作る 完成品 デモページへ サンプルコード 上の完成品と同じ1秒ごとに切り替わるサンプルコードです。 切り替わる時間を変える場合は赤字の部分を変更してください。 1/1000秒単位の時間指…

一定時間ごとに画像を切り替える方法

完成品 サンプルコード テーマ 一定時間ごとに切り替わる画像を作る 完成品 // サンプルコード 上の完成品と同じ1秒ごとに切り替わるサンプルコードです。 切り替わる時間を変える場合は赤字の部分を変更してください。 1/1000秒単位の時間指定になっていま…

【Chromeのみ対応】JSだけで音声入力する方法

完成品 サンプルコード テーマ ◆音声入力できるテキストエリアを作る 完成品 Google Chromeのみ対応しています。 デモページへ サンプルコード コード <b>Google Chromeのみ対応しています。<br />マイクの許可を求められた場合は許可してください。</b><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script>window.SpeechReco…

【Speech Synthesis】を使ってウェブ上で入力した文章を読み上げる

完成品 サンプルコード テーマ WEB上で音声を読み上げるシステムを作る 完成品 ブラウザによっては対応していなかったり設定が必要な場合があります。 デモページへ サンプルコード コード <script>function lng(prm) { lang = prm ; }function speech() {var synthe…

HTMLとCSSだけで記録できる「いいねボタン」が遂に完成!!

ページの評価を知りたい 普通にGoogleフォームを作る Googleフォームのactionとnameの値を探す HTMLでフォームを作る CSSでデザインする ブログに導入する 出来上がり 改善点 ページの評価を知りたい はてなブログで記事をいろいろ書いていると「はてなスタ…

Javascriptで画像をランダムに表示させる方法

完成品 作り方 サンプルコード 用途 テーマ ◆画像をランダムに表示させる方法 完成品 ページを何度か再読み込みしてみてください // "; document.write(output); // ]]> 作り方 サンプルコード JS<script type="text/javascript"> var imgfile = new Array( "画像ファイル1(URL).jpg","画像…

【HTML】マウスホバーで画像を変えるコード

完成品 作り方 サンプルコード 用途例(バナー) あわせて読みたい テーマ ◆マウスホバーで画像を切り替える 完成品 スマホの方は画像をクリック→画像以外のところをクリックを繰り返すことで動作が分かります。 作り方 サンプルコード HTML <img src="表示させる画像URL.jpg" onmouseover="this.src='マウスホバーで切り替える画像URL.jpg'" onmouseout="this.src='表示させる画像URL.jpg'"> 赤字を使う画像UR…

usbチェッカー【電圧・電流テスター】レビュー

USBチェッカーとは パラメーター この商品の特徴 画面表示 iPad充電時(モバイルバッテリー) 感想 USBチェッカーとは USBチェッカーとはモバイルバッテリーの性能確認、USB充電器が所望の電圧、電流を出しているかの確認などに利用するものです。 パラメータ…

AFUNTA外付けサウンドカード【7.1ch】レビュー

サウンドカードとは AFUNTA外付けサウンドカードの仕様 この製品の特徴 感想 サウンドカードとは サウンドカードとはコンピュータに音響信号の入出力機能を付加または強化する拡張用の回路基板です。 簡単に言うと音をよくする周辺機器です。 今回購入したの…

PCをスマホでリモート接続して遠隔操作する方法

PC

スマホにアプリをインストールする PCのセットアップ スマホから接続する 操作方法 できること 2回目移行の接続 スマホにアプリをインストールする まずはスマホに「Chromeリモートデスクトップ」という無料のアプリをインストールします。 下のボタンからス…

音声波形リアルタイム分析

使い方・出来ること・注意事項 使い方 出来ること 注意事項 ページ下部の注意事項をよく読んで使用してください スマホ用のページはこちら // { this._drawWave(canvas, ctx); }); // 分析済みデータを格納する配列(符号なし8ビット) const analysedData =…

【超簡単!!】たった一行でブログの画像をダウンロード禁止にする方法

ブロガーの悩み事 画像のダウンロードを禁止する方法 コード貼り付け済み コード貼り付け無し ダウンロード禁止+アラート アラート付き 最後に ブロガーの悩み事 ブログを書くときに様々な画像を貼り付けると思いますが、誰かにその画像を勝手にダウンロー…

イヤホンをエージングして音質向上!!

イヤホンのエージングとは? エージングに使う音源 ホワイトノイズの特徴 ピングノイズの特徴 エージングする時間 スマホで簡単にエージング テーマ ◆イヤホンをエージングする方法 イヤホンのエージングとは? イヤホンにいろんな音を流しドライバーユニッ…

【HTML講座_#11】別ページ・コンテンツに移動するリンク

講座選択ページへ ハイパーリンクを作成する 別のページに移動する aタグ リンク先のページを別タブで開く target属性 Tabnabbing(タブナビング)の防止 フッタを表すtfootタグ 講座選択ページへ 確認テスト ハイパーリンクを作成する Point ハイパーリンクは…

【HTML講座_#10】 テーブルの表示

講座選択ページへ テーブルの表示方法 基本的なテーブルの作り方 td , tr , tableタグ テーブル内のヘッダとフッタ ヘッダを表すthread , tbody , thタグ フッタを表すtfootタグ 次の講座へ 確認テスト テーブルの表示方法 Point テーブルはtd , tr , table…

【HTML講座_#9】 説明リスト・リストの入れ子

講座選択ページへ 説明リストの作り方・リストの入れ子 説明リストの作り方 dlタグ、dtタグ、ddタグの組み合わせ リストの入れ子 次の講座へ 確認テスト 説明リストの作り方・リストの入れ子 Point 用語と説明のセットでリスト化されたものを説明リストとい…

【HTML講座_#8】リストの表示方法

講座選択ページへ リストの表示方法 liタグとulタグ liタグ ulタグ 番号付きリストの作り方 通常の番号付きリスト カウントダウン番号付きリスト reversed属性 開始番号を指定する start属性 次の講座へ 確認テスト リストの表示方法 Point リストを表示する…

【HTML講座_#7】テキストに意味を与えるタグ

講座選択ページへ テキストに意味を与えるタグ テキストを強調する「strongタグ」 使い方 フォントサイズを小さくする「smallタグ」 使いかた 様々なインラインタグ 「abbr」タグ 「cite」タグ 「code」タグ 「dfn」タグ 「em」タグ 「i」タグ 「q」タグ 「s…

【HTML講座_#6】自己完結したブロックの扱い

講座選択ページへ 自己完結したブロックの扱い articleタグ 使い方 mainタグ 使い方 文書をきちんと分類する意味 コンテンツを整理するその他のタグ navタグ asideタグ hrタグ 次の講座へ 確認テスト 自己完結したブロックの扱い Point 自己完結したブロック…