応用情報技術者 2010年 秋期 午後 問08

解答の論理構成

1. CSSが詳細を規定している要素を探す
   図4には
   • h1～h6
   • p
   • #menu c と c（インライン指定）
     があり、見出し・段落・箇条書きの項目がスタイル指定されています。
2. 作成基準書でこれらの要素が言及されている箇所を照合
   【問題文】抜粋
   • (4)「見出しにはh1～h6のいずれかの要素を用いること。」
   • (5)「段落の記述にはp要素を用いること。」
   • (6)「箇条書きにはul、c 要素を用いること。」
3. 他の項目を確認
   (1)～(3)、(7)～(13) はdiv、ul、li以外のスタイル、またはコンテンツ規約・運用規約であり、図4のCSSで直接スタイルが与えられていません。
4. よってCSSにより「詳細が具体的に規定されている」項目は
   (4)、(5)、(6) となります。

誤りやすいポイント

• div#sub、div#mainなどを見て (8)「table要素は…レイアウトに用いない」と誤結び付けをする。div用のCSSが記載されていても、(8) はtableについての運用ルールであり対象外です。
• 「リスト＝ulと連想 → (6) はulだけ」と誤解し、c（li）が図4で指定されていることを見落として不正解になる。
• @charset行を見て (7)「UTF-8を用いること」を選びたくなるが、(7) はエンコーディング規約であってスタイル指定ではない。

FAQ

解答の論理構成

1. 【問題文】には
   “CSSを用いた場合の役割分担の考え方に従い、XHTMLにはa、CSSにはbを記述する。”
   とあります。
   • “役割分担”はW3Cが推奨する「構造と表現の分離」のことです。
   • XHTMLが担うのはコンテンツの意味・階層＝“情報とその構造”。
   • CSSが担うのはレイアウト・色・サイズ＝“表現の指定”。
     よって
     • a＝“情報とその構造”（解答群「カ」）
     • b＝“表現の指定”（解答群「ケ」）
2. 【問題文】(6) には
   “箇条書きにはul、c要素を用いること。”
   とあります。
   • ul要素の子要素として使うのはHTML仕様でli要素のみ。
     よって
     • c＝“li”（解答群「ウ」）

誤りやすいポイント

• 「構造＝テーブル」と早合点し、aに「ク」を選ぶ誤答。テーブルはレイアウトでは推奨されず、構造化の一般原則とは別概念です。
• “表現”をデザイン工程の「設計」と結び付け、bに「キ」を選ぶケース。CSSが担うのは具体的なスタイル指定であり、工程名ではありません。
• 箇条書きでdt/ddと混同し、cを「ア」（div）にしてしまうミス。divは汎用ブロック要素で箇条書きの項目ではありません。

FAQ

解答の論理構成

1. 表1の d の行を確認
   • 【問題文】「フルカラーに対応する形式と、256色に対応する形式がある。画像を劣化させない圧縮方式であり、JPEGに比べて容量が大きくなる。アルファチャンネルに対応しているので、透明が表現できる。」
   • キーワードは
     • 「画像を劣化させない圧縮方式（ロスレス）」
     • 「アルファチャンネルに対応しているので、透明が表現できる」
     • 「フルカラー又は256色」
   • これらを同時に満たす画像形式はPortable Network Graphics ――すなわち「PNG」です。
   • よって d = PNG。
2. CSSの @charset "e"; を決定
   • 作成基準書(7)に「XHTML及びCSSの文字エンコード方式にはUTF-8を用いること。」と明記されています。
   • したがって @charsetに指定すべき値は「UTF-8」です。
   • よって e = UTF-8。

• d：PNG
• e：UTF-8

誤りやすいポイント

• 「256色」という語だけでGIFと早合点する。GIFは確かに256色だが、フルカラーやアルファチャンネルを扱えないため条件に合わない点を見落としやすいです。
• PNGもGIFもロスレスだが、問題文は「フルカラーに対応」「アルファチャンネル」と追加条件を示していることに注意が必要です。
• @charsetにShift_JISやEUC-JPを入れてしまうミス。設計基準書(7)を必ず参照しましょう。

FAQ

解答の論理構成

1. 問題文の確認
   • 作成基準書では「(9) ①表のネストを行わないこと。」と指示しています。
   • 併せて「(10) ②画像を用いる場合は、Webページの読上げソフトに対応すること。」とあり、ユニバーサルデザインへの配慮が方針です。
2. ネストした表がもたらす技術的な影響
   • ネストするとブラウザはセルごとに再計算・再描画を繰り返すため、構造が複雑になるほど「画面表示完了までの時間が長くなる場合がある」──選択肢「ウ」。
   • 表は行・列の順序で読み上げられるため、入れ子にするとDOM上の巡回順と視覚的な読み取り順が食い違い、「読上げソフトで、想定する読上げ順と違いが生じる場合がある」──選択肢「エ」。
