LoginSignup
1
0
お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@masamasamasami

webデザイン技能検定3級 学科試験対策１

Last updated at Posted at 2024-07-04

はじめに

本記事は、ウェブデザイン技能検定の受験を思い立ち勉強した備忘録として記事を書いていきます。

体型的とは真逆に得た知識を羅列するだけの記事で基礎的な内容ばかりかもしれませんが、誰かの役に立てば幸いです。

今回使用した過去問・解説は主に以下のサイトから学んだものになります。他サイト、ブログでもおすすめされているサイトですので興味のある方はリンクからぜひチャレンジしてみてください！

令和4-4

<!DOCTYPE html>について

  • <!DOCTYPE html>の宣言は省けない
は、HTML文書の先頭に記述する宣言で、その文書がHTML5で書かれていることをブラウザに示します。この宣言により、ブラウザはHTML5の仕様に従って文書を解釈し、表示するようになります。

参考

  • <html lang="ja">: 文書の言語が日本語であることを指定します
  • <meta charset="UTF-8">: 文書の文字エンコーディングをUTF-8に設定します
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインをサポートするためのメタタグで、モバイルデバイスでの表示を最適化します
  • <title>: ブラウザのタブに表示される文書のタイトルを設定します
  • <body>: 実際に表示されるコンテンツを含む部分です。ここでは見出しと段落が含まれています

メタタグ：
HTML文書の<head>セクションに含まれるタグで、文書に関する情報（メタデータ）を提供します。メタタグは、ブラウザや検索エンジン、その他のサービスに対して文書の特性を伝えるために使用されます

CSSにおける縦書きの日本語レイアウトについて

  • CSSでは縦書きの日本語レイアウトも対応可能です。writing-modeで指定できます
記述例
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縦書きテキストの例</title>
    <!-- ここで指定する -->
    <style>
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            border: 1px solid #000;
            padding: 10px;
            width: 100px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        これは縦書きのテキストです。
    </div>
</body>
</html>
  • プロパティの値の種類
値 意味
vertical-rl テキストが右から左へ縦書きになります
vertical-lr テキストが左から右へ縦書きになります
horizontal-tb 通常の横書きになります

以前は画像に変換して対応するしかなかったようです。

参考：CSS記述の基本

CSSは、HTML要素の表示スタイルを定義するための言語です。いくつかの方法を使用して、テキストをスタイル設定します。

  • インラインスタイル

HTMLタグ内に直接スタイルを記述します。

例
<p style="color: red; font-size: 20px;">このテキストは赤色で、フォントサイズが20pxです。</p>
  • 内部スタイルシート

HTMLドキュメントの<head>セクションにスタイルを記述します。

例
<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">このテキストは青色で太字です。</p>
</body>
</html>
  • 外部スタイルシート

部のCSSファイルにスタイルを記述し、それをHTMLファイルにリンクします。

HTML
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="highlight">このテキストは外部スタイルシートでスタイル設定されています。</p>
</body>
</html>
CSS
/* styles.css */
.highlight {
    color: green;
    font-style: italic;
}
  • プロパティの種類

テキストのスタイル設定に使われる主なCSSプロパティを以下に示します。これらのプロパティは複数使用してスタイルを設定することが出来ます。

プロパティ名 意味
color テキストの色を指定
font-size テキストのサイズを指定
font-weight テキストの太さを指定
font-style テキストのスタイルを指定
text-align テキストの配置を指定
text-decoration テキストの装飾を指定
line-height 行の高さを指定

OSI参照モデルについて

  • OSI参照モデルは、国際標準化機構(ISO)によって策定された

OSI参照モデルとは、ネットワーク構造の基本的な設計方針を指す。１から７の各層に対するプロトコルが分類されています。

image.png

W3Cとは

W3C（World Wide Web Consortium）は、ウェブ技術の標準を策定する国際的なコンソーシアムです。

HTMLや、CSS、XML、SVGなど、多くの技術標準を策定しており、これらの標準はウェブ開発において重要な役割を果たしています。

画像の劣化について

  • JPEG形式の画像はPNG形式に比べると画質の劣化がおこりやすい

JPEG形式だと、保存時にこっそり画像のデータ情報を間引くことで容量を軽くしているため何回も保存を繰り返すと劣化が進みます。

その他画像形式の特徴まとめ

image.png

ワイヤーフレームについて

ワイヤーフレームは、ウェブサイトやアプリケーションの設計プロセスにおいて、レイアウトや構造を視覚化するためのスケッチや図です。

ワイヤーフレームは、デザインの初期段階で使用され、コンテンツ配置、ナビゲーションの流れ、ユーザーインターフェースの基本構造を定義します。

