はたらくプログラミング③

どうもミトコンドリオンです。

 

プログラミングについてわかりやすく漫画化した「はたらくプログラミング」についての説明のつづきです。

 

「はたらくプログラミング」

著者 とりたす

監修 ウェブカツ!!

 

 

用語説明

 

IDとクラス

HTMLを構成する各要素を識別するための名前で、目印のようなもの。IDは1つのWEBページ内で重複できないが、クラスは同じものを何度でも使える。

 

header(ヘッダー)

ヘッダー部分を定義するタグ。

HTMLの子分。

 

main(メイン)

メインコンテンツ部分を定義するタグ。

HTMLの子分。

 

footer(フッター)

フッター部分を定義するタグ。

HTMLの子分。

 

HTMLの構造

HTMLは階層構造になっており、適切なタグで囲むことで文書に意味を持たせている。

 

エージェント・スミッス(クローラー

世界中のWEBページの情報を取得し、そのページの情報を検索エンジンのサーバーへ持ち帰って蓄積する。

 

SEO検索エンジン最適化)

クローラーは、WEBサイトのコンテンツの質やHTMLが論理的な文書構造になっているかなどを定期的に評価しており、その評価によって検索エンジンにおける検索順位が上下する。

 

ノード

タグによって定義されたHTMLの各要素のこと。IDやクラスを目印としてノードを指定する仕組みをDOM(Document Object Model)と呼ぶ。

 

CSSクレタ

どの要素にどのようなプロパティを適用するかを指定する方法。ID、クラス、タグ名で直接指定するだけでなく子ノードや親ノード、兄弟ノードなどを間接的に指定することもできる。

 

DIV(ディブ)

単体では特に意味を持たないが、囲った部分をブロックレベル要素(文書を構成する基本要素)としてグループ化する。

HTMLの子分。

 

position(ポジション)

要素の位置を決めるCSSプロパティ。設定した値によって基準位置が変わる。

CSSの妹分。

relative:現在位置からの相対的な位置

absolute:親要素を基準にした絶対的な位置

 

ID/クラスとセレクタ

CSSがうまく反映されないときは、HTMLで指定したID/クラス名と、CSSセレクタの内容が一致しているか確認しよう。初心者のうちはID/クラス名のタイプミスも多い。

 

hover(ホバー)

要素が特定の状態にある場合のスタイルを指定する「疑似クラス」の1つ。Hoverは、要素の上にマウスカーソルが乗ったときのスタイルを指定する。

CSSの妹分。

 

Transition(トランジション

CSSプロパティが変更された際に、一定の時間をかけてスタイルが変化(すなわちアニメーション)するように設定できるプロパティ。

CSSの妹分。

 

カーソル

ユーザーの現在の入力位置を指し示すマーク

 

input(インプット)タグ

ユーザーが入力したさまざまなデータを表示および保持する。Text(1行のテキスト入力)、checkbox(チェックボックス)、passwoord(パスワード用)など数多くの種類がある。

HTMLの子分。

 

getElementByld/Class

HTML文書内から、指定のIDまたはクラスを持つノードを検索するJavaScriptの基本的なメソッド。似たものに“querySelector”があるが、こちらは「セレクタ」でノードを指定する。

 

イベント

マウスボタンをクリックした、ページが読み込まれた、などの動作が起こったときに発生する。イベント発生時の処理を記述することを「イベントリスナを登録する」という。

 

addEventListener

ターゲットに特定のイベントが発生した際に、指定の関数を実行するJavaScriptの基本的なメソッド。

 

keyup(イベント)

何らかのキーを押したあとキーを離した際に発生するイベントの1種。

 

length(レングス)

文字列や長さや、配列の要素数を表すプロパティ。

 

span(スパン)

HTMLタグの1種。Spanタグで囲った文字は「インライン要素(文章の一部として扱われる)」としてグループ化される。

HTMLの子分。

 

innerHTML

HTML要素の中身を取得したり、書き換えたりできるプロパティの1種。

 

button(ボタン)

ボタンを作成するHTMLタグの1種。HTMLの子分。

 

click(クリック)

ターゲットの要素をクリックした際に発生するイベントの1種。

 

イベントの発火

指定のイベントが発生して関数が実行されることをイベントが「発火する」と呼ぶ。

 

display(ディスプレイ)

要素の表示形式を決めるCSSプロパティ“display:none”に設定すると要素が表示されなくなる。レイアウトにも影響を与えないので、見かけ上、完全に無いものになる。

 

classList(クラスリスト)

要素の持つクラスにアクセスできる。

classList.addでクラスの追加。

classList.removeでクラスの削除を行うことが可能。

 

複数条件セクレタ

特定の2つ(またはそれ以上)のクラスを持つ要素に対してのみ適用するプロパティを指定したCSSクレタ。“.modal.show”のように記述する。

 

transform(トランスフォーム)

要素を動かしたり大きさを変えたりするCSSプロパティ。

CSSの妹分。

 

opacity(オパシティ)

要素の透明度を指定するCSSプロパティ。

0.0:完全な透明。1.0:完全な不透明。

CSSの妹分。

 

モーダルウィンドウ

WEBページの全画面が覆い隠され、重要なメッセージが表示される。ユーザーに見せたい状態だけを見せるのに効果的。アニメーションを付けて表示する場合が多い。

 

 

つづく