コード辞書

コードの頭文字言語の種類 HTML CSS JavaScript

a要素　<a href = "飛ばしたいURL">テキスト</a>: テキストをクリックすることで、指定したURLのページに飛ぶことができる。

alertメソッド　window.alert('テキスト');: 画面上部から警告ウィンドウを出すことができる。

appendChildメソッド　親要素.appendChild(作成した要素);: 親要素の下に作成した要素を追加できる。親要素にbodyを指定したいときは「document.body」とする。
親要素内において、()内の要素がHTMLにある場合、親要素の1番最後に移動させることもできる。

background-color: 色の指定;: ページの背景色を指定できる。

background-image　background-image: url(使いたい画像のURLorパス): 背景画像を指定できる。

background-position　background-position: 位置;: 背景画像の位置を指定できる。「center center」とすると、ウィンドウの中央に配置できる。

background-repeat　background-repeat: repeatするかしないか: 背景画像を繰り返し表示するか、繰り返さないようにするか指定できる。繰り返さない場合は「no-repeat」とする。

background-size　background-size: 数値など;: 背景画像のサイズを指定できる。数値以外にも、例えば「cover」とすることで、横いっぱいに広げることができる。

body要素　<body>その他のhtmlコード</body>: HTMLのページ全体。

break文　break ;: if文内で使用する。1番内側のfor文を抜け出すことができる。

childNodesプロパティ　親要素.childNodes;: 指定した親要素の子要素を配列(NodeList)として表示する。配列内に出る「text」は、改行を意味する。タグの終了(</>)も数える。

color: 色の指定;: 文字の色を指定するときに使う。

console　console.log('テキスト');: コンソールにテキストを表示させる。F12キー→コンソール

const　const 定数名 = 値orテキスト: 定数に値orテキストを指定することができる。一度値orテキストを入れたら、変更はできない。

continue文　continue ;: if文内で使用する。周回の処理だけを途中で止める(抜け出さない)

createElementメソッド　document.createElement('要素名');: 定数に指定した要素を作成できる。

cursor: pointer;: カーソルが要素の上に来たときに指のマークにできる（pointer以外にも、画像を指定することもできる）

dd要素　<dd>テキスト</dd>: dt要素と共に使う。用語に対する説明文をつける要素。

div要素　<div>要素orテキスト</div>: 複数の要素をひとまとまりにできる要素。テキストのみでの活用もでき、有能要素。

dl要素　<dl>dt要素、dd要素</dl>: 用語(dt要素)と説明文(dd要素)をひとまとまりにする要素。

dt要素　<dt>テキスト</dt>: dd要素と共に使う。用語と説明文をつける際に、dt要素は用語部分を担う。説明文はdd要素。

else-if文　else if (条件式) {条件を満たしたときに実行されるコード};: if文の後ろに付け足すことで、if文の条件式に当てはまらず、else if文の条件式に当てはまる場合の処理を行うことができる。

filterメソッド　配列.filter((el) => 条件式): 配列内の要素をelとし、条件式に当てはまるもののみを抽出する。ラムダ式メソッドの一部。

firstElementChildプロパティ　要素.firstElementChild;: 指定した要素の最初の子要素を、HTMLから取得することができる。

for文　for (初期化式; 繰り返し条件式; 更新式) {繰り返す処理};: 初期化式から始まり、繰り返す条件式に当てはまるまで、更新式を繰り返し、{}内の処理を行う。
例えば・・・
for (let i = 0; i < 5; i +=1) {
　　console.log('Hello World!!');
}
とした場合、変数iが0から始まり、iが5より下(4)まで、iに1を追加していく。つまり「0, 1, 2, 3, 4」の5回、コンソールにHello World!!を表示させる。
また、入れ子(ネスト)も可能である。入れ子(ネスト)→for文の中にfor文を書くこと。
for文の中にif文を入れることも可能。

for-in文　for (const プロパティ名 in オブジェクト) {繰り返す処理}: 反復可能ではないオブジェクトのための繰り返し構文。オブジェクトが使われている配列に対してfor文を使うと、エラーが起きる(エラーメッセージ→○○ is not iterable＝反復可能ではない)

for-of文　for (const 定数名 of [値orテキスト1, 値orテキスト2, ・・・]) {繰り返す処理}: []内の値orテキストを1つずつ順番に、定数に代入する。規則性のないリストを[]内に作成して活用する。規則性がある場合、for文でよい。

forEachメソッド　配列.forEach((要素) => 繰り返す処理);: ()内の要素に対して繰り返しの処理ができる。要素は配列の中身。for-of文と置き換えが可能。