パワポでエ作ることもあるようです

img要素のalt属性について

  • alt属性の値には、画像が利用できない場合にその代わりとして使用するテキストを指定する

その他のimg要素に対する属性

alt属性以外にも指定出来る属性が、いくつかあるので紹介します。

image.png

情報機器作業における労働衛生管理のためのガイドラインについて

パソコンなどの情報機器で作業する労働者の負担を軽減するため、適切な環境の整備や作業管理についてまとめたガイドラインです。

近年ではテレワークにおける労働者への配慮などが追加されています。

マルウェアについて

  • トロイの木馬とは、コンピュータの内部に潜伏して、システムの破壊や、外部からの不正侵入口の作成や、そのコンピュータの情報を外部に発信したりするマルウェアの一種である

マルウェア（malware）は、悪意のあるソフトウェアの総称で、コンピュータや情報システムに被害を与える目的で作成されます。

トロイの木馬

コンピュータの内部に潜伏して、無害なプログラム、あるいはデータファイルのように偽装しつつ、その中にマルウェアとして機能する部分を隠し持っていて、何らかのアクションをきっかけ（ファイルを開くなど）として、それが活動するように仕組まれているファイル

ワーム

ネットワーク経由で自己を拡散し、脆弱性を利用して他のコンピュータに侵入します。自己増殖する能力があり、大規模な被害をもたらす可能性もあります。

スパイウェア

ユーザーに関する情報をユーザーが意図しない形で収集し、それを情報収集者である特定の企業・団体・個人等に自動的に送信するマルウェア

キーロガーやブラウザ履歴監視するものなどが含まれます。

ボット

バックドアと同じで、他人のコンピュータを外部から遠隔操作するためのコンピュータウイルス。

ランサムウェア

感染させた端末内のデータを暗号化などによって、利用できない状態にした上で、そのデータを利用できる状態に戻すことと引き換えに金銭を要求するマルウェア。

アドウェア

ユーザーに広告を表示し、その広告収入を目的とする。

JavaScriptについて

  • JavaScriptは、クロスプラットフォームで動作するスクリプト言語である

クロスプラットフォーム：
Windows、macOS、iOS、Androidなど、異なるプラットフォーム上で、同じ仕様のアプリケーションを動作させるプログラムのことです。

CSSのcolorプロパティの指定方法について

色の指定方法にはいくつか方法があります。

キーワードによる指定

よく使われる基本的な色の名前を指定できます。

ex
color: red; /* 赤色 */
color: blue; /* 青色 */
color: green; /* 緑色 */
color: black; /* 黒色 */
color: white; /* 白色 */

RGB値による指定

RGB値は赤、緑、青の各成分の強度を0から255の範囲で指定します。

ex
color: rgb(255, 0, 0); /* RGB値を使って赤色を指定 */
color: rgb(0, 255, 0); /* RGB値を使って緑色を指定 */
color: rgb(0, 0, 255); /* RGB値を使って青色を指定 */
color: rgb(255, 255, 0); /* RGB値を使って黄色を指定 */

HEX値による指定

HEX値はRGB値を16進数で表現したものです。３桁もしくは６桁で指定することが出来ます

ex
color: #ff0000; /* HEX値を使って赤色を指定 */
color: #00ff00; /* HEX値を使って緑色を指定 */
color: #0000ff; /* HEX値を使って青色を指定 */
color: #ffff00; /* HEX値を使って黄色を指定 */

HSL値による指定

HSL値は色相（0から360の角度）、彩度（0%から100%）、明度（0%から100%）で色を指定します。

ex
color: hsl(0, 100%, 50%); /* HSL値を使って赤色を指定 */
color: hsl(120, 100%, 50%); /* HSL値を使って緑色を指定 */
color: hsl(240, 100%, 50%); /* HSL値を使って青色を指定 */
color: hsl(60, 100%, 50%); /* HSL値を使って黄色を指定 */

img要素に対して指定できるCSSプロパティ

この問いでは、vertical-alignのデフォルトの設定であるbaselineについて画像の下の空白を消すために値を変更する。として出題されていました

image.png

li要素の装飾について

リストの箇条書きについて何か装飾を行う場合下記の２通りがあります。

<ul style="list-style-type: 〇〇;">
<ul style="list-style: 〇〇;">

リストの表現方法について

リストの代表的な表現方法を２つ紹介します。

順序付きリスト

<ol>要素は、順序付きのリストを表現します。リストアイテムは通常、数字や文字で番号付けされます。

リストアイテムは<li>要素で囲みます。

ex
<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

