知識問題対策

カラー系

• ３つのカラーとその比率
• ベースカラー　70% 余白や背景に用いる、アクセントカラーを引き立てる色
• メインカラー　25% サイトの印象を決定づける主役の色
• アクセントカラー　5% 全体を引き締める色
• 補色　色相環で反対にある色を指す、お互いに強烈に見える作用があるため、視線誘導に使用できる
• WEBセーフカラー　ブラウザや OS の種類に関係なく、Web ページで常に表示できる 216 色のカラー
  00 33 66 99 cc ffの6種類の色番号を組み合わせたもの
• HSLカラー　色相(Hue)、彩度(Saturation)黒さを見る、輝度(Lightness)
  • 色相
  • 彩度 鮮やかさ　白から原色へ　→
    
    
  • 輝度
    物理的な明るさ
• 明度　明るさ　黒から白へ　→
  
  
• 色の遠近　暖色系は近く、寒色系は遠く見える

画面設計系

• VGA規格　640×480ピクセルの解像度で画面表示を行うグラフィックスシステムの規格
• ファーストビュー　ページの最初に表示される領域のこと

デザイン関係

• デザイン４つの基本原則
• 近接　関連する要素をグループ化し、整理することで情報を関連付ける
• 整列　関連する要素を一定のルールに沿って配置する事で、視認性をあげる
• 反復　同じ要素を一定のルールで繰り返すことで、一貫性を持たせる
• 対比　要素に強弱をつけることで、優先度を視覚的に伝える
• ～軸デザイン　ユーザーの視点をコントロールする手法 分かりやすくコンテンツを閲覧できる　Z軸通常　N軸小説　F軸HPなど
• シンメトリ　アシンメトリ　左右対称　左右非対称
• 黄金比　1:1.618を取り入れること
• 白銀比　1:√2は、1：1.414　大和比という
• 和のシェイプ　1:2 3:5などの比率が使われた和を表現するためのデザイン、比だけんでなく、模様や色も関係する
• リキッドレイアウト
  フレキシブルレイアウト
  レスポンシブWebデザイン
  コンテンツの幅に基づいて設計されたウェブデザイン異なる解像度の画面やウィンドウサイズに対応する柔軟性が得られる
• グリッドデザイン　架空の縦横線を基準に各パーツを配置する手法
• バリデーション　検証・確認という意味。ソースの記述の誤りや、W3Cの使用に準拠しているかを調べる事
• アフォーダンス　ある物事がどの様に示されるかを示す事、アイコンみたいなやつ
• メタファー　比喩表現を用いて概念や物事を別のものに例えることで、理解を促進させる手法
• clearfix floatで崩れたレイアウトを正しくさせる手法、親要素のクラスにclear:bothなどを指定する

画像加工

• アンチエイリアス　文字や画像の境界線を滑らかにする手法　ぼやけてしまう可能性がある
• トーンカーブ　画像の明るさや濃淡を調整する為の機能
• リサイズ　画像の大きさを変える
• キズ/ごみ取り　画像の細かな必要のないものを消す事
• トリミング　元の画像から指定区域を切り取ること
• 色調法制　画像の明るさや色味を調整すること

文字関係

• タイポグラフィ　文字のデザインに関する技術・知識のこと
• カーニング　文字間の調整を行うことでバランスよく見せる
• ベタ組み　文字の仮想ボディを隙間なく並べて文字を組む方法
• ツメ組み　文字の字面を隙間なく並べる方法
• 混色　英数字やかなの異なる書体を混ぜる処理
• ドロップシャドウ　文字の後ろに影をつける
• ジャンプ率　文字の大きさの度合い、ジャンプ率が高いは大きさの差が大きいことをいう
• Webフォント　ベクトル形式で解像度問わず鮮明、CSSプロパティで要素指定する

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

• 読み上げ音声関係
  • 音声ブラウザー日付　2000年11月11日　がちゃんと読んでくれる形
  • 金額の場合、半角数値３桁区切りが単語として認識されやすい
  • CSSで読み上げ音声に影響することはない
  • HTMLのstrong h1で記述されたものは強調して読み上げられることがある
