JavaScript | コンピューター

JavaScriptで<select>リストの項目を事前選択（プリセレクト）する方法

JavaScriptを使って<select>リストの項目を事前に選択状態にするには、selectedIndexプロパティを使用します。このプロパティに、あらかじめ選択しておきたい項目のインデックス番号を設定するだけで実現できます。<script>タグ内での記述方法は以下のとおりです。add_select_idには<select>タグに付けたidを、add_item_indexには数値のインデックスを指定します。なお、このインデックスは0から始まる点に注意してください。たとえば先頭の項目は「0」、2番目の項目は「1」となり、事前選択したい項目に対応する番号を設

【HTML入門】select要素のドロップダウンリストにデフォルト値（初期選択）を設定する方法

HTMLでは、<select>要素を使うことで、フォーム内に簡単なドロップダウンリスト（セレクトボックス）を作成し、ユーザーに入力してもらうことができます。セレクトボックスは「プルダウンメニュー」とも呼ばれ、複数の選択肢を一覧形式で表示できる便利な部品です。さらに、このドロップダウンリストにはデフォルト値（初期状態で選択されている項目）を設定することも可能です。方法はとてもシンプルで、あらかじめ選択しておきたい項目の<option>タグに selected属性を追加するだけです。selected属性の基本的な使い方以下のように、初期表示したい選択肢にselectedを

HTMLページ内でiframeタグを使ってインラインフレームを作成する方法

iframeタグとは？<iframe>タグは、インラインフレーム（inline frame）を定義するために使用されます。インラインフレームとは、現在表示しているHTMLドキュメントの中に、別のドキュメントを埋め込むための仕組みです。たとえば、他のWebページや動画などを自分のページの一部として表示したい場合に活用できます。iframeの作成自体は非常にシンプルで、基本的な属性を指定するだけで簡単に実装できます。iframeタグで使える主な属性属性説明heightiframeの高さをピクセル単位で指定します。nameiframeの名前を指定します。リンクのターゲットとして利用する際

HTMLドキュメントに不可欠な基本タグとは？必須タグの役割を解説

HTMLドキュメントに不可欠な基本タグとは？ HTMLには、コンテンツの書式設定や見出しの作成、レイアウトの調整、セクションの追加など、ウェブページを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントを成立させるうえで欠かせないのが、DOCTYPE宣言、<html>、<head>、<title>、<body>の5つです。 1. DOCTYPE宣言 DOCTYPE宣言は、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるための宣言です。HTML5では、次のように一行で記述します。 <

HTMLドキュメントで最も重要なタグとは？DOCTYPE・html・head・bodyの基本を解説

HTMLには、コンテンツの書式設定、見出しの作成、レイアウトの調整、セクションの追加など、Webサイトを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントにとって特に重要なのが「DOCTYPE」「<html>」「<head>」「<body>」の4つです。本記事では、それぞれの役割と正しい記述方法をわかりやすく解説します。 1. DOCTYPE宣言（ドキュメントタイプ宣言） DOCTYPEは「ドキュメントタイプ宣言」と呼ばれるもので、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるために使われます。現

HTMLタグでページのタイトルを定義する方法｜<title>タグの正しい使い方を解説

HTMLドキュメントにタイトルを設定するには HTMLドキュメントにタイトルを設定するには、HTMLの<title>タグを使用します。このタイトルは、<head>タグと</head>タグの間に記述する必要があります。ここで設定したタイトルは、Webブラウザのタブやタイトルバーに表示されます。また、検索エンジンがページの内容を理解する際の重要な手がかりとなるため、SEOの観点からも非常に重要な要素とされています。 titleタグの主な役割ブラウザのタブにページ名として表示される検索結果画面でリンクの見出しとして使用されるユーザーがページをブックマーク

HTMLの<style>タグは、HTMLドキュメントの<head>セクション内でスタイルシートを宣言するためのタグです。このようにHTMLページに直接CSSを追加する手法は「内部CSS（Internal CSS）」と呼ばれます。CSSをHTMLに適用する方法はいくつかありますが、そのひとつが<style>タグを使った内部CSSです。<style>タグは<head>〜</head>タグの間に記述し、そこで定義したCSSスタイルはそのページ単体に適用されます。コード例以下のコードを実行して、<style>タグの基本

