-
JavaScriptで数値が整数か小数かを判定する方法
Math.floorメソッドを使った判定方法JavaScriptで数値が整数(小数点以下の桁を持たない数)か、それとも小数を含む数かを判定したい場合は、Math.floorメソッドを使うのがシンプルで確実な方法です。Math.floorは、引数として渡された数値以下の最大の整数を返します。そのため、元の数値とMath.floorの結果を比較し、両者が一致すれば整数、一致しなければ小数点以下の桁があると判断できます。サンプルコード以下のコードを実行すると、数値に小数点以下の桁があるかどうかを確認できます。<html> <head> &n
-
JavaScriptのNumber.MAX_VALUEとNumber.MIN_VALUEとは?意味と使い方を解説
Number.MAX_VALUEは、JavaScriptの静的なNumberオブジェクトが持つプロパティの一つで、JavaScriptで扱うことのできる最大の正の数値を表す定数です。その値はおよそ 1.7976931348623157 × 10308 です。 一方、Number.MIN_VALUEも同じくNumberオブジェクトの静的なプロパティですが、こちらはJavaScriptで扱える「最も小さい正の数値」、つまりゼロに最も近い正の数を表します。その値はおよそ 5 × 10-324 です。 MIN_VALUEを使う際の注意点 Number.MIN_VALUEは「最も小さい負の数」ではあり
-
JavaScriptでドロップダウンリストの項目を事前選択する方法
JavaScriptを使ってドロップダウン(プルダウン)メニューの項目を事前に選択状態にするには、selectedIndex プロパティを使用します。このプロパティに、あらかじめ選択しておきたい項目のインデックス番号を設定するだけで実現できます。 ドロップダウンリストは、HTMLでは <select> タグを使って作成します。一方、JavaScriptによる処理は <script> タグ内に記述します。<script> タグの中では、add_select_id が対象となる <select> 要素のid、add_item_index が数値による
-
HTML5 SVGで線を引く方法を解説!line要素の基本とサンプルコード
SVG(Scalable Vector Graphics/スケーラブル・ベクター・グラフィックス)は、XML形式で2Dグラフィックスや図形を記述するための言語です。記述されたXMLは、SVGビューアによって描画(レンダリング)されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGといった画像形式を表示できるのと同じように、SVGも問題なく表示できます。 HTML5 SVGで線を描くには「<line>」要素を使用する HTML5のSVGで直線を引く場合は、SVGの<line>要素を使います。<line>要素では、線の始点と終点の座標を指定し、スタ
-
HTML5 SVGで星形を描画する方法をわかりやすく解説
SVG(Scalable Vector Graphics:スケーラブル・ベクター・グラフィックス)は、XML形式で2Dグラフィックや図形アプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画されます。現在の主要なWebブラウザのほとんどは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できます。polygon要素を使った多角形の描画HTMLのSVGで多角形を描くには、<polygon>要素を使用します。この要素は、3つ以上の辺を持つ図形を作成できます。HTML5 SVGで星形を描く場合は、各頂点のx座標とy座標を適切に設定することがポイ
-
WebページにBGM(バックグラウンドミュージック)を追加する方法
BGMを追加する基本的な方法 Webページにバックグラウンドミュージック(BGM)を追加するには、<embed>…</embed>要素を使用します。さらにautostart属性を指定することで、ページが読み込まれるたびに音楽が自動的にバックグラウンドで再生されます。 プレイヤーをページ上に表示したくない場合は、width属性とheight属性の値を極端に小さく設定することで、プレイヤーを見えなくできます。また、loop属性を追加すれば、音声を最初から繰り返し再生するかどうかを指定できます。音楽ファイルはあらかじめサーバーにアップロードし、そのURLをsrc属性に指定して
-
JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説
HTMLキャンバス(canvas)への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト
-
HTML5ジオロケーションAPIで現在地を取得する方法を徹底解説
HTML5ジオロケーションAPIとは? HTML5のGeolocation APIを利用すると、ユーザーの位置情報をWebサイトと共有できます。JavaScriptで緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信すれば、「近くの店舗を検索する」「地図上に現在地を表示する」といった位置情報を活用したさまざまな機能を実装可能です。 Geolocation APIの基本的な仕組み ジオロケーションAPIは、グローバルオブジェクトであるnavigatorオブジェクトの新しいプロパティ「geolocation」を通じて操作します。 getCurrentPositionメソッドは、デ
-
JavaScriptでWebページをリダイレクトする方法をわかりやすく解説
Webページを閲覧していると、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ移動させられたという経験はありませんか?これは「ページリダイレクト(転送)」と呼ばれる仕組みが働いているためです。JavaScriptを使えば、クライアント側でページリダイレクトを非常に簡単に実装できます。サイト訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。サンプルコード:ボタンクリックでトップページへリダイレクト以下のコードを実行すると、JavaScriptを使ってHTMLページをリダイレクトする方法を実際に確
-
JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説
ページリダイレクトとは?あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか?これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。JavaScriptでリダイレクトを実装するJavaScriptを使えば、クライアント側(ブラウザ側)で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。訪問者を新し
-
HTMLメタタグを使ったページリダイレクトの方法【初心者向け解説】
ページリダイレクトとは、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ自動的に転送される仕組みのことです。Webサイトの引っ越しやURL変更の際によく使われる重要なテクニックです。 メタタグでリダイレクトを実現する基本 METAタグを使ってサイトをリダイレクトさせるのは非常に簡単です。http-equiv属性を使用し、content属性の値に対するHTTPヘッダーを指定します。 以下は、現在のページから別のページへ2秒後にリダイレクトさせる例です。もし即座にリダイレクトしたい場合は、content属性で待機秒数を指定しなければOKです。 コード例 <
-
window.locationを使って別のURLへリダイレクトする方法【JavaScript】
URLをクリックしてページXにアクセスしたはずなのに、気づけば別のページYに飛ばされていた——そんな経験をしたことはありませんか?これは「ページリダイレクト」と呼ばれる仕組みによって起こる現象です。クライアント側でJavaScriptを使えば、ページのリダイレクトは非常に簡単に実装できます。サイトの訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。基本的なリダイレクトの書き方window.locationオブジェクトには複数のリダイレクト方法があります。代表的なものは以下の3つです。window.location.assign
-
HTMLページ内にインラインJavaScriptを記述する方法
インラインJavaScriptとはHTMLでJavaScriptを使用する場合、一般的には以下の2つの方法が用いられます。<script>〜</script>タグ内にコードを直接記述する外部JavaScriptファイルを読み込むしかし、これら以外にも、HTMLページ内にJavaScriptのコードを直接埋め込む「インラインJavaScript」という方法が存在します。イベント属性に直接コードを記述する通常、HTMLのイベント属性(onClickなど)は、<script>タグ内など別の場所で定義された関数を呼び出す形で使用されます。しかし、イベント属性の値とし
-
クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説
JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック(バリデーション)や、警告メッセージの表示など、ク
-
Google AdSenseをウェブサイトに導入する方法を初心者向けに解説
ウェブサイトに十分なコンテンツが揃い、ページビュー数も安定して伸びてきたら、広告を掲載して収益化を始める絶好のタイミングです。Google AdSense(グーグルアドセンス)は、自分のサイトに広告を設置するだけで収入を得られる、無料かつ手軽な収益化ツールとして世界中のサイト運営者に利用されています。Google AdSenseの導入手順AdSenseの導入は思っているよりも簡単です。以下の手順に沿って進めれば、初心者でもスムーズに設定できます。1. 公式サイトにアクセスしてサインインするGoogle AdSenseの公式サイトにアクセスし、AdSense用に使用したいGoogleアカウントで
-
HTMLフォームとは?基本の使い方と主要な属性をわかりやすく解説
HTMLフォームは、サイトを訪れたユーザー(ビジター)からデータを収集するために必要な仕組みです。たとえば、大学のウェブサイトで学生が登録手続きを行う際に、氏名、年齢、住所、成績などの情報を入力してもらう場面がその代表例といえます。フォームはユーザーからの入力を受け取り、CGI、ASPスクリプト、PHPスクリプトなどのバックエンドアプリケーションへデータを送信します。バックエンド側では、アプリケーション内に定義されたビジネスロジックに基づいて、受け取ったデータに対して必要な処理が行われます。HTMLでフォームを作成するには、<form>タグを使用します。HTMLフォームの主な属性上
-
HTMLフォームでユーザー入力を取得する方法をわかりやすく解説
HTMLフォームを使用すると、Webページ上でユーザーから情報を簡単に受け取ることができます。入力を受け付けるには<form>タグを使い、その中に各種フォーム要素を配置します。テキスト入力、ラジオボタン、チェックボックス、送信ボタンなど、目的に応じたさまざまなフォーム要素が用意されています。 <input>タグとtype属性の基本 ユーザー入力を受け取る際の中心となるのが<input>タグです。type属性の値を変えることで、テキストボックス・チェックボックス・ラジオボタンなど、異なる種類の入力コントロールを作り分けられます。このtype属性は、テキスト入力
-
HTMLフォームでWebサイトにファイルをアップロードする方法をわかりやすく解説
Webサイトの利用者に外部ファイルをアップロードしてもらいたい場合には、「ファイルアップロードボックス」(ファイル選択ボックスとも呼ばれます)を使用します。これも他のフォーム部品と同様に <input> 要素を使って作成しますが、type 属性に「file」を指定する点が特徴です。 基本的な書き方 ファイルアップロードボックスは、以下のように <input type=file> を記述するだけで簡単に実装できます。 <!DOCTYPE html> <html> <head> <title>File Upload<
-
JavaScriptでフォームをリセット・クリアする方法|reset()メソッドの使い方を解説
JavaScriptを使ってフォームをリセットまたはクリアしたい場合は、reset()メソッドを使用します。このメソッドは、フォームに用意された「リセットボタン」をクリックしたときとまったく同じように動作し、フォーム内のすべての入力要素(テキストボックス、パスワード欄、チェックボックス、ラジオボタンなど)の値を初期状態に戻します。reset()メソッドの基本reset()メソッドは、対象のform要素に対して呼び出すだけで使えます。なお、リセットとは「空にする」ことではなく、HTMLのvalue属性などで指定された初期値(デフォルト値)に戻すという点に注意してください。初期値が設定されていない
-
HTMLフォームで送信ボタン(submitボタン)を使う方法をわかりやすく解説
HTMLフォームでは、送信ボタン(submitボタン)をクリックするだけで、フォームの内容が自動的に送信されます。フォームを活用すれば、ユーザーからの入力を簡単に受け取ることができます。 HTMLフォームと送信ボタンの基本 ユーザーの入力を受け取るには<form>タグを使用し、その中に各種フォーム要素を配置します。フォーム要素には、テキスト入力欄、ラジオボタン、送信ボタンなど、さまざまな種類があります。 送信ボタンも<input>タグで作成します。このとき、type属性に「submit」を指定するのがポイントです。これにより、クリックした瞬間にフォームデータが自動的に