質疑応答や検索に役立つ【覚えておきたいweb用語】

htmlやCSSの用語を正しく覚えることが自己解決能力に繋がります

正しい用語を識る というのは物事を解決する際非常に役立ちます。 html, CSS, Java script などの分野は専門用語がたくさんあります。 ...

vanillaice000.blog.fc2.com

もう一つは『どれがなんという名称なのかを知っておくこと』です。「これ何ていう名前なの？」をなるべく知ろう、という主旨でございます。

テンプレートの上部にあるリンクの集合部分

グローバルナビゲーション

サイト内の各ページに共通して設けてある案内リンクの集合体

赤く囲ってある部位のことですが、これを一般的に ナビゲーション, グローバルナビゲーション と言います。略称は「ナビ」ですね。何かの案内的用途になるものを総括して「ナビ」と称することが多いため「グローバルナビ」と言うとより正確に伝わるかと思います。

サイト内の各ページに共通して設けてある案内リンクの集合体、それが「ナビゲーション」です。
グローバルナビゲーションが有るとサイト内の主要ページ間の行き来が容易なり、逆に無いと移動しづらい、構造のわかりづらいサイト構成になってしまいます。

形態としては、スクロールと同時に上に流れていく場合もあれば、画面上部に滞在するものなど色々あります。

この部位の質問をする際には「○○テンプレートのグローバルナビについてですが…」と言えばすぐに伝わります。検索時にも「グローバルナビゲーション」という語句でもって行えば素早く結果にたどり着ける確率が高くなります。

質問や検索時の語句
ブログの上の方にあるバー	グローバルナビゲーション

ルールセット

CSSに関する用語 です。つまりスタイルシートに記されている文字列関係しています。

ルールセット

セレクターと宣言ブロックがセットになったもの

頻出用語 なので是非覚えてください。「.xxxを探して、すぐ横に続く { の記号から } の記号までの範囲を削除してください。」よりも「xxxセレクタのルールセットを削除してください。」の方が話しが早いですよね。

.xxx (xxxは不特定文字列です) は クラスセレクタ(class selector)、#xxx は アイディーセレクタ(id selector) と言います。文字列手前の記号がドットならクラス、ハッシュならアイディーです。

また、{ } の記号は ブレイス(brace(s)) と言います。英語でいわゆる『かっこ記号』のことを総称して ブラケットblacket(s) と言いますが、htmlの < > をブラケットと称することが多いので、CSSの記号はブレイスまたは カーリーブラケット(curly bracket(s)) でも通じます。

質問や検索時の語句
{記号 から }記号 までのかたまり	ルールセット

セレクトボックス

セレクトボックス

フォームの選択式メニュー

ブラウザのデフォルトスタイル(左)であったり、CSSでスタイリングされていたり(右)など様々ですが、クリックすると選択肢が出てくる のが特徴です。html専門用語では select要素 と言います。一般名称が『セレクトボックス』ですね。

選択したと同時にページ内容が推移するものと、選択した後ボタンを押して遷移するものとありますが、それはコーダー(htmlやCSS構文を書く人)がどう設定するかによります。

会話中では『プルダウン』『ドロップダウン』と表現されることもあるかもしれませんが、これらとは区別した方が意思疎通が円滑かと思います。何故ならセレクトボックスは <select> というhtmlタグが有り、対して pull-down や drop-down というhtmlタグは存在せず、見た目の挙動を表しているにすぎないからです。

質問や検索時の語句
プルダウン, ドロップダウン, 選択バー 等	セレクトボックス, セレクト要素

ラジオボタンとチェックボックス

ラジオボタン

複数選択肢のある円形中貫き形状のボタン

チェックボックス

設定項目を選択する四角形

通称『ラジオボタン』と『チェックボックス』はそれぞれ上記の通りです。『ラジオボックス』『チェックボタン』はあまり聞かないかな、と思いますが間違いでもないような。

両者は共に input要素 と呼ばれるもので、形状と用途が違っています。input要素には種類がたくさんありますので、一つ前の『セレクトボックス』とは逆に見た目の名称を使う方が伝わりやすいですね。仮に「input要素の見た目をカスタマイズしたいです」と質問すると、「inputはたくさんありますが具体的なtypeは何ですか？」と聞き返される可能性大。

質問や検索時の語句
input (種類が多すぎて特定できない)	ラジオボタン, チェックボックス

テキストエリア

テキストエリア

複数行の文章入力・送信が可能な欄

コメント送信フォームで主に『本文』の記入欄として利用されており、読んで字のごとく テキストを入力するための場所 です。上には投稿者名やタイトルなどを入れる場所がありますが、これは上でチラっと書いた input要素 です。コメントを入力する場所だけが テキストエリア で、htmlの textarea要素 です。

質問や検索時の語句
文章入力箇所 (おおざっぱすぎて特定できない)	テキストエリア

オーバーレイとマスク

元の画像が以下のものだとします。

以下の画像は元の画像にCSS加工しています。これは『オーバーレイ』でしょうか『マスク』でしょうか。

答えは オーバーレイでありマスクである。

オーバーレイ (overlay) = 被せる, 重ねる
マスク (mask) = 隠す

これが英語本来の意味です。何かに被せるのがオーバーレイ。何かを隠すのがマスク。ですからサンプルをご覧頂くと、半透明白が花画像に「被さっている」と考えるならばオーバーレイ。花画像を「隠している」と考えるならばマスク。ということで、視点の違い です。

FC2は1ヶ月記事を書かずに放置すると、画面の下(スクロール最下段では上)に広告が出ます(サンプルが無くて申し訳ない)
あれらは一般的に オーバーレイ広告 とは呼びますが、マスク広告とは言わないですよね。何故なら「コンテンツを 隠す」ことを目的としていないからです。あくまでもコンテンツに被さってくるので「オーバーレイ」。スマートフォンで出てくる画面下部の動く広告。こちらもオーバーレイであり、その場に留まっているので「フローティング広告」とも呼ばれます。

サンプルを称するに、この場合はオーバーレイでもマスクでもどちらでも良いでしょうね。

まとめ

今のところ思いついたのはこのぐらいです。気がつけば追加するかもしれません。

web上で「なんとなくピンと来ないな」という語句に出くわした時には、英単語本来の意味を調べてみることをおすすめします。ヒントになったり、そのものズバリの答えであったりします。