HTMLドキュメントの基本となる最小構成とは？タグの役割をわかりやすく解説

HTMLドキュメントとは、Webページそのものを指し、Webサイト上にコンテンツを表示するために使われるファイルです。HTMLは「タグ」と呼ばれる記述によって構成されており、多くのタグには開始タグと終了タグのペアが存在します。ただし、一部のタグ（<br>や<img>など）は終了タグを持たない単独タグである点にも注意しましょう。HTMLドキュメントを正しく動作させるためには、最低限必要な「最小構成」のタグを理解しておくことが重要です。ここでは、その基本構造を一つずつ解説していきます。1. DOCTYPE宣言HTMLドキュメントの先頭には、必ず<!DOCTYPE ht

<head>要素なしで有効なHTMLドキュメントを作成する方法

HTML文書を作成するうえで基本となるのは、DOCTYPE宣言、<html>、<head>、</body>といった要素です。しかし驚くことに、<head>要素がなくても、有効なHTML文書として問題なく動作させることができます。ただし、DOCTYPE宣言（<!DOCTYPE html>）だけは必ず記述しましょう。この宣言は、ページがどのバージョンのHTMLで書かれているかをブラウザに伝え、標準モードでレンダリングするよう指示する重要な役割を担っているためです。 <head>タグを使わないHTML文書の例次の例では<

HTMLのlinkタグで外部リソースとの関係を定義する方法

linkタグとは？HTMLの<link>タグは、外部リソースとの関係を定義するための要素です。最も一般的な用途は、外部スタイルシート（CSSファイル）の読み込みです。<link>タグは<head>〜</head>タグの中に記述します。開始タグのみで構成される空要素のため、終了タグは必要ありません。外部CSSファイルを読み込む仕組みスタイルを別ファイルに分離することで、HTMLのコードがすっきりし、複数ページで同じデザインを再利用できるようになります。CSSファイル側：すべてのCSSコードを記述します（拡張子は.css）HTML側： <li

【初心者向け】<script>タグでクライアント側のJavaScriptを定義する方法

HTMLの<script>タグは、HTMLドキュメント内にスクリプトを宣言するために使用されます。このタグを使うことで、クライアント側（ブラウザ側）で動作するJavaScriptを定義できます。 <script>タグと</script>タグの間に記述したコードは、ブラウザによって解釈・実行されます。また、src属性を使えば、外部のJavaScriptファイルを読み込むことも可能です。 <script>タグの主な属性属性値説明 asyncasyncスクリプトが非同期で実行されることを指定します。ページの読み込みをブロックせずにスクリプトを

HTMLページに外部JavaScriptファイルを読み込む方法｜src属性の使い方を解説

HTMLの<script>タグは、HTMLドキュメント内でスクリプトを宣言するための要素です。このタグを使うことで、クライアントサイドのJavaScriptを定義できます。しかし、「HTMLページに外部のJavaScriptファイルを組み込みたい」というケースもあるでしょう。その場合でも、<script>タグのsrc属性を使えば簡単に実現できます。 <script>タグの主な属性一覧 <script>タグには、以下のような属性が用意されています。属性値説明 asyncasyncスクリプトを非同期で実行することを指定します。 cha

JavaScriptで現在の日付と時刻を取得する方法

JavaScriptで現在の日付や時刻を取得するには、標準組み込みオブジェクトである Date オブジェクトを使用します。基本的な使い方Date オブジェクトを new を付けずにそのまま呼び出すと、現在の日付と時刻を表す文字列が返されます。以下のコードは、ページ上に現在の日付と時刻を表示するシンプルな例です。<!DOCTYPE html> <html> <body> <p id="currentDate"></p> &

JavaScriptでオブジェクト配列を出力する方法