• サイトマップ　Webサイト内の構成一覧を案内するページ
• コピーライト　著作物であることを示す
• アクセシビリティ　身体的制約や利用環境に関係なくコンテンツや機能を利用できるようにすること
• セキュリティポリシー　企業など組織における情報セキュリティに関する基本方針を明記する
• プライバシポリシー　個人情報保護方針、Webサイトにおける個人情報の取り扱いについて明記したもの

データ形式

• BMP 非圧縮のビットマップイメージ
• GIF 静止画像やアニメーションを保存するために使用される画像ファイル形式256色サイズ小
• JPEG 非可逆式の圧縮画像サイズ小、高圧縮にすると劣化がひどい
• PNG ビットマップベースのファイル形式、透過やフルカラーのサポート有
• SVG 円や線をベクトル形式で表示ができ、拡大しても劣化しない、データはXML形式で記述されているため、純粋な画像ファイルではない
• AI Illustratorのプロジェクトファイル
• PSD Adobe Photoshopで作成された画像を保存するために使用されるファイル形式
• PDF Adobe Systemsが開発した、文書を電子的に表現するためのファイル形式

HTML CSS JaveScript

• HTML
• <figure> 一連のコンテンツ（通常は画像や図表）をグループ化し、キャプションを付けるために使用されます
• <figcaption> figure要素の説明文を定義するために使用されます。
• <canvas> JavaScriptを使用して2Dまたは3Dグラフィックスを描画するために使用されます。
• <video> Webページにビデオを表示するために使用されます。
• <strong> 強い重要性を含む強調表示
• <small> 細目や注釈であることを示す　HTML4.1では文字を小さくするためだけに使われていた
• <audio> 音声再生のために使用される
• <noscript> ブラウザがJavaScriptを無効にしている場合に表示する代替コンテンツ
• <script> HTML内でJavaScriptコードを定義するための要素
• <link> そのファイルから見てそのファイルがどの様なファイルなのか定義するもの
• 文字コード
  • & nbsp non-breaking space（改行しないスペース）
  • & amp &（アンド）
  • & lt <（小なり記号）
  • & gt >（大なり記号）
• CSS
• セレクタ
  • ユニバーサルセレクタ 全ての要素を指定するセレクタ
  • IDセレクタ idで指定するセレクタ
  • クラスセレクタ クラス名で指定するセレクタ
  • 属性セレクタ タグの属性で指定するセレクタ
    <input type="text" name="maru">
    <input type="radio" name="maru">
    ↑があったとして
    input[type="text"]{
    background-color:#ccc;
    }
    と指定することで、上段のみスタイルがあてられる。
    
    targetによる指定
    a[target]{
    background-color:yellow;
    }
    target属性が指定されているa要素のみに指定
• clearfix
  float指定した要素は親要素から認識されなくなる為、デザインが崩れることがある
  float要素が必要なくなったタイミングでclearfixを使用することでこれを防ぐ
  使い方
  必要なくなる初めの要素にCSSで指定する
  footer #info_group {
  clear: both;
  }
  
  必要が無くなる要素の親要素に↓のクラスを指定する
  .clearfix::after {
  content: "";
  display: block;
  clear: both;
  }
  
• !important　同じプロパティを複数のセレクタで指定している時、優先順位を最優先に上げるパラメータ
• @import　CSSファイル内で外部CSSを読み込むためのルール、ファイルの先頭に記述する
  @import url('file.css');
  CSSはHTML内で参照することが推奨されている
• リセットCSS　ブラウザごとに異なるスタイルを無くす事、リセットCSSファイルというCSSを読み込む
• プログレッシブ・エンハンスメント　ウェブサイトやアプリケーションの設計手法の一つ
  すべてのユーザーに基本的な機能を提供しながら、より高度な機能や体験を提供することを目的とする

通信系

• FTP　File trancefer protocol　ファイルをサーバーへ転送する時に用いられるプロトコル
• HTTP　Webコンテンツを送受信する時に使われるプロトコル
• HTTPS　SSLで使用する通信を暗号化したいときに用いるプロトコル
• SFTP　ファイルを暗号化された通信路で送受信する時に使われるプロトコル
• SMTP　メール送信するときに使われるプロトコル