関数宣言 function　function 関数名 (引数) {処理}: 何度も繰り返し出てくるコードは、関数宣言で処理をまとめる。この関数を他のところで使うことを「関数呼び出し」という。引数ありの場合は()内に引数を受け取る変数名を書く。引数なしの場合は何も書かない。ここでの引数のことを「仮引数」という。関数呼び出しの際に設定する引数のことを「実引数」という。
また、関数内で宣言された定数や変数には「ローカルスコープ」と呼ばれるスコープが適用されており、その関数の外では使えない。
戻り値を指定したいときは、{}内の最後に「return 戻り値;」と表記する。
「関数式」と呼ばれる表記法もある。
例えば・・・
const 関数名 = function (引数) {
　処理
};
この場合の関数は「無名関数」という。
上記に合わせて「アロー関数」と呼ばれる表記法もある。
例えば・・・
const 関数名 = (引数) => {
　処理
}
{}内が式のときは省略する。

getElementByIdメソッド　document.getElementById('id名'): 要素のid名から要素を取得する。

getElementsByClassNameメソッド　document.getElementsByClassName('クラス名');: 取得したい要素のクラス名を指定し、HTMLから取得することができる。複数取得するため「Elements」と複数形で表記されている。そのため、JavaScript内で取得したものを扱う場合は、配列として考える必要がある(コンソールなどには「HTML Collection」オブジェクトとして表記される)

getElementsByNameメソッド　document.getElementsByName('name名');: 取得したい要素のname名を指定し、HTMLから取得することができる。nameのある要素のため、取得できる要素は主にラジオボタンやチェックボックスなどである。複数取得するため「Elements」と複数形で表記されている。そのため、JavaScript内で取得したものを扱う場合は、配列として考える必要がある(コンソールなどには「NodeList」オブジェクトとして表記される)

getElementsByTagNameメソッド　document.getElementsByTagName('タグ名');: タグ名=要素の名前を指定し、HTMLから取得することができる。複数取得するため「Elements」と複数形で表記されている。そのため、JavaScript内で取得したものを扱う場合は、配列として考える必要がある(コンソールなどには「HTML Collection」オブジェクトとして表記される)

height　height: 数値;: 要素の縦幅(高さ)を指定できる。読み方はハイト。

if文　if (条件式) {条件を満たしたときに実行されるコード};: もし条件式に当てはまれば、{}内のコードを実行する。後に「else」をつけることで、そうでなければ、のコードを付け足すことができる。

img要素　<img src='使いたい画像のURLorパス'>: 指定した画像を表示させる。

@import　@import url('URL');: ()内のURLからインポートしてくることができる。主にGoogleフォントなどの取得に使う。

indexOfメソッド　配列.indexOf(照合する値): spliceメソッドと組み合わせることで、指定した配列の特定の要素を削除する。照合する値が配列内になかったときは戻り値が-1、あったときは1となる。

input要素　<input>: テキストによる入力、ラジオボタンによる選択など、ユーザーからの入力値を受け取ることができる要素。テキストの場合は「input type="text"」、ラジオボタンの場合は「input type="radio"」など、typeの値によってinput要素の種類が分かれる。

insertBeforeメソッド　親要素.insertBefore(追加したい要素, 参照する要素);: 指定した親要素内において、参照する要素の1つ前に指定した要素を追加することができる。1つ後ろに追加したいときは「参照する要素.nextElementSibling」とする(「Element」の省略可)
また、要素の移動をさせることもできる。

label要素　<label>テキスト→(その下に)ドロップダウンメニュー、ラジオボタンなど</label>: ドロップダウンメニューやラジオボタンなどを選択する際に、説明を付け加えるときに使う。idのついたinput要素と使い、「label for="id名"」とすると、そのinput要素に対するテキストをつけることができる。

lastElementChildプロパティ　要素.lastElementChild;: 指定した要素の最後の子要素を、HTMLから取得することができる。

lengthメソッド　配列.length: 配列の長さ=要素の数。

let　let 変数名 = 値orテキスト: 変数に値orテキストを指定することができる。一度値orテキストを入れても、変更ができる。

li要素　<li>テキスト</li>: リストの一つ一つの要素。

mapメソッド　配列.map((el) => 追加で表示したい内容): 配列内の要素をelとし、elにテキストなどを追加して書き換えることができる。ラムダ式メソッドの一部。

nextElementSiblingプロパティ　要素.nextElementSibling;: 指定した要素の次の兄弟要素を、HTMLから取得することができる。

