ユーザインタフェースの設計と開発

まずはじめに、ユーザインタフェースの設計と実装をおこないます。
ユーザインタフェースはHTML, CSS, JavaScriptといった技術を使用して実装をおこないます。

UI概要

HTML(HyperText Markup Language) は画面の構成を定義するためのマークアップ言語です。
この言語を使って画面上にどのような要素(文字、画像など)が配置されるのかを定義します。

CSS(Cascading Style Sheet) は画面のデザインを定義するための言語です。
HTMLで定義された要素に対して、文字色、背景色、境界線などの情報を定義します。

JavaScript は画面の動的な挙動を定義するためのスクリプト言語です。
HTMLで定義された要素に対して、イベント発生時(ロード完了、クリックなど)の挙動を定義します。

このセクションでは、これらの技術を利用して、各画面を記述していきます。

ログイン画面・一覧画面の記述

ログイン画面・一覧画面の記述を通して、HTML、CSS、JavaScriptの基礎を学習しましょう。
以下の作業を順番におこなってください。

  1. HTMLの記述
  2. CSSの記述
  3. JavaScriptの記述


演習:他の画面の記述

ログイン画面の作成作業を参考に、他の画面を記述してみましょう。

演習:他の画面の記述