どうもミトコンドリオンです。
プログラミングについてわかりやすく漫画化した「はたらくプログラミング」についての説明のつづきです。
「はたらくプログラミング」
著者 とりたす
監修 ウェブカツ！！
- 用語説明
- IDとクラス
- header（ヘッダー）
- main（メイン）
- footer（フッター）
- HTMLの構造
- エージェント・スミッス（クローラー）
- SEO（検索エンジン最適化）
- ノード
- CSSセクレタ
- DIV（ディブ）
- position（ポジション）
- ID／クラスとセレクタ
- hover（ホバー）
- Transition（トランジション）
- カーソル
- input（インプット）タグ
- getElementByld／Class
- イベント
- addEventListener
- keyup（イベント）
- length（レングス）
- span（スパン）
- innerHTML
- button（ボタン）
- click（クリック）
- イベントの発火
- display（ディスプレイ）
- classList（クラスリスト）
- 複数条件セクレタ
- transform（トランスフォーム）
- opacity（オパシティ）
- モーダルウィンドウ
用語説明
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ページの全画面が覆い隠され、重要なメッセージが表示される。ユーザーに見せたい状態だけを見せるのに効果的。アニメーションを付けて表示する場合が多い。
つづく
コメント