option要素　<option>選択肢</option>: ドロップダウンメニューにおいて、それぞれの選択肢を作ることができる。select要素の下で使う。「selected disabled」とつけることで、選択できないようにすることもできる。

p要素　<p>テキスト</p>: 表示したいテキストの内容を指定できる。

parentElementプロパティ　要素.parentElement;: 指定した要素の親要素を、HTMLから取得することができる。

previousElementSiblingプロパティ　要素.previousElementSibling;: 指定した要素の1つ前の兄弟要素を、HTMLから取得することができる。

promptメソッド　window.prompt('テキスト');: 画面上部から入力ダイアログを表示する。テキストに書いた内容がダイアログ内に表示される。

pushメソッド　配列.push();: 配列に対して、末尾に()内の値を追加できる。

popメソッド　配列.pop();: 配列に対して、末尾の要素を削除できる。

querySelectorメソッド　document.querySelector('要素名');: 指定した要素をHTMLから取ってくる。

querySelectorAllメソッド　document.querySelectorAll('要素名');: 指定した要素全てをHTMLから取ってくる。複数取得するため、JavaScript内で取得したものを扱う場合は、配列として考える必要がある(コンソールなどには「NodeList」オブジェクトとして表記される)

removeメソッド　削除したい要素.remove();: 指定した要素を削除することができる。戻り値は「undefined」。

removeChildメソッド　親要素.replaceChild(削除したい子要素);: 指定した親要素内において、子要素を削除することができる。ここで削除された要素は戻り値となるため、後々使う必要がある場合は、定数などで受け取っておく必要がある。

replaceChildメソッド　親要素.replaceChild(新しい要素, 古い要素);: 古い要素を新しい要素に置き換えることができる。古い要素は、指定した親要素の子要素でなければならない。ここで置き換えられた古い要素は戻り値となるため、後々使う必要がある場合は、定数などで受け取っておく必要がある。

return: 関数の処理を抜け出したいときに使う。

script要素　<script src = "使いたいjsのリンク"></script>: JavaScriptの指定ができる。

select要素　<select>option要素</select>: ドロップダウンメニューを作成したいときに使う。option要素にドロップダウンメニュー内のそれぞれの選択肢を入れる。/dd>
HTML

shiftメソッド　配列.shift();: 配列に対して、先頭の要素を削除できる。

spliceメソッド　配列.splice(インデックス, 0or1, 追加する要素): ()内に0を指定した場合、指定した配列内のインデックス(何番目か)の後に要素を追加できる。()内に1を追加した場合、指定した配列のインデックス(何番目か)の要素を削除できる。

summary要素　<summary>見出し</summary>: 「▶○○」のように見出しが表示され、クリックすると「▼○○」となり、詳細が下に表示されるようになる。summary要素の兄弟要素は見えなくなる（クリックすると見えるようになる）

table要素　<table>tr要素、th要素、td要素</table>: table要素を親要素として、子要素にtr, th, td要素を使う。テーブルを作成するときに使う要素。
例えば・・・
<table>
　<tr>
　　<th>テーブルのタイトル1</th><th>テーブルのタイトル2</th><th>テーブルのタイトル3</th>
　</tr>
　<tr>
　　<td>タイトル1の列の値</td><td>タイトル2の列の値</td><td>タイトル3の列の値</td>
　</tr>
　<tr>
　　<td>タイトル1の列の値</td><td>タイトル2の列の値</td><td>タイトル3の列の値</td>
　</tr>
</table>

textContentメソッド　document.要素.textContent = 'テキスト';: 指定した要素のテキスト内容を書き換えることができる。

td要素　<td>テーブルのセルの値</td>: テーブル内にセルを作成できる。td要素1つにつきセル1つのため、作りたいセルの数に応じてtd要素も必要になる。

th要素　<th>テーブルの列ごとのタイトル</th>: テーブルの列ごとのタイトルを作成できる。基本的にはtd要素よりも先に作る。

title要素　<title>テキスト</title>: ページのタイトル部分を指定することができる。何も指定しなかった場合、ファイル名になる。主にhead要素内で表記する。

tr要素　<tr>th要素、td要素</tr>: テーブル内の行1つ分を作成できる。詳しいテーブルの作り方はtable要素を参照。

ul要素　<ul>li要素</ul>: リストを作成する際の親要素。一つ一つのリストではなく、リスト全体を範囲とする要素。

unshiftメソッド　配列.unshift();: 配列に対して、先頭に()内の値を追加できる。

'use strict': JavaScriptファイルの最初に記述する。ラベルのタイプミスを防ぐことができる。

width　width: 数値;: 要素の横幅を指定できる。