2-6-2 スマートフォンにおける 画 面 分 割 と 配 置 画 面 小 同 時 画 面 上 配 置 難 閲 覧 中 操 作 中 画 面 表 示 場 合 合 両 者 切 替 利 用 工 夫 必 要 [1]ドロップダウン 2 6-2 W e b ペ ー ジ 画 面 構 成 画 面 上 部 設 以 外 画 面 使 用 配 置 図. a 下 方 向 滑 込 入 表 示 図. b 項 目 下 位 要 素 書 換 形 階 層 構 造 実 現 可 能 ドリルダウン 要 素 多 階 層 深 場 合 規 模 大 適 手 法 画 面 項 目 数 応 高 変 更 Web 情 報 構 造 柔 軟 対 応 利 点 以 下 解 説 比 着 数 多 欠 点 メニュー コンテンツエリア コンテンツエリア ナビゲーションエリア [a] 画 面 上 部 にメニューを 配 置 [b]ナビゲーションエリアが 滑 り 下 りる 図 2.18 ドロップダウン 配 置 図 [2]スライド *24 ドロワーと もよばれる 画 面 上 部 設 以 外 画 面 使 用 配 置 *24 図. a 画 面 左 側 滑 込 画 面 入 表 示 図. b 042
画 面 画 面 縦 表 示 多 選 択 肢 表 示 利 点 画 面 縦 利 用 項 目 数 少 画 面 間 延 欠 点 似 手 法 階 層 化 情 報 同 格 選 択 肢 提 示 場 合 適 手 法 同 様 着 数 多 欠 点 メニュー [3]タブ コンテンツエリア [a] 画 面 上 部 にメニューを 配 置 図 2.19 スライド 配 置 図 ナビゲーション エリア コンテンツ エリア [b]ナビゲーションエリアがスライドしてくる 画 面 要 素 表 示 特 定 分 類 付 項 目 表 示 手 法 図. 画 面 上 部 領 域 以 外 領 域 場 合 多 階 層 化 情 報 同 格 選 択 肢 提 示 場 合 適 手 法 選 択 肢 一 目 把 握 目 的 画 面 見 移 動 利 点 一 方 項 目 数 多 各 小 視 認 性 操 作 性 下 欠 点 2 6-2 W e b ペ ー ジ 画 面 構 成 タブ タブ A タブ B タブ C タブA タブB タブC コンテンツエリアA コンテンツエリアB [a] 画 面 上 部 にタブを 配 置 図 2.20 タブ 配 置 図 [b]タブに 関 連 付 けられたコンテンツを 表 示 する 043
トーンカーブ ヒストグラム 図 2.40 明 るい 部 分 をより 明 るく, 暗 い 部 分 をより 暗 くし,コントラストを 高 めた 状 態 [4] 彩 度 *44 撮 影 時 条 件 写 真 彩 度 足 補 正 作 業 彩 度 高 場 合 食 品 花 被 写 体 彩 度 高 美 味 見 撮 影 条 件 彩 度 高 場 合 多 *44 画 像 鮮 や かさを 彩 度 という 2 7-2 素 材 制 作 図 2.41 彩 度 を 高 める 前 ( 左 )と 高 めた 後 ( 右 ) [5]レタッチ 写 真 内 被 写 体 消 何 描 加 作 業 レタッ チ *45 街 中 撮 影 写 真 看 板 車 文 字 消 肌 消 行 料 理 写 真 湯 気 泡 増 行 図. 写 真 写 不 要 消 例 *45 現 在 では 写 真 を 加 工 する 作 業 全 般 をレタッチという が, 本 来 はこよう な 作 業 ことを 指 す [a] 元 写 真 [b]クレーンを 消 していく [c]クレーンを 削 除 した 図 2.42 風 景 に 写 っているクレーンを, 周 囲 空 部 分 を 重 ねていくことで 消 す 例 053
[6] 写 真 を 補 正 する 作 業 工 程 解 説 手 法 用 素 材 入 手 写 真 実 際 Web 制 作 使 状 態 補 正 作 業 工 程 解 説 実 際 Web 制 作 現 場 場 合 写 真 補 正 作 業 工 程 行 2 7-2 素 材 制 作 図 2.43 図 2.44 1 元 写 真 素 材 写 真 観 察 明 暗 不 足 彩 度 足 点 確 認 同 時 範 囲 必 要 考 写 真 場 合 全 体 的 写 暗 広 範 囲 写 図. 2トリミングを 行 う 写 真 内 必 要 部 分 使 行 今 回 下 側 空 間 広 空 右 側 隙 間 空 部 分 切 落 図. 3 全 体 的 に 明 るくする 全 体 的 写 暗 解 消 使 明 全 体 明 写 真 印 象 弱 多 段 階 図. 図 2.45 図 2.46 4コントラストを 高 める 用 明 部 分 明 暗 部 分 暗 高 前 段 階 弱 印 象 以 上 強 図. 5 彩 度 を 高 める 4 状 態 悪 鮮 写 真 彩 度 高 彩 度 高 不 自 然 最 小 限 留 図. 054 図 2.47
3-1 HTMLとCSS 基 礎 HTMLとは, 文 書 構 造 を 明 確 に 記 述 するため 言 語 であり,CSSはそ れら 各 構 造 に 対 する 修 飾 を 指 定 するため 言 語 である ここでは,ごく 小 さなHTMLとCSSを 例 にとり,こ2つ 言 語 基 本 的 な 記 述 方 法 に ついて 解 説 する 3-1-1 本 章 を 読 むにあたって 3 1-1 H T M L と C S S 基 礎 * 1 World Wide Web Consortium 略 WWWに 関 する さまざまな 技 術 標 準 化 を 行 う 標 準 化 団 体 である *2 ティム バー ナーズ リーによっ て 開 発 されたオリジ ナ ル HTML か ら 直 接 進 化 したもが HTML4である 一 時 期, 言 語 仕 様 が 肥 大 化 し,ブラウザ 間 で 互 換 性 が 低 下 し てしまった HTML 機 能 を 整 理 し 直 し, 互 換 性 を 改 めて 確 保 するために 策 定 され たもである * 3 HTML 4.01 を XML(Extensible Markup Language) で 定 義 し 直 し, 言 語 仕 様 をより 厳 密 化 したもがXHTML である 基 本 的 に XHTML は HTML 4.01と 互 換 性 をも つように 設 計 されて いるため, 両 者 相 違 は 大 きなもでは ない 電 子 書 籍 デ ータフォーマット 1つであるepubも, XHTMLをベースと している 本 章 Web 制 作 HTML CSS 記 述 方 法 解 説 各 CG-ARTS 協 会 Web 入 手 可 能 入 手 先 目 次 本 書 参 照 Web 表 示 確 認 用 記 述 内 容 確 認 修 正 行 学 習 補 助 用 本 章 読 事 項 留 意 [1] 本 章 で 対 象 とする HTML について chapter HTML CSS 厳 密 明 確 本 章 HTML5 CSS3 解 説 行 HTML Web 間 互 換 性 向 上 各 種 扱 機 能 追 加 PC 表 示 能 力 異 閲 覧 機 器 対 応 多 拡 張 行 W C *1 年 月 日 正 式 仕 様 勧 告 以 前 HTML. *2 XHTML *3 記 述 方 法 両 方 取 入 古 規 格 HTML 記 述 Web 最 新 Web 表 示 不 可 能 学 習 内 容 無 駄 配 慮 区 別 本 書 以 降 話 題 最 新 規 格 HTML 限 定 場 合 HTML 表 記 規 格 限 定 一 般 名 詞 取 上 場 合 HTML 表 記 [2]ダウンロードデータについて 各 本 書 用 学 習 用 資 料 場 合 限 自 由 使 用 古 Web HTML CSS 対 応 存 在 本 章 記 述 内 容 074
試 Web 表 示 場 合 可 能 限 最 新 用 推 奨 [3]ダウンロードデータ 利 用 時 テキストエディタについて 本 章 解 説 HTML CSS *4 文 字 UTF- 改 行 *5 LF UNIX 形 式 用 文 字 改 行 未 対 応 閲 覧 編 集 別 文 字 保 存 *6 文 字 化 改 行 崩 発 生 場 合 3-1-2 文 書 構 造 と HTML Web 基 本 的 HTML HyperText Markup Language CSS Cascading Style Sheets 記 述 HTML 文 書 構 造 CSS 文 書 装 飾 記 述 役 割 分 担 Web HTML CSS 読 込 記 述 指 示 内 容 従 表 示 行 以 降 HTML 記 述 文 書 HTML 文 書 CSS 記 述 文 書 CSS 文 書 HTML 文 書 CSS 文 書 保 存 HTMLファイル CSSファイル 慣 習 的 HTML html CSS css 拡 張 子 HTML 文 書 構 造 記 述 言 語 述 文 書 構 造 何 文 書 構 成 部 品 成 立 文 書 要 素 要 素 階 層 構 造 組 織 化 意 味 応 順 序 文 書 構 造 本 書 各 見 段 落 見 出 写 真 表 図 表 見 出 段 落 図 表 本 書 要 素 要 素 段 落 図 表 類 集 - - - - 項 構 成 項 集 - - 節 構 成 節 集 章 chapter 構 成 階 層 構 造 同 時 各 階 層 構 造 各 要 素 意 味 内 容 応 順 序 並 各 要 素 順 序 階 層 構 造 組 織 化 本 書 HTML 前 述 文 書 構 造 記 述 要 素 * 4 unicode 符 号 化 方 式 1つ Windows,OS X, Linux 系 OS な ど で 幅 広 くサポートされ ている *5 改 行 コードに は,CR(キャリッジ リターン)とLF(ラ インフィード)2 種 類,およびそ 組 み 合 わせがよく 用 い ら れ て い る Windows 標 準 的 な 改 行 コードは CR + LF,OS X や Linux 系 OSではLF が 用 いられている また, 過 去 OSで はCRが 用 いられて いた * 6 3-1-6[2] 記 述 内 容 に 従 って 文 字 エンコーディング 指 定 を 書 き 換 え,そ れと 合 致 した 文 字 コ ードで 保 存 すれば 問 題 はない 3 1-2 H T M L と C S S 基 礎 075
マイクロソフト 許 諾 を 得 て 使 用 し ています 図 4.5 Windows デスクトップ 例 (Windows operating system,c 2016 Microsoft Corporation. All rights reserved.) 4-2-2 アプリケーションソフトウェア アプリケーションソフト *7 OS 連 携 動 作 文 書 制 作 画 像 制 作 Web 制 作 目 的 応 個 別 動 作 表 計 算 HTML Web 制 作 形 式 形 式 画 像 制 作 編 集 行 図. 形 態 提 供 OS 購 入 利 用 同 梱 市 販 販 売 FTP 得 オンラインソフト 無 償 利 用 フリーソフト 有 償 シェアウェア 利 用 者 手 入 比 較 的 安 *7 アプリケーシ ョンソフトは, 単 に アプリとよばれるこ とがある 4 2-2 ソ フ ト ウ ェ ア [a]アプリケーションソフト 例 Adobe Photoshop [b]web ページ 制 作 ソフト 例 Adobe Dreamweaver 図 4.6 アプリケーションソフト 例 135
4-2-3 代 表 的 な CG Webページ 制 作 ソフトウェア 代 表 的 次 元 CG 制 作 Web 制 作 簡 単 紹 介 [1] 代 表 的 な 2 次 元 CG 制 作 ソフトウェア 4 2-3 ソ フ ト ウ ェ ア * 8 GNU プ ロ ジ ェクトが 提 唱 するフ リーソフトウェア ライセンス ソフト ウェアとそれを 使 用 するユーザに, 使 用, 複 製, 変 更, 再 頒 布 など 自 由 を 与 え る GNU とは GNU is Not Unix 頭 文 字 で,GPL で 配 布 さ れるUNIXと 互 換 性 あるソフトウェア 総 称 代 表 的 系 Adobe Photoshop 以 降 Photoshop 系 Adobe Illustrator 以 降 Illustrator 図. 最 幅 広 利 用 Photoshop 形 式 Illustrator 形 式 画 像 扱 可 能 両 者 連 携 写 真 画 像 文 字 制 作 次 元 CG 関 処 理 行 系 G *8 PL 配 布 GIMP 提 供 付 属 提 供 Web 制 作 制 作 機 能 装 備 系 機 能 装 備 [2] 代 表 的 な Web ページ 制 作 ソフトウェア Web 制 作 記 述 意 識 GUI 環 境 作 業 操 作 行 Web 制 作 代 表 的 一 般 向 Adobe Dreamweaver 各 種 CSS 連 携 機 能 有 Web 素 材 制 作 代 表 的 制 作 Aodbe Flash Professional 図. 図 4.7 ドロー 系 ソフト 例 Adobe Illustrator 図 4.8 アニメーション 制 作 ソフト 例 Adobe Flash Professional 136