JavaScriptでオブジェクト配列を表示・出力するには、JSON.stringify()メソッドを使用します。このメソッドはオブジェクトや配列をJSON形式の文字列に変換してくれるため、そのままHTMLに出力したり、コンソールで確認したりするのに便利です。JSON.stringify()の基本JSON.stringify()は以下のように引数を指定できます。第1引数：変換したいオブジェクトや配列第2引数：置換関数またはフィルタ用の配列（通常はnull）第3引数：インデントに使用するスペースの数（整形して見やすく出力できる）サンプルコード次のコードを実行すると、オブジェクト配列が整形さ

JavaScriptで現在の年を取得・表示する方法【getFullYear()の使い方】

JavaScriptで現在の年（西暦）を取得するには、getFullYear()メソッドを使用します。このメソッドはDateオブジェクトから4桁の西暦を数値として返します。getFullYear()メソッドとはgetFullYear()は、Dateオブジェクトが持つローカル時刻に基づいて、現在の年を4桁の数値（例：2025）で返すメソッドです。日付処理において最も基本的かつよく使われるメソッドの一つです。サンプルコード以下のコードでは、ボタンをクリックすると現在の年が画面に表示されます。実際に動作を確認してみてください。<!DOCTYPE html> <html> &n

JavaScriptで「'0' == false」がtrueになるのに、「if(0)」はfalseになるのはなぜですか？

はじめに：一見矛盾するJavaScriptの挙動 JavaScriptを学んでいると、次のようなコードに出会って戸惑うことがあります。 if (0 == false) { console.log(実行される); // true なので表示される } if (0) { console.log(実行される); // これも true なので表示される } if (0) { console.log(実行されない); // false なので表示されない } 「0 == false」はtrue、つまり文字列0がfalseと「等しい」と評価される一方で、if文の中では同じ文字列0がtru

JavaScriptで「#」を使った三角形を出力する方法

JavaScriptで「#」の三角形を出力するには？「#」記号で構成される三角形を画面に出力するには、入れ子（ネスト）になったforループを使用します。仕組みはシンプルで、外側のループが行数を制御し、内側のループがその行に表示する「#」の個数を制御します。各行の出力が終わるごとに改行タグ（<br>）を出力することで、段階的に増えていく三角形の形が完成します。サンプルコード以下のコードを実行すると、三角形が出力されます。<html> <head> <

JavaScriptのオブジェクト指向プログラミングとは何ですか？

JavaScriptとオブジェクト指向プログラミング（OOP）JavaScriptは、オブジェクト指向プログラミング（OOP：Object Oriented Programming）に対応した言語です。プログラミング言語が「オブジェクト指向」と呼ばれるためには、開発者に対して以下の4つの基本的な機能を提供している必要があります。1. カプセル化（Encapsulation）データやメソッドといった関連性のある情報を、ひとつのオブジェクトの中にまとめて格納できる能力です。これによりコードの整理がしやすくなり、意図しない外部からのアクセスを防ぐことにも役立ちます。2. 集約（Aggregation

JavaScriptでオブジェクトを作成する方法｜new演算子とObject()コンストラクタの基本

JavaScriptでオブジェクトを作成するには、new演算子を使ってオブジェクトのインスタンスを生成します。new演算子の後ろには、オブジェクトを初期化するためのコンストラクタメソッドを続けて記述します。コンストラクタとは？コンストラクタとは、オブジェクトを生成し、その初期化を行うための関数のことです。JavaScriptには、オブジェクトを構築するための特別なコンストラクタ関数として Object() が用意されています。 Object() コンストラクタの戻り値は変数に代入します。この変数には、新しく生成されたオブジェクトへの参照が格納されます。なお、オブジェクトに割り当てるプロパ

HTMLの<script>タグにおけるdefer属性の仕組みと使い方を解説

defer属性は、スクリプトの実行タイミングをページの読み込み後に遅らせるために指定する属性です。この属性は外部スクリプト（src属性を持つscriptタグ）にのみ有効で、値を持たないブール型属性として記述します。 defer属性の基本的な動作 defer属性が付与されたスクリプトは、以下のような流れで処理されます。 HTMLの解析中にスクリプトファイルのダウンロードが並行して開始される HTMLドキュメントの解析（パース）が完了した後、DOM構築が終わってからスクリプトが順番に実行される複数のdefer付きスクリプトがある場合、記述された順序どおりに実行されることが保証されるそのため