これで左端に番号の付いたリストが表示されます。

olはordered listの略

順序なしリスト

<ul>要素は、順序なしのリストを表現します。リストアイテムは通常、黒丸や他の記号でマークされます。

ex
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

ulはunordered listの略

箇条書きの総称方法をまとめます

記号 指定する文言
〇 cicle
● disc
■ square
(何もなし) none

li要素について

li要素は一般的なブラウザにおいて、特に何も指定しなくてもCSSの「display:list-item;」の状態になっている。

一つ飛ばしに何か装飾を行いたいときには下記の方法をとります。

  • 奇数行
<ul li:nth-child(odd) { color: red }>
  • 偶数行
<ul li:nth-child(even) { color: red }>

ドメイン名について

トップレベルドメインについての問題が出題されていました。
解説としては下の画像になります。

image.png

ドメインは「ルート」という頂点から階層構造になっていて、トップレベルドメインの次はセカンドレベルドメイン、その次はサードレベルドメインという構成になっています。

コントラストについて

どの組み合わせが一番コントラスト比が高くなるのか？という問題が出題されていました。

コントラスト比の計算方法

計算に必要な式は一つだけです！

$$ (L1 + 0.05) / (L2 + 0.05) $$

L1：色の明るい方の相対輝度 (0 ~ 1の値)
L2：より暗い色の相対輝度 (0 ~ 1の値)

この式をもとに白と黒のコントラスト比を求めてみます。

コントラスト比
(1 + 0.05) / (0 + 0.05) = 21

したがって白と黒のコントラスト比は「21 : 1」となります。

輝度値の確認をもし行いたい方がいましたらコチラから検索してみてください。

これ以降も色の表現方式は異なっても答えは「白と黒」で変わらないと思います（たぶん）

a要素について

HTML5からはa要素は、基本何でも囲むことができます。しかし、a要素の中にa要素を入れると、一つの要素に複数のリンク先が指定されて、どこに飛ばして良いのかブラウザが判断できないので、a要素を子要素として持つことはできません。

HTTPステータスコードについて

HTTPステータスコードのうち、コードの意味を答えさせる問題が出題されていました。

番号の百の位の数字にはそれぞれ意味があるようで

  • 1xx(情報レスポンス)

リクエストを受け取り、処理を継続していることを示す。

  • 2xx(成功)

リクエストが正常に受け取られ、理解され、処理されたことを示す。

  • 3xx(リダイレクション)

リクエストを完了するために追加の処理が必要であることを示す。

  • 4xx(クライアントエラー)

クライアントにエラーがあることを示す。

  • 5xx(サーバーエラー)

サーバーがリクエストの処理に失敗したことを示す。

次の表に代表的なHTTPステータスコードをまとめます。

番号 コード？ 意味
100 Continue リクエストの最初の部分を受け取り、クライアントはリクエストの残りを送信することができる
101 Switching Protocols サーバーはプロトコルの切り替えを要求している
200 OK リクエストが成功した
201 Created リクエストが成功し、新しいリソースが作成された
204 No Content リクエストは成功したが、レスポンスにコンテンツはない
301 Moved Permanently リクエストしたリソースが新しい場所に完全に移動した
302 Found リクエストしたリソースが一時的に新しい場所に移動した
400 Bad Request サーバーがリクエストを理解できない
403 Forbidden リクエストが拒否された
404 Not Found クエストしたリソースが見つからなかった
500 Internal Server Error サーバー内部でエラーが発生した
502 Bad Gateway ゲートウェイまたはプロキシサーバーが不正な応答を受け取った
503 Service Unavailable サービスが一時的に過負荷またはメンテナンス中で利用できない

特に403, 404, 502, 503エラーが本試験では大事なようです。

dl要素（Definition List）について

dl要素は説明リストを表します。用語を<dt>で示し、その説明を<dd>で行います。

ex
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Languageの略で、ウェブページの構造や意味を定義するマークアップ言語。</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略で、ウェブページのスタイルやレイアウトを装飾するためのスタイルシート言語。</dd>

    <dt>JavaScript</dt>
    <dd>ウェブページの動的な振る舞いやインタラクティブな要素を追加するためのプログラミング言語。</dd>
</dl>

さいごに

以上が一回分の試験から私が学んだことになります。まだまだ知識不足で多くのことを学ぶことが出来ました。出題範囲が思ったよりも広く、宣言通り見にくい生地になったっことをお詫び申し上げます。

以降の内容をこの記事に付け足すか別の記事に体裁を整えて書き足していくは悩み中ですが引き続き学んだことを何かしらの形で公開していけたらなと思います！

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0