WEBデザイン

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>

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

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

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…

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

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

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

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

マウスホバーで色が変わる番号付きリスト!!

完成品 番号付きリストを作る CSSを追加する あわせて読みたい テーマ ◆番号付きリストの作り方 ◆マウスホバーで色が変わるリストデザイン 完成品 List1 List2 List3 List4 番号付きリストを作る まず元となる番号付きリストを作ります。 <li>タグで要素を囲み、</li>…

【押したくなる】マウスホバーで浮く読者ボタン

Hatenaブログ純正の読者ボタンは小さくて目立ちにくいのが問題点です。 マウスをかざすと浮いて見える読者ボタンを作りました。

【JS】訪問回数をカウントする

Javascriptだけで訪問回数をカウントするコードを作りました。cookieを使用してカウントしているため、cookieが削除されると訪問回数のカウントがリセットされます。

【HTML/CSS】マーカーデザイン

文字を目立たせるためのマーカーデザインを作りました。 CSSを変更することでマーカーの色、太さを自在に変えることができます。

Googleフォームとスプレッドシートで掲示板サイトを作る!

Googleフォームとスプレッドシートを使って簡単な掲示板サイトは作れるのか? スプレッドシートに反映されるまでの時間が問題ですが、コメント欄にも使えそうです。

【HTML/CSS】ラジオボタンをCSSで装飾する!!

デフォルトのラジオボタンはシンプルすぎるのでCSSで装飾してみました。

【HTML/JS】ストップウォッチを作る

スタート、ストップ、リセットができるストップウォッチを作りました。 Javascriptで正確に時間を測定できます。

【HTML/JS】ポップアップウィンドウを作る!

HTMLとJavascriptでポップアップ表示ボタンを作りました。 ボタンを押すとポップアップメッセージが表示されます。

【HTML/CSS】スライドアニメーション を作る!

HTMLとCSSでスライドアニメーションを作りました。 スクロールを促したいときに使えます。

HTMLとCSSで自作記事カードを作る!!

ブログ内で別の記事を紹介したいときリンクだけだとなんだかさみしいですよね。 紹介する記事の概要も書くことができます。

【HTML/CSS】TOPへ戻るボタンを作る!

HTMLとCSSでTOPへ戻るボタンを作りました。fontawesomeを使ったシンプルなボタンです。

【HTML/JS】再読み込みボタンを作る!

HTMLとJavascriptでpr-時の再読み込みボタンを作りました。 一行で簡単に作ることができます。 CSSでボタンをデザインすることもできます。