ホバーは、マウスポインタを画面上のボタンやリンクなどの要素に重ね、クリックせずにとどめている状態である。
ホバーは押す前の段階なので、利用者がどの要素に目を向けているかをシステムが知る手がかりになる。システムはこの状態をきっかけに、要素の色を変えたりツールチップのような短い説明を出したりして反応を返せる。指で直接触れて操作するタッチパネルにはポインタを重ねる段階がないため、ホバーだけに頼った案内は伝わらないことがある。
たとえ本棚の本の背に指先を添えたまま、まだ抜き出していないところに似ています。
覚え方英語の hover は、鳥やヘリコプターが空中で止まって浮かぶ様子を表す。ポインタが要素の上で浮いたまま止まっている姿と重ねる。
出題のポイント
ロールオーバーは、要素にポインタを重ねたときに、その要素の色や画像などの見た目が切り替わる効果である。
ポインタを要素から離すと、元の見た目に戻る。
ポインタを離すと元の見た目に戻るのが普通で、画像を差し替えたり色を変えたりして作る。見た目が変わることで、利用者はその要素が押せるものであることや、いまどれを指しているかを、押す前に確かめられる。
たとえ人が近づくと点き、離れると消える玄関の照明のようなものです。
覚え方roll over は「上を転がる」。ポインタが要素の上を転がって通るたびに、絵柄がくるりと替わる様子を思い浮かべる。
出題のポイント
| 観点 | ホバー | ロールオーバー |
|---|---|---|
| 決め手指すもの | ポインタを要素に重ねている状態 | その状態のときに起こる見た目の変化 |
| 両者の関係 | きっかけ | きっかけに応じた結果 |
GUI (Graphical User Interface) は、アイコンやボタン、ウィンドウなどの図形を画面に表示し、マウスやタッチで指し示して操作させるユーザインタフェースである。
操作の対象が目に見えるので、命令の名前を覚えていなくても、画面を見ながら選んで操作できる。これまでの単元で扱ったリストボックスやメニューなどの部品は、どれも GUI を組み立てる部品にあたる。GUI の画面でも文字を打ち込む場面はあり、その手間を減らす補助の機能が用意されている。
たとえ写真付きのメニュー表を指さして注文するようなもの。料理の名前を知らなくても、見て選べます。
覚え方頭の G は Graphical。グラフ (graph) と同じく「描かれたもの」を表す語で、描かれた絵を指して操作すると覚える。
出題のポイント
CSS (Cascading Style Sheets) は、Web ページの文字の色や大きさ、背景、配置といった見た目を指定するための言語である。
CSS の指定は、ページの中身と構造を記述する言語 HTML で書いた見出しや段落などの部分ごとに、どの色や大きさで表示するかを割り当てる形で書く。指定をまとめたファイル (スタイルシート) を各ページから読み込ませれば、そのファイル 1 つを直すだけで、読み込んでいる全ページの見た目がまとめて変わる。
たとえHTML が文章の原稿なら、CSS はその原稿をどんな字体や色で刷るかを決める印刷の指示書です。
覚え方Style Sheets は「様式を書いた紙」。中身ではなく様式だけを書いた 1 枚の紙を、何ページにも重ねて使う姿を思い浮かべる。
出題のポイント
モバイルファーストは、Web サイトなどを設計するときに、スマートフォンのような画面の小さい携帯端末での使いやすさを最初に考える方針である。
最後に、PC の広い画面向けの表示へ広げて仕上げる。
小さな画面で何を載せるかを先に決めてから、画面の広い端末向けに表示を広げていく順で設計する。画面が狭く指で操作する条件では、載せる情報を絞り、押す部分を大きくとる必要があるので、その制約を設計の出発点にする。
たとえ小さな旅行かばんに入れる物を先に決めておけば、大きなかばんでは足すだけで済むようなものです。
覚え方first は「最初に・先に」。設計の机に、まず携帯端末の小さな画面を置くと読む。
出題のポイント
レスポンシブWebデザインは、1 つの Web ページのレイアウトを、表示する端末の画面幅に合わせて自動で組み替える作り方である。
端末の種類ごとに別のページを用意するのではなく、同じページの中に画面幅ごとの表示の指定を CSS で書き分けておき、ブラウザが画面幅に合う指定を選んで表示する。例えば、幅の広い画面では横に 3 列並べた写真を、幅の狭い画面では縦 1 列に並べ替える。
たとえ伸び縮みする布で作った服が、着る人の体に合わせて 1 着でなじむようなものです。
覚え方responsive は「すぐに応じる」。画面の幅という合図に、ページが素早く応じて形を変えると覚える。
出題のポイント
| 観点 | モバイルファースト | レスポンシブWebデザイン |
|---|---|---|
| 決め手言葉の種類 | 設計の方針 (考え方) | ページの作り方 (実現の手段) |
| 注目すること | どの端末から先に設計するか | 画面幅に応じてどう表示を変えるか |
リダイレクトは、ある URL にアクセスした利用者を、別の URL のページへ自動的に移す仕組みである。
ブラウザが自動で転送先を開き直し、利用者は新しいページを見る。
Web サーバは、古い URL への要求に対して転送先の URL を返し、ブラウザはそれを受けて自動で転送先を開き直す。ページの置き場所を変えたときに古い URL のリンクやブックマークが使えなくなるのを防いだり、暗号化しない http の URL から暗号化した https の URL へ誘導したりするのに使う。
たとえ引っ越したあとも、旧住所あての郵便を新しい住所へ届けてくれる転送サービスに似ています。
覚え方re (再び) と direct (向ける) で「向け直す」。来た人の行き先を向け直すと覚える。
出題のポイント
この単元の過去問から 5 題
確認問題を解く