注意事項
解答については、全角カタカナで入力すること。全角カタカナ以外で入力した場合は採点されないことがある。あらかじめ記入されている文字や改行は変更しないこと。
変更した場合、正常に採点されないことがある。
※半角英数字を入力する時には [F10キー]を、全角英数字を入力する時には[F7キー]で一発変換すると変換ミスが起こりにくくなります。
出題傾向
文字実体参照
2期生の試験では（ノーブレイクスペース）が出題されました。
1期生と3期生の試験の際には[>](グレーターザン)が出題されました。
| 記号 | 文字符号 | 読み方 |
|---|---|---|
| < | < | less than（レスザン）小なり |
| > | > | grater than（グレーターザン）大なり |
| & | & | ampersand（アンパサンド）アンド |
| “ | " | double quotation（ダブルクォーテーション） |
| (半角スペース) | | no-break space（ノーブレイクスペース） |
| © | © | copyright（コピーライト） |
| ® | ® | Registered trademark（レジスタードトレードマーク） |
| ¥ | ¥ | yen 円 |
| ¢ | ¢ | Cent（セント） |
| £ | £ | pound（ポンド） |
CSSの優先度
| 項目 | 詳細度 | 説明 / 例 |
|---|---|---|
| !important | ∞ | !important をセレクタに付与すると、そのセレクタのスタイルが最優先されます |
| インラインスタイル | 1000 | HTML要素内に直接記述されたスタイル 例：<h1 style=”color: red;”>見出し</h1> |
| IDセレクタ | 100 | 例：<h1 id=”title”>見出し</h1> #title{color: blue;} |
| Classセレクタ、属性セレクタ、擬似クラスなど | 10 | 例：<h1 class=”title”>見出し</h1> .title{color: violet;} |
| 子孫セレクタ | 2 (書き方による) | <header><h1>見出し</h1></header> header h1{color: green;} |
| 要素セレクタ | 1 | <h1>見出し</h1> h1{color: aqua;} |
| 全称セレクタ | 0 | *{color: yellow;} |
リセットCSS、ノーマライズCSS、サニタイズCSSの違い
2期生の試験では（ノーマライズCSS）が出題されました
| 種類 | 概要 |
|---|---|
| reset.css | ブラウザ毎のデフォルトのスタイルを全てリセットし、真っサラな状態にします。デザインを一から構築する必要があるため、自由度が高い反面、難易度も上がります。 https://html5doctor.com/html-5-reset-stylesheet/ |
| normalize.css | ブラウザ毎のデフォルトのスタイルを可能な限り残しつつ、ブラウザ間での表示の差異をなくすように調整します。デザインのベースとなるスタイルが残っているため、リセットCSSより開発効率は高い。 https://necolas.github.io/normalize.css/ |
| sanitize.css | ノーマライズCSSに加え、開発に役立つスタイルを追加したもの。より実用的なCSSフレームワークとして利用でき、ノーマライズCSSより開発効率は高い。 https://csstools.github.io/sanitize.css/ |
それぞれの長所と短所
それぞれに長所と短所があるので、自分に合ったものまたはプロジェクトメンバーと相談のうえ、プロジェクトに最適なものを選択すれば良いでしょう。
- リセットCSS
- 長所：デザインの自由度が高い
- 短所：すべてのスタイルを記述する必要があるため、記述量が多くなる
- ノーマライズCSS
- 長所：記述量が少ない
- 短所：デザインの自由度が制限される
- サニタイズCSS
- 長所：記述量を減らしつつ、実用的なスタイルを利用できる
- 短所：自由度と記述量のバランス
HTML5で変更になった要素
| 要素 | 元になった単語 | 変更前 | 変更後 |
|---|---|---|---|
| <a> | anchor | HTML5では href 属性を使わず、 a 要素のみでダミーリンクを表現できるようになりました。div、p などのブロック要素全体を a で囲んでリンクにすることもできます。name属性が廃止されたため、アンカーリンクは <a href="#top">TOP</a>のように記述します。 | |
| <address> | 連絡先情報 | 直近の祖先要素に対する連絡先情報へ | |
| <b> | bold | 太字 | 注目すべきテキストを表すタグに変更されました。 |
| <blockquote> | 引用文 | 引用文であることを示す | |
| <cite> | 情報源 | 作品 (例: 本、新聞、小論、詩、楽譜、楽曲、脚本、映画、訴状、判決書、etc.) のタイトルを表す。 HTML4 仕様書の例に使われていたような作者名を含めることはできなくなりました。 | |
| <dl> | 定義リスト | 説明リストに変更されました。名前と値のグループからなる連想リストを表すようになりました。 また、会話文を表す要素ではないことが記されました。 | |
| <hr> | 水平線 | 段落レベルのテーマの区切りに変更されました。 | |
| <i> | italic | イタリック体 | 文章の中で、異なったトーンや雰囲気、他のテキストと性質が異なる箇所を表すように変更されました。 たとえば分類、専門用語、他言語での慣用句、考え、アルファベットでの船舶名表記などが当てはまります。 |
| <label> | label 要素と結びつけられたコントロールに、ブラウザーがフォーカスを移すことは行われなくなります。しかし、プラットフォーム側で標準的に、ラベルとフォームコントロールのフォーカスが結びついている 場合はこの通りではありません。 | ||
| <menu> | 要素は、ツールバーやコンテキストメニューを表すよう再定義されました。 | ||
| <s> | strikethrough （取り消し線） | 取り消し線から正確ではない内容や関係性のない内容に変更されました。 | |
| <small> | 小さい文字から細則などの補足的な注釈を表すようになりました。 | ||
| <strong> | 文章の一部を部分的に強調するものではなく、重要性の高いテキストに変更されました。 | ||
| <tfoot> | “tbody”要素よりも前に配置することができなくなりました。 | ||
| <u> | underline | 下線からテキストのラベル付けに変更されました |
デザイン系問題によく出る用語
2期生の試験の際にはデザインの4原則とジャンプ率に関する問題が出題されました。
1期生と3期生の試験の際にはデザインの4原則と黄金比の比率とジャンプ率とドロップシャドウが出題されました。
| 用語 | 意味 | 備考 |
|---|---|---|
| デザインの4原則 | 「近接」「整列」「反復」「対比」 | 近接：関係する情報どうしを近づける 整列：要素に一体性を持たせて組織化する 反復：特徴的な要素を繰り返すことで一貫性を持たせる 対比（コントラスト）：複数の要素を比較して優先度を明確化する |
| ジャンプ率 | 文字や画像の要素において、大きい要素と小さい要素の大きさの比率 | 見出しと本文の文字サイズの比率 |
| 黄金比 | 「1：1.618」「5：8」 | 人間が最も美しいと感じる比率 |
| 白銀比（大和比） | 「1：1.414」「5：7」 | 日本人が好む比率 |
| シンメトリー | 左右対称で調和がとれていること | |
| アシンメトリー | 左右非対称 | 意図的に左右の均整をくずしたデザイン |
| ドロップシャドウ | 文字やイラスト、写真などに影をつける | |
| トリミング | 画像の不要な部分を切り揃え、表示範囲やサイズを調整すること | |
| リサイズ | 画像の縦横の大きさを変更すること | |
| レベル補正 | 画像のハイライト、シャドー、中間調の色調を調整する機能 |
画像形式問題によく出る用語
2期生の試験の際にはjpg（ジェイペグ）に関する問題が出題されました。
1期生と3期生の試験の際にはBMP（ビットマップ）の特徴を問う問題とPNG（ピング orピン）に関する問題が出題されました。
| 画像形式 | 特徴 |
|---|---|
| GIF（ジフ） | データ容量がとても小さく、背景を透明にすることも可能なので、ロゴやイラストに向いています。 また、アニメーションにも対応していて、パラパラ漫画のような動画をGIFで作ることもできます。 GIFは256色しか表現できないので、風景写真など、多くの色が使われている画像をGIFで表示しようとすると細かい色使いまで再現できません。 |
| JPG（ジェイペグ） | フルカラー1670万色まで扱うことができるので、写真やグラデーションも綺麗に表現することができます。 何度も加工や編集を行う画像や、背景を透けさせたいロゴやイラストなどには向いていない。 |
| PNG（ピング orピン） | 「GIF」の問題点であった256色という色数の制限を解消し、綺麗な画像を表現することができます。 透過に対応し、グラデーションにも適しています。 また、「JPG」のように画質の劣化の心配もなく、加工などしても綺麗な画質を保つことができます。 JPGよりファイルサイズが大きい。 GIFのようなアニメーションには非対応（※） ※現在ではpng拡張のAPNG（Animated Portable Network Graphics）が使用可能になっています |
| SVG（エスブイジー） | 画像サイズを変更しても画質が劣化しない … CSSでサイズやカラーを簡単に変更できる … 画像の切り抜きができる … ブラウザ上でテキストの選択やコピーができる … ボタンやアニメ―ションを組み込める … 画像に効果をつけられる。 SVGはPNGと比べてはるかにサイズが小さいため、通常コンピューターやwebサイトで動作が遅くなることはありません（ただし、非常に細かいデザインの場合は、SVGの動作が遅くなることがあります）。 ベクター形式のため、品質を損なうことなく拡大縮小できます。 |
| BMP（ビットマップ） | BMP（拡張子.bmp）ファイルは、ピクセルで画像が構成されるラスター形式です。 BMPは1ピクセルに1つの色情報を持っています。BMPファイルは圧縮されていないため、何度編集しても劣化しません。 編集による劣化はありませんが、拡大するとピクセルが目立ち、視覚的に画質が劣化して見えます。 |
| PSD（ピーエスディー） | Adobe Photoshopで利用される標準の画像ファイル形式です。webでは表示できません。 |
| AI（エーアイ） | Adobe Illustratorで利用される標準の画像ファイル形式です。webでは表示できません。 |
| WebP (ウェッピー) | WebPはビットマップ形式ではありませんが、ラスター形式（ピクセルベース）の画像フォーマットです。 ロスレスおよびロスィー圧縮の両方をサポートする現代的な形式で、圧縮によるファイルサイズの削減が可能。 画質を保ちながら効率的な画像保存ができます。 |
| ※PDF（ピーディーエフ） | 電子文書交換用にアドビが開発したファイルフォーマットなので画像ではありません。 |
補足：
拡大時の画質の劣化は、画像形式に関わらず発生する可能性がありますが、その原因は画像の解像度や圧縮方法に依存します。
BMP（拡張子.bmp）は圧縮しないため、圧縮による劣化はありませんが、拡大時にはピクセルが目立ちます。
一方、JPEGは圧縮による劣化があるため、圧縮率によって画質が変わり、拡大時の劣化も影響します。
PNGやGIFはロスレス圧縮を使用するため、圧縮による画質の劣化はありません。BMPと同様に、何度編集しても画質は保たれます。
通信関連問題によく出る用語
1期生と3期生の試験の際にはHTTPSが出題されました。
| プロトコル | 内容 |
|---|---|
| HTTP | WebブラウザーとWebサーバーの間で、HTMLなどのコンテンツを送受信するときに用いられるプロトコル |
| HTTPS | ・「Hypertext Transfer Protocol Secure（ハイパーテキスト・トランスファー・プロトコル・セキュア）」の略で、SSL（暗号化通信）によって セキュリティを高めたhttp。 ・ショッピングカートやお問い合わせフォームなど、個人情報などの流出を防止するために通信を暗号化したいときに用いられるプロトコル |
| FTP | HTML、CSS、JavaScript、画像などのファイルをWebサーバーに転送するときに用いられるプロトコル |
| SFTP | SSHで暗号化された通信路を使って安全にファイルを送受信するプロトコル。セキュリティを高めたFTP。 |
| SMTP | メールアドレスのリンクなどから、メールを送信するときに用いられるプロトコル |
| IMAP POP | メールを受信する時に用いられるプロトコル |
カラー関連
2期生の試験では配色比率、色相環、webセーフカラーが出題されました。
1期生と3期生の試験の際には配色比率とWebセーフカラーが出題されました。
| 用語 | 解説 |
|---|---|
| 配色比率「70:25:5の法則」 | ベースカラー 70% メインカラー 25%（コーポレートカラーなど） アクセントカラー 5% |
| 色の遠近 | 白→近い 黒→遠い 色彩は主に暖色と寒色に分けられ、暖色系の赤や黄などは、前方に迫り出してくるような圧迫感を与えます。 一方、寒色系の青などは、後方に向かって吸収されていくように感じます。 |
| HSLカラー | 色相 、彩度 、輝度の3つの成分からなる色 色相：色味を0から360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。 彩度：純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づく。 輝度：0 %を黒、100 %を白とし、その中間 (50 %) を純色とする。 |
| Webセーフカラー | 00 33 66 99 ff cc の6種類の色番号を組み合わせたカラーコード |
| 補色 | 色相環の反対側の位置関係の色の組合せの事 https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8 |
文字関連
| 用語 | 解説 |
|---|---|
| カーニング | 特定の2文字の間隔を調整すること、もしくはその機能 |
| ベタ組 | 文字間を調節しないで処理する事 |
| ツメ組 | 文字間を詰めて組む事 |
| 混植 | 英数字やかな等の異なる書体を混ぜて使う |
| アンチエイリアス | フォントのエッジを滑らかにし、輪郭を美しく見せる事 |
その他
2期生の試験の際にはAdobe Flashの廃止に関する問題が出題されました。
1期生と3期生の試験の際にはAdobe Flashとwebフォントとパンクズリストについて出題されました。
| 用語 | 解説 |
|---|---|
| パンくずリスト | 正式にはtopicpath（トピックパス）。ユーザーが現在自分がどのページにいるか迷わないようにサイトの階層構造を示してわかりやすく表示したもので童話「ヘンゼルとグレーテル」が由来。英語圏ではbreadcrumb list（ブレッドクラムリスト）と呼ばれています。 |
| Adobe Flash | かつてアニメーションやゲーム、動画などをWeb上で動作させるために広く使われていた技術。 |
| webフォント | Webフォントはサーバーからフォント情報を取得するため、閲覧者がどのようなデバイスを使用していても同じフォントを表示することができ、 意図したデザインを表現することができる。 SEOに有利である画像を使わずテキストデータとして利用できるため、画像化した場合と比較して、 SEO（検索エンジン最適化）の観点から有利となる。 |
| クロスブラウザチェック | ウェブページが異なるブラウザやデバイスで正しく表示されるかを確認する作業です。たとえば、同じウェブページをChrome、Firefox、Safariなどで開いて、レイアウトや機能がどうなっているかをテストします。 |
以上。