Web_Creator

科目

単元

項目

主な内容

スタン
ダード
実技

エキス
パート
実技

エキス
パート
知識

Webデザインの基礎知識

 

ビジュアルデザインの技法

 

グリッドデザイン

 

 

縦横比(黄金比、白銀比)

 

 

グループ化、規則化

 

 

シンメトリー

 

 

カラー

 

色の三原色

 

 

HSB(色相・彩度・明度):色の三属性

 

 

カラースキーム

 

 

トーン

 

 

配色パターン

 

 

文字関連

 

ジャンプ率

 

 

カーニング

 

 

禁則処理

 

 

タイポグラフィ

 

ゴシック体と明朝体(セリフとサンセリフ)

 

 

Web Fonts

 

 

アンチエイリアス

 

 

ClearType

 

 

Webページ制作の前提知識

 

ファイル名

 

使ってよい文字

 

0-9、a-z、A-Z

 

 

ハイフン、アンダースコア

 

 

拡張子

 

html、htm

 

 

制作前の確認事項

 

サイトの構成

 

ファイル構成(ディレクトリー設計、ファイル名、キーワード、title)

 

 

サイトマップ

 

 

お問い合わせ、プライバシーポリシー

 

 

対象となるブラウザー

 

主要なブラウザーと最新バージョン

 

 

レンダリングエンジン、ベンダー

 

 

モニターサイズ(XGA、SXGAなど)

 

 

ドメイン

 

URLの仕組み

 

 

プロトコル

 

 

カラー

 

RGBとCMYK

 

 

Webのカラー指定

 

 

16進数(HEXカラー):3桁/6桁

 

 

Webセーフカラー

 

 

画像

 

Webで使われる画像形式

 

ビットマップ:GIF/JPEG/PNG

 

 

それぞれの特徴

 

 

ベクトル:SWF/SVG

 

 

代替テキスト

 

 

動画、リッチコンテンツ

 

ファイル形式(よく使われているプラットフォーム、サービス)

 

FLV(Flash Video)

 

 

MOV(QuickTime)

 

 

WMV(Windows Media)

 

 

MPEG4

 

 

ユーザビリティとアクセシビリティ

 

ユーザビリティ

 

フォントサイズ

 

 

リンク

 

 

Flash

 

 

検索性

 

 

フォーム、EFO(フォーム最適化)

 

 

アクセシビリティ

 

ガイドラインの種類(WCAG、WebJIS、WAI-ARIA)

 

 

画像への代替テキスト

 

 

音声コンテンツ、動画コンテンツへの配慮

 

 

好ましくないマークアップ(「期 日」など)

 

 

検証方法:
読み上げブラウザー、カラー・コントラスト・アナライザー、Illustrator/Photoshop CS4以降のソフトプルーフ(色の校正)

 

 

Webページ制作の基本知識

 

HTML/XHTML

 

要素、属性

骨格(html要素=head要素+body要素)

ドキュメントタイプ

XML宣言

文字コード

ページタイトルの付け方

トップページと下層ページ

meta要素(keyword/description)

 

 

マークアップ

 

主なブロックレベル要素①:
見出し(h1-h6)、段落(p)、リスト(箇条書きリスト(ul/li)、番号付きリスト(ol/li))、テーブル(基本(table/tr/td)、見出しセル(th))、フォーム(テキストボックス、テキストエリア、ボタン、label要素)、汎用要素(div、span)、連絡先・著作権情報(address)

主なブロックレベル要素②:
リスト(定義型リスト(dl/dt/dd))、テーブル(scope設定、セルの結合)、フォーム(ラジオボタン、チェックボックスなど)、引用(blockquote)

 

主なインライン要素:
a(リンク)、br、img、span

id/class:
よく使うid/class属性の値

リンク

 

相対パス

絶対パス(サイトルートから)

target属性

 

 

title属性

メールアドレスへのリンク(基本的には非推奨)

リンクチェック

画像内のリンク(クリッカブルマップ)

 

 

文字参照

 

 

XHTML

 

XHTMLの記法

CSS

 

基本

 

CSSのバージョン

CSSの構文(CSSルール、セレクター、宣言)

プロパティ

いろいろなセレクター:
要素セレクター、クラスセレクター、idセレクター、子孫セレクター、その他(疑似クラス、疑似要素)

HTML/XHTMLへの適用方法(読み込み):
リンク、エンベッド、インライン、ショートハンド、メディアタイプ、文字コードの指定

CSSの優先順位:読み込み順、!important、詳細度(specificity)の計算方法

 

 

ボックスモデル:margin/padding/border、幅の計算

CSSレイアウト

 

背景画像:繰り返し、位置指定

画像の回り込み

マージンの相殺

ボタン的に扱う

li要素の横並び

 

dl/dt/ddを表組みのように扱う

 

ブラウザーウィンドウ内で(のコンテンツ領域)の中央揃え

 

フロートを使ったレイアウト①:フロートのクリア

フロートを使ったレイアウト②:ポジショニング

 

フロートを使ったレイアウト③:IE6用の対応

 

 

文字に関する設定

 

フォント指定

文字色

文字サイズ

太字、斜体、正体

中央揃え、右揃え

行間(行送り):単位を付けない

リンク

 

a:link/a:visited/a:hover/a:active(記述する順番に注意)

リンクの下線の取り扱い

高度なCSS

 

リセットCSS

 

画像置換(CSS Sprite)

 

CSSシグネチャ(body要素にid/class属性を設定し、ページごとに異なるCSSを適用)

 

動的ページと動的コンテンツ

 

Flashの基礎知識

 

 

swfの組み込み方法

 

 

JavaScriptの基礎知識

 

 

ロールオーバーイメージ

 

 

Webサイトの運用・保守・管理

 

バリデート

 

 

リンクチェック

 

 

ファイル転送