2010年 秋期 応用情報技術者試験 問8
Cascading Style Sheets (CSS) を用いた Web システムの設計
E 社は、Web を使ってセミナやシンポジウムの情報を社外に提供し、申込みを受け付けるシステムを開発することになった。F 君は、この Web システムを開発する際の画面の標準化を担当している。統一感のある画面、ユニバーサルデザインを会社の方針としているので、この方針に沿った標準化を行う。
[Web 画面の構成]
F 君は、Web ページの構造を図1、ページのレイアウトを図2 のように設計した。
タイトル、ガイド部分には共通項目が多く、開発者が個別に作成しても統一感を失わないように、CSS を用いることにした。CSS を用いた場合の役割分担の考え方に従い、XHTML にはa、CSS にはbを記述する。図3 に、画面形式 A の例であるホーム画面のイメージを示す。
(2) 図2 に示す表示形式の画面形式B
(4) タイトル部分のメニューは全画面で共通
図3 ホーム画面のイメージ
F 君は、統一感を保つために、CSS の利用を考慮した Web ページの作成基準書を作成した。作成基準書の抜粋を項目(1)～(13)に示す。
(1) ポップアップウィンドウは、元の画面が遷移しない場合に限定して利用すること。
(2) 一覧表の行数は 25 件までとし、"次ページ"、"前ページ" の表示でガイドすること。
(3) 日付、時刻の形式は次のとおり統一すること。
日付：YYYY-MM-DD、時刻：hh:mm:ss
(4) 見出しには h1～h6 のいずれかの要素を用いること。
(5) 段落の記述には p 要素を用いること。
(6) 箇条書には ul、c要素を用いること。
(7) XHTML 及び CSS の文字エンコード方式には UTF-8 を用いること。
(8) table 要素は、表を作成するときだけに用い、レイアウトに用いないこと。
(9) ①表のネストを行わないこと。
(10) ②画像を用いる場合は、Web ページの読上げソフトに対応すること。
(11) 非表示属性を指定した入力項目を利用して、セッションの引継ぎを行わないこと。
(12) 画像を用いる場合は、表1 に示すイメージの選択基準に従うこと。
(13) 複数の異なる Web ページ表示環境を使って、実際の表示内容を確認すること。
| 種類 | 色数 | 利用目的 | 特徴 |
|---|---|---|---|
| d | フルカラー又は 256 色 | ロゴ、タイトル、マーク など | フルカラーに対応する形式と、256 色に対応する形式がある。画像を劣化させない正確な圧縮方式で圧縮でき、JPEG に比べて容量が大きくなる。アルファチャンネルに対応しているので、透明が表現できる。 |
| JPEG | フルカラー | 写真 | 画像全体を小さなエリアに分割して、色を平均化することで画像を圧縮している。元の画像に完全には復元することができない。ほかの形式に比べて容量が小さくなるので、高解像度の写真などに適している。 |
| GIF | 256 色 | 簡易なアニメーション | 画像を劣化させないが、色数が制限されるので写真には適さない。簡易なアニメーションの作成が可能である。 |
F 君は、標準として提供する CSS の定義を図4 のように作成した。
@charset "e"; div#wrapper{width:840px;} div#main{float:right;width:636px;background-color:lightcyan;} div#main2{float:right;width:840px;background-color:lightcyan;} div#sub{float:left;width:fpx;background-color:blanchedalmond;} #menu ul{margin:0px 0px 1em;padding:0px;list-style:none;} #menu c {display:inline;padding-right:1em;padding-left:1em;} h1{font-size:1.2em;} h2{font-size:1.1em;} h3{font-size:1em;} h4{font-size:0.9em;} h5{font-size:0.8em;} h6{font-size:0.7em;} p{font-size:0.9em;} c {font-size:0.9em;}
図4 CSS の定義