応用情報技術者試験 過去問 2010年（平成22年） 秋期 午後 問8
Cascading Style Sheets (CSS) を用いた Web システムの設計
E 社は、Web を使ってセミナやシンポジウムの情報を社外に提供し、申込みを受け付けるシステムを開発することになった。F 君は、この Web システムを開発する際の画面の標準化を担当している。統一感のある画面、ユニバーサルデザインを会社の方針としているので、この方針に沿った標準化を行う。
Web 画面の構成
F 君は、Web ページの構造を図1、ページのレイアウトを図2 のように設計した。
タイトル、ガイド部分には共通項目が多く、開発者が個別に作成しても統一感を失わないように、CSS を用いることにした。CSS を用いた場合の役割分担の考え方に従い、XHTML にはa、CSS にはbを記述する。図3 に、画面形式 A の例であるホーム画面のイメージを示す。
Web ページの作成基準書
F 君は、統一感を保つために、CSS の利用を考慮した Web ページの作成基準書を作成した。作成基準書の抜粋を項目(1)～(13)に示す。
- ポップアップウィンドウは、元の画面が遷移しない場合に限定して利用すること。
- 一覧表の行数は 25 件までとし、"次ページ"、"前ページ" の表示でガイドすること。
- 日付、時刻の形式は次のとおり統一すること。
日付：YYYY-MM-DD、時刻：hh:mm:ss - 見出しには h1～h6 のいずれかの要素を用いること。
- 段落の記述には p 要素を用いること。
- 箇条書には ul、c要素を用いること。
- XHTML 及び CSS の文字エンコード方式には UTF-8 を用いること。
- table 要素は、表を作成するときだけに用い、レイアウトに用いないこと。
- ①表のネストを行わないこと。
- ②画像を用いる場合は、Web ページの読上げソフトに対応すること。
- 非表示属性を指定した入力項目を利用して、セッションの引継ぎを行わないこと。
- 画像を用いる場合は、表1 に示すイメージの選択基準に従うこと。
- 複数の異なる 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;}
出典：平成22年度 秋期 応用情報技術者試験 午後 問8