3. 不適切となる選択肢の検証
   • 「ア：CSSで表を定義すると、固定的な表となるから」
     → (9) はそもそも“ネスト”を禁止しており、CSSで定義するか否かは関係ありません。
   • 「イ：XHTMLで定義できないから」
     → XHTMLでも の入れ子は文法上許可されています。
   • 結論
     • 上記より、正しい理由は「ウ、エ」です。

   誤りやすいポイント

   • 「表をレイアウト目的で使わないこと(8)」と「表のネストを行わないこと(9)」を混同し、レイアウト禁止＝ネスト禁止と短絡してしまう。
   • XHTMLだからネストできないと誤解し、選択肢「イ」を選ぶ。HTML4／XHTML1.0いずれもネストは可能です。
   • CSSの利便性だけで判断し、「ア」を選びがち。ネスト禁止はパフォーマンスとアクセシビリティの観点が主眼です。

   FAQ

   Q: 1段だけの
   であればレイアウトに使っても良いですか？
   A: 作成基準書の「(8) table要素は、表を作成するときだけに用い、レイアウトに用いないこと。」に反するため不可です。データ表現のみに限定します。
   Q: アクセシビリティを確保するなら代替手段は？
   A: CSSのdisplay:gridなどを利用して視覚的な配置を行い、論理構造は見出し・段落・リスト要素で表現すると読上げ順の制御が容易です。
   Q: 表をネストすると必ず遅くなりますか？
   A: 小規模なら差は感じにくいものの、大量の入れ子はレイアウト計算と再描画が増え、特にモバイル端末やスクリーンリーダーで体感遅延が発生しやすくなります。

   ---

   関連キーワード: CSS, XHTML, テーブルレイアウト、アクセシビリティ、レンダリング速度

解答の論理構成

1. まず、【問題文】には下線②として
   　　②画像を用いる場合は、Webページの読上げソフトに対応すること
   　と明記されています。Webページ読上げソフト（スクリーンリーダー）に対応するには、画像ファイルに対して代替テキストを示すalt属性の付与が必須です。
2. XHTMLのimg要素で音声読み上げに必要な情報を与える手段はalt="…" だけです。align、low src、typeなどは代替テキストを指定する属性ではありません。
3. 解答群を確認すると
   　イ：
   　だけがalt属性を正しく持っています。
4. 以上より、下線②の条件に合致する記述は【解答群】の「イ」と判断できます。

誤りやすいポイント

• alignを代替テキスト用だと誤解する
  alignは配置指定であり、スクリーンリーダーの読み上げ内容には関係しません。
• low src（一部ブラウザでサポートされていた低解像度画像指定）やtype属性を使用してしまう
  どちらも代替テキストではなく、現在のXHTMLでは一般的に使いません。
• altを空にすると情報が伝わらない
  装飾目的なら空でも許容されますが、本設問の画像はイベントの写真アイコンなので内容説明を省略すべきではありません。

FAQ

解答の論理構成

1. 外枠の横幅を確認
   CSS定義に
   div#wrapper{width:840px;}
   とあるので、全体幅は 「840px」 です。
2. main領域の横幅を確認
   同じくCSSに
   div#main{float:right;width:636px;…}
   とあり、main領域の幅は 「636px」 です。
3. subとmainの間隔を確認
   図3にsubとmainの間隔が 「12px」 と明示されています。
4. sub領域の計算
   sub領域はwrapperの残り幅で構成されるので
   $840-636-12=192$
   よってdiv#subに設定すべき幅は 「192px」、数値部分は 192 となります。

誤りやすいポイント

• wrapper幅とmain2幅（どちらも「840px」）を混同し、差し引き計算を忘れる。
• 図中の「12px」をmarginと誤解し、左右両側に取ってしまい $840-636-12\times 2$ としてしまう。
• pxを含めて回答して減点される。設問は「数値」を要求している。

FAQ

解答の論理構成

1. 会社の方針として「統一感のある画面、ユニバーサルデザイン」を掲げています。これは【問題文】の「統一感のある画面、ユニバーサルデザインを会社の方針としている」という一文から明らかです。
2. しかし、HTML／CSSはユーザ側の閲覧環境によって解釈や描画が異なります。基準書(13) では「複数の異なるWebページ表示環境を使って、実際の表示内容を確認すること。」と明示し、環境差異があることを前提にしています。
3. もしブラウザごとの差異を確認しなければ、同じCSSでもレイアウト崩れやフォントサイズの違いが生じ、1. の方針を守れません。
4. よって、作成基準書に項目(13)を設ける理由は「使用するブラウザによって、表示のされ方に相違があるから」となります。

誤りやすいポイント

• 項目(13)を単なる動作確認手順と捉え、ブラウザ差異の問題に言及しない。
• ユーザビリティやアクセシビリティ全般を理由に挙げ、具体的な「表示のされ方」の違いを明示しない。
• 固定幅レイアウトだから環境差は無いと誤解し、確認作業を軽視する。

FAQ