Article page

by
  • Comment:0
  • Trackback:0

テンプレートをカスタマイズする上で、作業中なにかしらの疑問が出てきた場合、
どう検索して調べるのか、あるいは相手にどうやって質問内容を伝えるかがキモになってきます。
一つは「正しい用語を覚えること」

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

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


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


こういうの ↓

Life-is グローバルナビ


Message グローバルナビ


Basement グローバルナビ



赤く囲ってある部位のことですが、これを一般的に

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

と言います。
サイト内の各ページに共通して設けてある案内リンクの集合体、それが「ナビゲーション」です。
これが有るとサイト内の移動・ページ間の行き来は容易になりますが、逆に無いと非常に困難に。

スクロールと同時に上に流れていく場合もあれば、画面上部に滞在するものなど色んな形態があります。
総称としては「ナビゲーション、あるいはグローバルナビゲーション、あるいは略称でナビ」で通用します。
この部位について質問がある場合には、

「○○テンプレートのグローバルナビについてですが…」

とご質問頂ければすぐにわかります。
検索時にも「ナビゲーション」という語句でもって行えばOKです。



セレクトボックス


これのこと ↓

セレクトボックス



右に矢印が付いていますが、この見た目はブラウザごとに異なります。
スクリーンショットはMac OSのGoogle Chromeです。
矢印をクリックすると

セレクトボックス


こんな風に選択肢が出てきます。
読んで時の如く「select (選択)するためのボックス」です。
選択したと同時にページ内容が推移するものと、選択した後ボタンを押して遷移するものとありますが、
それはコーダー(htmlやCSS構文を書く人)がどう設定するかによります。

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



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


ラジオボタンはこれ ↓

ラジオボタン


円形で中抜き の形状を持つものを ラジオボタン と言います。

チェックボックスはこれ ↓ (スクリーンショットでなく現物)

18才未満
18才以上25才未満
25才以上30才未満

ラジオボタンもチェックボックスも「何かを選んで明示する」ために使います。
ラジオボタンは「丸いポッチ」になってるものをそう呼びます。
チェックボックスの方も「チェックマークを入れられる」ようになっているものをそう呼びます。
つまり見た目で名前が違いますが、使用するタグは両者共に
<input>
です。
input には形状がたくさんありますので、一つ前の内容とは逆に見た目の名称を使う方が伝わりやすいですね。


Q「このページのinputのサイズを変えたいのですが…」
A「input要素がページ内にラジオタイプ・チェックタイプ・送信ボタン等たくさんありますが、どれのことですか?」


Q「このページのラジオボタンのサイズを変えたいです」
A「サイズを変更するには…」

②の方が質疑応答として円滑です。



テキストエリア


コメント欄にあります。

テキストエリア


コメントを入力するのがテキストエリアです。
読んで字のごとく テキストを入力するための場所 です。
上には投稿者名やタイトルなどを入れる場所がありますが、これは上でチラっと書いた input要素 です。
コメントを入力する場所だけが テキストエリア です。
htmlタグは
<textarea>


右下に // のマークがありますが、ここをマウスで引っ張ると範囲を拡大することができて便利です。
ただしMicrosoftブラウザにその機能は有りません。
MicrosoftのIEやEdgeでは、テキストエリア右横に無骨なスクロールバーが出ます。
そして拡大もできません。
ですから テキストエリアの縦幅が小さいと、IEやEdgeユーザーさんは入力がし辛いかもしれません
気持ち大きめにしておいた方が親切かもですね。
つーか、もういい加減なんとかしろよMicrosoftさんよぅ



オーバーレイとマスク


どう違うねん? って感じなんですけども。

花画像



この画像をこうしてみる ↓ (ちょっと小さめにします)




左側は花画像の上に完全不透明「白」を乗せてあります。
右側は花画像の上に不透明度0.7の「白(透過あり)」を乗せています。
これが オーバーレイ であり マスク です。

だからどう違うんや、って話しだ (´・ω・`)

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

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

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

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



モーダル


これ ↓ (クリック)




クリックするとオーバーレイの状態で画像が拡大されます。
そしてその間、下にあるメインコンテンツの 操作が不能 になります。
この「操作不可」状態があって初めて モーダル あるいは モーダルウィンドウ です。
オーバーレイで出てきたコンテンツは操作可能、被せられた方のコンテンツは操作不能、って意味です。
modal (モーダル) の対義語は modeless (モーレス) で、自身以外の他コンテンツも操作可能であればモードレス。

一つ前の内容に沿って「オーバーレイ」という語彙を使いましたが、モーダルで出てくるオーバーレイのことを
ダイアログ (dialogue)
と言います。
閲覧者に何かを促したり通知したりするものをこう呼びます。
表示されるのが画像の場合には… オーバーレイという表現でも構わんやろね (´・ω・`)



まとめ


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

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

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い