rgbをrgbaに変換する

JavaScript,javascript DOM操作

javascriptで取得したrgbに透過度を加えてrgbaに変換して利用したい場合の簡単なサンプルコードです。 rgbをrgbaに変換する javascriptの「style.backgroundColor」などで色を取得した場合、rgb ...

HTML要素にclassが指定されているか確認する

JavaScript,javascript CSSセレクタ

JavaScriptでHTML要素にclassが指定されているか確認するサンプルコードです。 See the Pen JavaScript | Check if the element has a class by yochans (@yo ...

js-メールアドレスかどうか判別する

JavaScript,JavaScript 判別

JavaScriptで文字列がメールアドレスかどうか判別するサンプルコードです。 対象の文字列が正規表現でパターンを調べて、メールアドレスであればtrue、メールアドレスでなければfalseを返します。 'abc-abc@gmail.com ...

親要素から子要素を取得するパターン集

JavaScript,javascript CSSセレクタ

JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。 このページではquerySelectorAll()を利用した方法を紹介しています。 See the Pen JavaScript | get ch ...

js-音声ファイルを再生する方法

JavaScript,JavaScript Audio

HTML5のaudioをJavaScriptで制御して音声ファイルを再生する方法の動作サンプルとサンプルコードです。 See the Pen JavaScript | Play an audio file by yochans (@yoch ...

テキストエリアを文章の行数に応じて拡縮する方法

2021-02-03JavaScript,JavaScript フォーム

テキストエリアを入力されている文章の行数に応じて自動で拡縮(サイズを広げる、またさ縮める)させる実装サンプルです。 See the Pen JavaScript | Create a random string by yochans (@y ...

js-ランダムな文字列を生成する方法

2021-02-03JavaScript,JavaScript 文字列

JavaScriptで英数字のランダムな文字列を生成するサンプルコードです。 See the Pen JavaScript | Create a random string by yochans (@yochans) on CodePen. ...

HTML要素の大きさを比較する方法

2021-02-03JavaScript,JavaScript 数値・計算

JavaScriptで要素の幅と高さから計算したpx単位の面積から、2つのHTML要素の大きさを比較するサンプルコードです。 See the Pen JavaScript | Calculate the area of the elemen ...

配列を逆順にする方法

2021-02-03JavaScript,JavaScript 配列

JavaScriptで配列の値の順番を逆順にする方法のサンプルです。 reverse()とArray.prototype.reverse.call()を使った配列の逆順ソートについて紹介しています。 See the Pen JavaScri ...

変数名や関数名には使えない予約語一覧

JavaScript,JavaScript 変数

JavaScriptで変数や関数、クラスの名前には利用できない予約語の一覧です。 これらの名前を利用しようとすると以下のコンソールエラーが表示されます。 Uncaught SyntaxError: Unexpected token 'xxx ...

js-親要素のidやclassを取得する方法

JavaScript,javascript CSSセレクタ

JavaScriptで指定したHTML要素を持つ親要素を取得してそのidやclassを取得する方法のサンプルです。 See the Pen JavaScript | Get id and class of parent element by ...

js-文字列を一文字単位で逆順にする方法

2021-02-08JavaScript,JavaScript 文字列

JavaScriptで文字列を文字単位で逆順にする方法のサンプルコードです。 See the Pen JavaScript | Reverse the strings by yochans (@yochans) on CodePen. 文字 ...

要素の幅と高さから面積を計算する方法

2021-02-08JavaScript,JavaScript 数値・計算

JavaScriptでHTML要素の幅と高さを取得して、そのピクセル単位の面積を計算する方法のサンプルです。 See the Pen JavaScript | Compare element sizes by yochans (@yocha ...

javascript-get-the-scroll-position

2021-02-08JavaScript,JavaScript 取得

JavaScriptで現在のスクロールの位置(高さ、ポジション)を取得する方法のサンプルです。 See the Pen JavaScript | get scroll position by yochans (@yochans) on Co ...

少数点以下の桁を指定して丸める

2021-02-08JavaScript,JavaScript 数値・計算

JavaScriptのtoFixed()を利用して小数点以下の桁を指定して数値を丸める方法のサンプルコードです。 少数点以下の桁を指定して丸める toFixed()は取得する小数点以下の桁数を引数に指定します。指定可能な桁数の最小値は0、最 ...

JavaScriptを使って新規タブでページを開く方法

2021-02-08JavaScript

JavaScriptを使って新規タブでページを開くボタンの実装方法です。 See the Pen JavaScript | Open page in new window by yochans (@yochans) on CodePen. ...

SpeechSynthesisUtterance

2021-02-08JavaScript,JavaScript Audio

JavaScriptのSpeechSynthesisUtteranceを使って再生中の音声読み上げを一時停止、再開する機能の実装サンプルです。 See the Pen JavaScript | speech synthesis pause ...

speechSynthesis.speak()で音声が出なくなる原因と対策

2021-01-31JavaScript,JavaScript Audio

JavaScriptでWeb Speech APIのSpeechSynthesisUtteranceを利用していると、JavaScriptコードは間違っていないハズなのにテキストを読み上げる音声が再生されなくなる場合があります。 この記事で ...

createElementNSでSVGの図形を描画する方法

JavaScript,JavaScript SVG

JavaScripでcreateElementNSを使ってシンプルなSVGの図形を描画する基本的な記述方法です。 図形描画のベースとなる直線、折れ線、曲線、円、楕円、四角形を紹介しています。 基本 createElementNSでSVGを扱 ...

SpeechSynthesisUtteranceでテキストを読み上げる方法

2021-02-08JavaScript,JavaScript Audio

JavaScriptで使えるWeb Speech APIのSpeechSynthesisUtteranceを利用してテキストを読み上げる方法のサンプルコードです。 See the Pen JavaScript | speech synthe ...

ページの最上部にスクロールするボタン

2021-02-08JavaScript,javascript DOM操作

JavaScriptを使ってページの最上部にスクロールするボタンの実装サンプルです。 トップへ戻るボタンはコンテンツ量が多いサイトでモバイル端末からのアクセス時にユーザビリティを上昇させます。 See the Pen JavaScript ...

最初の英文字を大文字に変換する方法

2021-02-08JavaScript,JavaScript 文字列

JavaScriptで最初の英文字を大文字に変換する方法の紹介です。 See the Pen JavaScript | Uppercase the first letter by yochans (@yochans) on CodePen. ...

ランダムなHEXカラーコードを生成する方法

2021-02-08JavaScript,javascript DOM操作

JavaScriptを使ってランダムなHEXカラーコードを生成する方法の紹介です。 See the Pen JavaScript | Randomly generate HEX color code by yochans (@yochans ...

Dateから月をフルスペルの英単語で取得する方法

2021-02-08JavaScript,JavaScript 日付け・時間

JavaScriptのDateオブジェクトから月をフルスペルの英単語で取得する方法のサンプルコードです。 See the Pen JavaScript | Get the moon in full spelled english by yo ...

文字列から英数字以外を削除する方法

2021-02-08JavaScript,JavaScript 文字列

JavaScriptでreplace()と正規表現を利用して文字列から英数字以外を削除する方法のサンプルコードです。 See the Pen JavaScript | Delete non-alphanumeric characters b ...