操作への反応を伝えるフィードバック表示(ホバー・ロールオーバー)を完結させ、画面部品の総称であるGUIを整理したうえで、CSSやモバイルファースト・レスポンシブWebデザイン・リダイレクトといったWeb向けインタフェースの実装技術を学ぶ単元です。多様な画面で使いやすさを実現する考え方として、CSS・レスポンシブの語が試験で問われます。
マウスポインタを要素の上に重ねている状態のこと。
ホバーは、マウスポインタをボタンやリンクなどの上に「重ねた(乗せた)」状態を指します。クリックする前の段階で、利用者がどの要素に注目しているかをシステムが把握できる操作です。 このホバー状態を起点に、色を変えたり説明(ツールチップ)を表示したりして、利用者に反応を返します。試験では、ホバーは『クリックではなくポインタを乗せただけの状態』であり、操作に対する手応えを示すフィードバック表示の起点になる点を押さえます。
たとえ店先で商品を手に取る前に、まず指をかざして「これかな」と狙いを定める動作に似ています。まだ買っていない(クリックしていない)けれど、注目していることが伝わります。
記憶フックホバーといえばポインタを乗せただけの状態
ポインタを重ねたときに要素の見た目が変化する効果のこと。
ロールオーバーは、ホバー状態(ポインタを乗せた状態)になったときに、ボタンの色や画像が切り替わるなど、見た目が変化する効果を指します。ホバーが「乗せている状態」を指すのに対し、ロールオーバーはその結果として起こる「変化(反応)」を指す点が違いです。 この変化によって、利用者は『ここはクリックできる要素だ』『今ここを指している』と直感的に分かります。試験では、操作に手応えを返すフィードバック表示の代表例として、ホバーとセットで理解しておくとよいでしょう。
たとえ自動ドアの前に立つと「いらっしゃいませ」と表示が光るようなもの。近づいた(ホバーした)ことに対して、見た目が変わって反応が返ってきます。
記憶フックロールオーバーといえばポインタを重ねると見た目が変化
アイコンやボタンを画面に表示し、直感的に操作させる方式。
GUI(Graphical User Interface)は、アイコン・ボタン・ウィンドウ・メニューなどの図形を画面に表示し、マウスやタッチで直感的に操作できるようにしたインタフェースの総称です。これまで学んだ画面部品を束ねる考え方です。 文字コマンドを打ち込むCUI(Character User Interface)と対比されます。GUIは初心者でも操作しやすい反面、表示や処理に資源を要します。試験では、GUI=図形で操作、CUI=文字で操作という対比と、GUIが視覚的部品で構成される点がよく問われます。
たとえ券売機のように、絵や写真のボタンを押すだけで注文できる仕組みがGUI。一方、暗証番号や呪文を正確に打ち込む方式がCUIにあたります。
記憶フックGUIといえば図形(アイコン・ボタン)で直感操作
Webページの見た目(色・配置・大きさ)を定義する言語。
CSS(Cascading Style Sheets)は、Webページの文字色・背景・レイアウト・サイズなどの「見た目(デザイン)」を指定するための言語です。文書の中身や構造を記述するHTMLと役割を分担します。 HTMLが『何を表示するか(構造)』を担い、CSSが『どう見せるか(装飾)』を担うという分業が基本です。見た目をCSSにまとめることで、複数ページのデザインを一括変更でき、保守が容易になります。試験では、CSS=見た目の定義、HTML=構造の定義という役割の違いが頻出です。
たとえHTMLが料理の「材料と手順」だとすれば、CSSは「盛りつけと食器選び」。中身は同じでも、CSSを変えるだけで見た目の印象を一新できます。
記憶フックCSSといえばWebページの見た目を定義
スマートフォンなど携帯端末での利用を最優先に考える設計思想。
モバイルファーストは、Webサイトやサービスを設計する際に、PCよりも先にスマートフォンなど画面の小さい携帯端末での使いやすさを優先して考える設計思想です。 スマートフォンからの閲覧が主流になった背景から生まれ、限られた画面で必要な情報を絞り込み、指で操作しやすくすることを重視します。これはあくまで『考え方・方針』であり、それを画面幅に応じて実現する具体的手法がレスポンシブWebデザインです。試験では、モバイルファースト=携帯端末を優先する設計思想という位置づけを押さえます。
たとえ店づくりで、まず一番混雑する小さな入口から考えるようなもの。最も制約の多い条件(小さい画面)に先に合わせておけば、広い場所(PC)には後から余裕をもって広げられます。
記憶フックモバイルファーストといえば携帯端末優先の設計思想
画面幅に応じて表示レイアウトを自動で切り替える実装手法。
レスポンシブWebデザインは、PC・タブレット・スマートフォンなど画面幅(解像度)に応じて、同じページの表示レイアウトを自動的に調整する実装手法です。CSSの記述によって、文字や画像の配置・大きさを切り替えます。 端末ごとに別々のページを用意するのではなく、1つのページで多様な画面に対応できる点が特徴です。モバイルファーストという思想を、CSSで具体的に実現する応用にあたります。試験では、レスポンシブWebデザイン=画面幅に応じて表示を変える手法、という定義が頻出です。
たとえ伸縮する衣類のように、着る人の体格(画面幅)に合わせて1着で自動的にフィットするイメージ。サイズ違いを何着も用意しなくて済みます。
記憶フックレスポンシブWebデザインといえば画面幅に応じて表示を自動切替
アクセスしてきた利用者を別のURLへ自動的に転送する仕組み。
リダイレクトは、利用者があるURLにアクセスしたとき、自動的に別のURLへ転送して目的のページを表示させる仕組みです。サイトの引越し(URL変更)や、HTTPからHTTPSへの誘導などで使われます。 古いアドレスにアクセスが来ても新しいページへ自動で案内できるため、リンク切れを防げます。試験では、リダイレクト=別のURLへ自動転送する画面遷移制御という基本的な意味を押さえておけば十分です。Web実装の補足事項として理解しましょう。
たとえ引越し後に旧住所へ届いた郵便を、郵便局が新住所へ自動で転送してくれるサービスに似ています。古い宛先(URL)でも、ちゃんと新しい場所に届きます。
記憶フックリダイレクトといえば別URLへ自動転送
関連の過去問演習は今後のアップデートで追加予定です。