20220318(2022-03-18)
実技実技試験 練習問題 (PDF)
更新日：
本練習問題と実際の試験実施方法は異なる場合があります。
３級ウェブデザイン技能検定実技試験は次のとおり実施します。
【出題形式】：課題選択方式
【合格基準】：70点以上（100点満点）
練習問題A
dataフォルダのQ1フォルダ内のindex.htmlでブラウザで正しく表示できない状態にあ る画像を、正常に表示できるようにソースを修正しなさい。
修正したindex.htmlファイルなどは、デスクトップのwdフォルダ内にa1という名前で フォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイル を構成に留意して保存しなさい。
HTMLソースの記述に誤りがあり、画像ファイルが表示されない状態になっている。<body> <h1>横浜の最新情報</h1> <h2>春の横浜お勧め観光スポット</h2> <img src="img/img001.jpg" alt="時計台の画像" class=“watch”>- 課題のポイント
- ソースファイルから誤りのある部分を見つけ出し、指示通りのページを作成する。
- ファイル管理、パス及びディレクトリ管理が行えるか。
- 作業のポイント
<!-- コメント：修正コード記載 --> <img src="images/img001.jpg" alt="時計台の画像" class="watch" >
練習問題B
dataフォルダのQ2フォルダ内のindex.htmlのh2要素の下部にある3つのテキストから各ページへのリンクが正常に行われるようにしなさい。その際、HOMEはindex.htmlに、ニュースはnews.htmlに、交通案内はaccess.htmlに、それぞれリンクを設定しなさい。
修正したindex.htmlファイルなどは、デスクトップのwdフォルダにa2という名前でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイルを構成に留意して保存しなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Q2</title> <link href="sample.css" rel="stylesheet" type="text/css"> </head> <body> <h1>横浜の最新情報</h1> <h2>春の横浜お勧め観光スポット</h2> <p>HOME | ニュース | 交通案内</p> <img src="images/clock_tower.jpg" alt="時計台の画像" class=“watch"> <p>4月、横浜の春には恒例になった、大道芸イベントが開催されます。</p> <p>野毛地区、伊勢佐木町、馬車道、みなとみらい地区では様々な大道芸人達の 妙技を見ることができます。</p> </body> </html>- 課題のポイント
- ウェブサイトの基本であるハイパーリンクの設定が正しく行え、かつパス等の設定が 行えるか。
- ウェブサイトのナビゲーションに関わるリンク設定を指示に従い適切に記述する。
- 作業のポイント
<!-- コメント：修正コード記載 --> <p><a href="index.html">HOME</a> | <a href="news.html">ニュース</a> | <a href="access.html">交通案内</a></p>
練習問題C
dataフォルダのQ3フォルダ内のindex.htmlファイルの<div id=“navi”></div>内のナビゲーションを削除して、imagesフォルダ内の最も適切と思われる画像を用い、画像ボタンによるナビゲーションエリアを作成しなさい。修正したindex.htmlファイルなどは、デスクトップのwdフォルダ内にa3という名前でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイルを構成に留意して保存しな さい。
- 課題のポイント
- ウェブサイトのパーツとなる複数のデジタルデータ（画像）から適切なファイルフォーマット、 サイズの素材を選択し、仕様にもとづいて(X)HTMLファイルを修正しナビゲーションエリアを 作成する。
- 適切な画像ファイルの選択とナビゲーションに関わる(Ｘ)HTMLの記述について。
- 作業のポイント
<div id="navi"><a href="#"><img src="images/bt_a1.gif" alt="HOME" /></a> <a href="#"><img src="images/bt_a2.gif" alt="製品紹介" /></a> <a href="#"><img src="images/bt_a3.gif" alt="ダウンロード" /></a> <a href="#"><img src="images/bt_a4.gif" alt="会社案内" /></a> <a href="#"><img src="images/bt_a5.gif" alt="お問合せ" /></a></div> <!-- 以下の要領で文字列を画像に修正だけ。 文字列 → <img src="画像パス" alt="代替文字列" /> -->
練習問題D
dataフォルダのQ4フォルダ内のindex.htmlのbody要素にCSSを使用して、下記の条件の ように背景画像を適用しなさい。
- 左側が暗い色、右側が明るい色のグラデーションになるものを使用する。
- ページの最上部に10pxのグラデーションが表示されるようにする。
- グラデーションは左から右へ、一回だけ設定する。
修正したindex.htmlなどのファイルは、デスクトップのwdフォルダ内にa4という名前 でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイ ルを構成に留意して保存しなさい。
HTMLソースの記述に誤りがあり、画像ファイルが表示されない状態になっている。- 課題のポイント
- ウェブサイトのパーツを組み合わせ、規定の仕様にあわせてレイアウトしウェブサイトを 作成する。
- 作業のポイント
body { background-color: #FFFFFF; margin: 0px; padding: 10px 0px 0px; background-image: url(images/bg1.gif); /* 指定のグラデーションを追加 */ background-repeat: no-repeat; /* 一回だけ指定を追加 */ }
練習問題E
dataフォルダのQ5フォルダ内のsitemap.pdfに従いフォルダを作成し、ファイル等を 移動してディレクトリ構造を完成させ、リンクと画像表示が正常にブラウジングされ るようにしなさい。
デスクトップのwdフォルダ内にa5という名前でフォルダを作成し、ディレクトリ構成 に留意してソースファイル等を保存しなさい。
- 課題のポイント
- 適切なソースファイルの構造をHTMLファイルソースとサイトマップのディレクトリより判断 し、ソースファイルの管理をブラウジングにより行う。
- 適切なソースファイルの作成
- 適切なファイル管理：ウェブサイトのソースファイルが適切なディレクトリに保存されており、かつHTMLの 記述どおりにファイルのパスが管理されているか。
- 作業のポイント
<p><a href="index.html">HOME</a> | <a href="contents/news.html">ニュース</a> | <a href="contents/access.html">交通案内</a></p>
練習問題F
dataフォルダのQ6フォルダ内のsample.cssのファイルを編集して、h2要素に関連する 背景の色を#FFFFFF、文字を#000000に変更しなさい。指定以外の要素は特に変更する 必要はない。
修正したindex.htmlなどのファイルは、デスクトップのwdフォルダ内にa6という名前 でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイ ルを構成に留意して保存しなさい。
- 課題のポイント
- テキストおよび背景に関わる色彩の設定をCSSプロパティの値の変更によりおこなう。
- ウェブサイトを変更したデータにあわせて正しく更新を行う。
- 正しくHTML、XHTML、CSSのコーディング作業がなされているか。
- 作業のポイント
h2 { font-size: 11pt; color: #000000; /* #FFFFFF → #000000 */ line-height: 1.5em; background-color: #ffffff; /* 背景色_白 追加 */ }
学科学科試験 練習問題 (PDF)
更新日：
本練習問題と実際の試験実施方法は異なる場合があります。
３級ウェブデザイン技能検定学科試験は次のとおり実施します。
【出題形式】：筆記試験（マーク方式）・「多肢選択法」「真偽法」形式
【合格基準】：70点以上（100点満点）
Ｑ&Ａ答え：２
ユニバーサルデザイン [ウィキペディア参照]
文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築・製品・情報などの設計のことであり、またそれを実現するためのプロセスである。
Ｑ&Ａ答え：１
埋め込み音声要素_属性 [Mozilla参照]
- controls
- この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
動画埋め込み要素_属性 [Mozilla参照]
- controls
- この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
Ｑ&Ａ答え：１
カスケードと継承_競合するルール [Mozilla参照]
プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。それは大抵の場合、同じ要素に適用される可能性のある 2 つ のルールを作ってしまったことに由来します。カスケードおよび、それと密接に関連する詳細度の概念は、そのような競合が存在する際のメカニズムです。実際に要素をスタイリングしているルールがどれなのかは期待と異なる場合があるため、このメカニズムを理解しておく必要があります。
- 詳細度
- ソースオーダーが重要であるということがわかりました。ある時には、より後ろにあるルールが適用されるはずなのに、競合関係にある前方のものの方が適用されるという状況に出会います。それは前方にあるルールの方がより高い詳細度を持っているためです。より具体的であり、要素をスタイリングするべきものとしてブラウザーによって選択されたのです。
- !important
- これは特定のプロパティと値を最も重要であると指定するもので、カスケードの通常のルールを上書きします。
Ｑ&Ａ答え：２
コンテンツ区分要素 [Mozilla参照]
<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
Ｑ&Ａ答え：２
トロイの木馬 (ソフトウェア) [ウィキペディア参照]
名前の由来の通り、有用な（少なくとも無害な）プログラムあるいはデータファイルのように偽装されていながら、その内にマルウェアとして機能する部分を隠し持っていて、何らかのトリガーによりそれが活動するように仕組まれているファイル等を指す。感染しないものは分類上はコンピュータウイルスではない。毎年いくつかの新種と、膨大な数の亜種が作り出されている。
- 概要
- 悪意ある動作としてひとたび実行されると、被害者の同意を一切得ずに、秘密裏にハードディスク内、もしくはメモリ内に自身を複製、インストールする。また、Windowsに感染するほとんどのトロイの木馬はレジストリを被害者の同意を得ずに、秘密裏に改変、削除、追加する。トロイの木馬は、被害者のネット接続設定やファイアウォールの設定を変更し、攻撃者が指定する任意のポートを開放し、外部からの接続を許可する。これにより攻撃者は被害者のパソコンを乗っ取って様々な被害をもたらす。例としてはキーロギング、プログラムの追加/削除、ファイルの追加/削除、アンチウイルスソフトの無効化、被害者のデスクトップ画面の撮影、パスワードの奪取、ウェブからの悪意あるプログラムのダウンロードなどがある。
- 感染経路
- トロイの木馬は、その性質上、まずは被害者にプログラムを実行してもらう必要がある。当然、一見して危険を察知されるような怪しげなファイル名や、アイコンは（当然）回避される。そして例えば、動画の再生コーデックのインストーラ、アンチウイルスソフトウェア、メディアプレーヤーなどの名に偽装し、被害者にダウンロード及びインストールを促す。
ワーム (コンピュータ) [ウィキペディア参照]
ワーム（英：Worm）とは、独立したプログラムであり、自身を複製して他のシステムに拡散する性質を持ったマルウェアである。宿主となるファイルを必要としない点で、狭義のコンピュータウイルスとは区別される。しかし、ネットワークを介して他のコンピュータに伝染していく点では共通しており、同一視されることもある。
- ほかのマルウェアとの区別
- 初めてウイルスを定義したコンピュータ科学者のフレッド・コーエンは、他のファイルに感染することで増殖するものをウイルスとしており、RFC1983もその定義に従ってワーム単体をウイルスに含めていない。
- 歴史
- SF作家のジョン・ブラナーが、1975年の未来予測小説『衝撃波を乗り切れ（英語版）』(The Shockwave Rider) で用いたtapewormが語源となっている[2]。作中でのtapewormは、ネットワークへ送り込まれて自己増殖、複製するプログラムで、専制的な政府が管理するネットワークを破壊するために作られた。実際に機能した初のワームは、1988年のモリスワームだった。モリスワーム自体はシステムの破壊を目的としたものではなかったが、ネットワークの脆弱性を利用して拡散し、多数のシステムで過負荷を引き起こした。その後も新種のワームが生み出され、被害が出続けている[3]。
Ｑ&Ａ答え：１
「情報機器作業における労働衛生管理のためのガイドラインの概要*（パンフレット）」［PDF形式：718KB］ [厚生労働省参照]
以下の画像・テキストは、厚生労働省サイトから引用し、加工した物です。
情報機器による健康障害を予防しましょう-1
５ 健康管理（１）
＜健康診断＞
事業者は、次に該当する作業者に対し、情報機器作業に係る健康診断を行ってください。- ディスプレイやキーボードを常時使用する情報機器作業を１日に４時間以上
- 疲れたときに適宜休憩や作業姿勢の変更が困難な情報機器作業を１日に４時間以上
- 上の２つの作業が１日に４時間未満だが、眼や肩の痛みなどの症状がある人
- 考えながら文書を作成したり、企画・立案を行う業務、経理、庶務業務な
情報機器による健康障害を予防しましょう-2
５ 健康管理（２）
＜健康相談＞
事業者は、健康相談の機会を設けるよう努めましょう。- メンタルヘルス
- 健康上の不安
- 慢性疲労
- ストレス等による症状
- 自己管理の方法など
＜職場体操＞
- 体操、ストレッチ、リラクゼーション、軽い運動等を行いましょう。
- 小休止や作業休止中のストレッチは、肩の疲れを防ぎます。
厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策「「情報機器作業における労働衛生管理のためのガイドラインの概要（パンフレット）」［PDF形式：718KB］」（厚生労働省）（https://www.mhlw.go.jp/content/11300000/000546922.pdf）（2022-08-06利用）を加工して作成
Ｑ&Ａ答え：２
Portable Network Graphics [ウィキペディア参照]
Portable Network Graphics（ポータブル・ネットワーク・グラフィックス、PNG、ピング、ピン[1]）はコンピュータでビットマップ画像を扱うファイルフォーマットである。圧縮アルゴリズムとしてDeflateを採用している、圧縮による画質の劣化のない可逆圧縮の画像ファイルフォーマットである。
1996年に登場し、可逆圧縮の画像フォーマットとして既に普及していたGIFの後継フォーマットとなることを目指し、ネットワーク経由での使用を想定した機能や透過処理など、多くの機能をサポートした。ウェブブラウザやグラフィックソフトでのサポートも進み、インターネットを中心に普及した。
Graphics Interchange Format [ウィキペディア参照]
Graphics Interchange Format（グラフィックス・インターチェンジ・フォーマット、略称GIF）とはCompuServeのPICSフォーラムで提唱された画像ファイルフォーマットの一つ。LZW特許を使用した画像圧縮が可能。一般的に用いられている拡張子は.gif。「ギフ[1]」または「ジー・アイ・エフ」と読まれることもあるがOxford Dictionaries USA Word of the Year 2012 に "GIF" が選出された際のインタビューにおいて設計者のスティーブ・ウィルハイトは「jif（ジフ）」が正しい読み方と述べている[2]。
- 特徴
- GIF規格には1987年6月15日に公開されたGIF87aと1990年7月30日に公開されたGIF89aの2種類があり、GIF89aでは、透過GIFとGIFアニメーションがサポートされた。
透過方法の指定 [ウィキペディア参照]
半透明にしたい部分に、透過色と半透明にしたい色とを交互に置くことで擬似的に実現する方法がある。GIFの透過にはこの手法が用いられている。
Ｑ&Ａ答え：２
画像埋め込み要素_属性 [Mozilla参照]
Ｑ&Ａ答え：２
アクセシビリティとは* [ウェブアクセシビリティ基盤委員会参照]
さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
WCAG 2.1 関連文書 更新のお知らせ (2022年7月5日)- WCAG 2.0関連翻訳文書
JIS X 8341-3とは* [ウェブアクセシビリティ基盤委員会参照]
ウェブアクセシビリティという品質を確保する際の拠り所となるガイドラインは、ウェブ技術の標準化団体であるW3Cの定めたものから企業が独自に制定するものまで多種多様ですが、JIS規格として制定されたのが規格番号JIS X 8341-3、規格名称「高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス―第3部：ウェブコンテンツ」です。
2004年6月に制定されたJIS X 8341-3は、2010年8月、ウェブアクセシビリティの事実上の国際標準であるW3Cの発行したWeb Content Accessibility Guidelines（WCAG）2.0と協調するよう改正されました。その後、2012年には WCAG 2.0 がそのまま国際規格ISO/IEC 40500:2012となり、2016年3月には、JIS X 8341-3もISO/IEC 40500:2012との一致規格として改正されました。
これにより、WCAG 2.0、ISO/IEC 40500:2012、JIS X 8341-3:2016の3つが全て技術的に同じ内容になり、W3Cの勧告、国際規格のISO、国内規格のJISが完全に統一されることになります。
Ｑ&Ａ答え：１
HTTP 403 [ウィキペディア参照]
HTTP 403、またはエラーメッセージ Forbidden（「閲覧禁止」「禁止されています」の意）は、HTTPステータスコードの一つ。ページが存在するものの、特定のアクセス者にページを表示する権限が付与されず、アクセスが拒否されたことを示すもの。また、サイトの制作者側の設計ミスによる障害やサイトが非常に混雑している時、URLが間違っている場合にも表示されることがある。 重要
- 403 Forbidden
- 禁止されている。リソースにアクセスすることを拒否された。リクエストはしたが処理できないという意味。アクセス権がない場合や、ホストがアクセス禁止処分を受けた場合などに返される。
Ｑ&Ａ答え：１
文字列の中央揃え要素 [Mozilla参照]
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
このタグは HTML 4 (および XHTML 1) で非推奨要素に指定され、 CSS の text-align プロパティを <div> 要素に適用するか、それぞれの <p> 要素に適用する方式が採用されました。ブロックを中央揃えするには、別な CSS プロパティである margin-left および margin-right など用いて、値を auto に設定してください（または、 margin を 0 auto に設定してください）。
<center> は HTML の要素で、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示するブロックレベル要素です。コンテナーはふつう <body> ですが、必ずしもそうとは限りません。
Ｑ&Ａ答え：１
Cascading Style Sheets, level 3 (CSS3) [ウィキペディア参照]
CSS3 以降では CSS 2.1 を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。
Ｑ&Ａ答え：３
フォント_デフォルトフォント [Mozilla参照]
デフォルトフォント
CSS はフォントの5つの総称名を定義しています: セリフ（
serif）、サンセリフ（sans-serif）、等幅（monospace）、筆記体（cursive）、ファンタジー（fantasy）。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の最悪のシナリオを表します。serif、sans-serif、およびmonospaceはかなり予測可能であり、妥当なものを提供するはずです。 その一方で、cursiveやfantasyはそれほど予測できないので、慎重に使用してテストすることをお勧めします。5つの名前は次のように定義されています。
width:20rem 用語 定義 例 serifセリフ（いくつかの書体のストロークの終わりに見られる隆起やその他の細部）を持つフォントです。 My big red elephant sans-serifセリフがないフォントです。 My big red elephant monospaceすべての文字が同じ幅を持つフォントで、通常はコードリストで使用されます。 My big red elephant cursive流れるような連続したストロークで、手書き文字を模倣することを目的としたフォントです。 My big red elephant fantasy装飾的なフォントです。 My big red elephant Ｑ&Ａ答え：２
Apache HTTP Server [ウィキペディア参照]
Apache HTTP Server（アパッチ エイチティーティーピー サーバ）は、Apache License2.0の条件でリリースされるフリーでオープンソースのクロスプラットフォームのWebサーバソフトウェアである。Apache はApacheソフトウェア財団の支援のもと、開発者のオープンコミュニティによって開発・保守されている。
Ｑ&Ａ答え：４
加法混合 [ウィキペディア参照]
色を表現する媒体のうち、様々な色の発光体を組み合わせて観る者の方へ放つことで色刺激を起こすものは、加法混合を使用して色を作っている。この場合、典型的に使われる原色は赤 (Red) ・緑 (Green) ・青 (Blue) の三色である。
白色の光を合成する為の波長を「光の三原色」や「色光の三原色」と言い、下記の三色を用いる。
Ｑ&Ａ答え：４
著作権 [ウィキペディア参照]
著作権（ちょさくけん、英語: copyright、コピーライト）は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい、創作した者を著作者という。知的財産権の一種。
Ｑ&Ａ答え：４
強い重要性要素 [Mozilla参照]
HTML の強い重要性要素 (<strong>) は、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。
Ｑ&Ａ答え：３
順序付きリスト要素 [Mozilla参照]
<ol> は HTML の要素で、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。
Ｑ&Ａ答え：１
link_メディアクエリーのついた条件付きのリソース読み込み [Mozilla参照]
以下のように、メディア種別やクエリーを media 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">Ｑ&Ａ答え：１
SEO [Mozilla参照]
SEO (Search Engine Optimization, 検索エンジン最適化)は、検索結果上であるウェブサイトをより目立たさせるための過程です。検索ランキングの改善とも言えます。
検索エンジンはページからページへリンクをたどりながらウェブをクロールし、見つけたコンテンツをインデックスに登録します。検索をしたときに、検索エンジンはインデックスに登録されたコンテンツを表示します。クローラーには従うルールがあります。ウェブサイトのために SEO をする時に、そのルールに近づければ、そのサイトに検索結果の上位に上げる機会を与えることが可能になり、トラフィックと（eコマースと広告の場合）収益が向上する可能性があります。
Ｑ&Ａ答え：４
ディレクトリー要素 [Mozilla参照]
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
<dir> は HTML の要素で、ユーザーエージェントが適用するスタイルやアイコンを用いて表示する、ファイルやフォルダーのディレクトリーのコンテナとして使われます。この要素は廃止されたので使わないで下さい。代わりに、ファイル一覧を含め、一覧には <ul> 要素を使用してください。
Ｑ&Ａ答え：２
CMS [Mozilla参照]
CMS (Content Management System, コンテンツ管理システム) とは、ユーザーに色々な種類のコンテンツ (テキストだけでなく組み込み画像、動画、音声、インタラクティブなコードも) の発行、編集、変更、削除ができるようにするソフトウェアです。
Ｑ&Ａ答え：４
フォーム要素 [Mozilla参照]
<form> は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
DOM [Mozilla参照]
DOM (Document Object Model) とは、すべての HTML または XML 文書を表現・操作する API です。 DOM はブラウザーで文書構造をノードのツリーとして読み込み、それぞれのノードを文書の一部 (例えば要素、テキスト文字列、コメント) として表します。
DOM は文書内のすべてのノードにアクセスし操作するためにコードをブラウザー内で実行することができるので、ウェブ上で最も使用されいる API のひとつです。ノードの生成や移動、変更が可能です。イベントリスナーをノードに追加し、特定のイベントの発生時に実行させることもできます。
Ｑ&Ａ答え：３
パンくずリスト [ウィキペディア参照]
パンくずリスト（breadcrumb list）は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
Site map (サイトマップ) [Mozilla参照]
サイトマップは、ウェブサイトのページの一覧です。サイトのページの構造化された一覧は、検索エンジンの最適化に役立ち、検索エンジンなどのウェブクローラーが辿るためのリンクを提供します。また、サイトマップは、サイトのコンテンツの概要を一目で確認できるため、ユーザーのサイトナビゲーションにも役立ちます。
Ｑ&Ａ答え：２
情報機器作業における労働衛生管理のためのガイドラインについて(PDF) [厚生労働省参照]
パーソナルコンピュータ等情報機器を使用して行う作業における労働衛生管 理については、平成 14 年４月５日付け基発第 0405001 号「VDT 作業における労 働衛生管理のためのガイドラインについて」（以下「VDT ガイドライン」という。） により、関係事業場に対して指導を行ってきたところである。
- 照明及び採光
- 室内は、できる限り明暗の対照が著しくなく、かつ、まぶしさを生じさ せないようにすること。
- ディスプレイを用いる場合の書類上及びキーボード上における照度は 300 ルクス以上とし、作業しやすい照度とすること。また、ディスプレイ画面の明るさ、書類及びキーボード面における明る さと周辺の明るさの差はなるべく小さくすること。
- ディスプレイ画面に直接又は間接的に太陽光等が入射する場合は、必要 に応じて窓にブラインド又はカーテン等を設け、適切な明るさとなるよ うにすること。
- 間接照明等のグレア防止用照明器具を用いること。
- その他グレアを防止するための有効な措置を講じること。
「情報機器作業における労働衛生管理のためのガイドライン」を策定しました(PDF) [厚生労働省参照]
このガイドラインは、パソコンなど、情報機器を使って作業を行う労働者の健康を守るためのガイドラインです。
情報機器作業による労働者の心身の負担を軽くし、支障なく働けるようにするため、事業者が講ずべき措置をまとめています。
