「HTML5プロフェッショナル認定試験レベル1」まとめ

2023年10月29日 23:55

試験範囲

Webの基礎知識
HTTP, HTTPSプロトコル
HTMLの書式
ネットワーク、サーバ関連技術の概要
Web関連技術の概要

CSS3
スタイルシートの基本
CSSデザイン
カスケード

要素
HTML4.01以前の要素および属性
HTML5で新しく加わった要素および属性
HTML5で廃止されたタグおよび属性

レスポンシブWebデザイン
マルチデバイス対応ページの作成
メディアクエリ
スマートフォンサイト最適化、重要度

オフラインWebアプリケーション
オフラインWebアプリケーション

1章　HTMLの基礎知識

HTML5の基本文法
グローバル属性
HTML5の要素とカテゴリー

HTML5の基本文法

ポイント:
・タグを省略できるものがある
HTML5で開始タグと終了タグが省略できる要素
html, head, body, colgroup, tbody

あとは終了タグのみ省略できる要素がある。
li, dt, dd, p, rb, rt, rtc, rp, optgroup, option, thead, tfoot, tr, td, th

・HTML5の空要素は<xx>と書いても<xx />と書いてもいい
空要素と言う、開始タグだけで使える要素がある(タグ同士で囲わなくてもいい)
空要素の例:
img, br, input, meta, link
これらは、
<br>, <br />
と書いてもいい

<img src="logo.png">
src="logo.png"　は属性
src 　は属性名
logo.png　は属性値

開始タグの要素名の後に空白文字(半角スペース、タブ、CR・LF・FFなど改行)でで区切ることができる
<img src="logo.png" alt="xxxxxxxx">

・HTML5のDOCTYPE宣言は<!DOCTYPE html>だがこれ以外も指定可能
DOCTYPE宣言は、大文字でも小文字でもいい。
OK:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>

NG:
<　 !DOCTYPE html>
<　 !DOCTYPE html　>

<!DOCTYPE html>のhtml前後には空白文字を入れることが出来る。
しかし、!DOCTYPEの部分はそのまま続けて書く必要がある

文字参照

<
名前指定文字参照: <
10進数数値文字参照: <
16進数数値文字参照: <

>
名前指定文字参照: >
10進数数値文字参照: >
16進数数値文字参照: >

&
名前指定文字参照: &
10進数数値文字参照: &
16進数数値文字参照: &

©
名前指定文字参照: ©
10進数数値文字参照: ©
16進数数値文字参照: ©

Ⓡ
名前指定文字参照: ®
10進数数値文字参照: ®
16進数数値文字参照: ®

使用例1


使用例2


コメント内部のテキストに連続したハイフンは書けない
コメント内部のテキストは「>」,または「->」で開始することはできない
「-」で終わることもできない

グローバル属性

全ての要素に共通して指定できる属性の事

HTML5でのグローバル属性
class
　空白文字で区切って複数指定可能
id
　空白文字は不可
　1文字以上必要
lang
　言語コードのみ可
title
style
　プロパティ: 値; の形式
dir
　列挙属性
　dir="ltr", dir="rtl", dir="auto"
tabindex
　整数のみ可
accesskey
　文字のみ可
　空白文字区切りで複数可
hidden
　論理属性
translate
　列挙属性
　translate="yes", translate="no"
spellcheck
　列挙属性
　spellcheck="true", spellcheck="false"
contenteditable
　列挙属性
　contenteditable="true", contenteditable="false"

列挙属性/列挙型属性
あらかじめ決められたキーワードの中から値を選択する
空白文字を指定できるものもある。
translate=""はtranslate="yes"と同じ
spellcheck=""はspellcheck="yes"と同じ
contenteditable=""はcontenteditable="true"と同じ

論理属性/論理型属性
属性名だけで指定できる属性の事
属性を指定すると値はtrue, 指定してなければfalseの状態となる

カスタムデータ属性(data-*)

使用するのに適当な属性や要素がない場合に、任意の要素に独自の属性を追加できるように用意するもの

値は自由に設定できる
1つの要素にいくつでも指定できる
属性名は必ず「data-」で開始する
1文字以上必要になる

WAI-ARIA関連の属性

WAI-ARIA
　role属性とaria-*属性を任意の要素に対して指定できる

role属性
　要素の役割を示すために使う
　application, banner, search, navigation, tab, tabpanel

ariz-*属性
　要素の状態や特性を示す
　aria-checked, aria-required

W3C

W3C(World Wide Web Consoritium)
web関連技術の標準化と推進を目的とした国際的な非営利団体
HTML, XHTML, XML, CSS, DOM, WAI-ARIAなどの仕様を策定する。

HTML5の要素とカテゴリー

HTML5では、
・ブロックレベル要素、インライン要素と言う分類はない
・要素には新しい7種類のカテゴリがある
・コンテンツモデルには新しくトランスペアレントが追加された

HTML5のカテゴリ

Flow content 一般コンテンツ
Heading content 見出しコンテンツ
Sectioning content セクションコンテンツ
Phrasing content 文章内コンテンツ
Interactive content 対話型コンテンツ
Embedded content 組み込みコンテンツ
Metadata content 文字情報コンテンツ

コンテンツモデル: 内容として入れられるコンテンツが
　　　　　　　　　要素ごとに決まっている

トランスペアレント: コンテンツモデル上で透明なもののよう
　　　　　　　(その要素のタグが存在しないかのように)に扱われる要素
a, ins, del, object, audio, video, canvas, map

2章　HTML5で追加された要素

セクション
構造を示す要素
テキスト
ルビ
動画・音声
フォーム
その他の新要素(figure, figcaption, template, canvas)

セクション

・セクション要素内の最初の見出しがセクションの見出しとなる
・セクション要素がなくても、見出しがあれば暗黙のセクションが作られる
・HTML文書内に存在するセクションとその階層構造はアウトラインで示される

セクションを表す専用要素
・section
・article
・aside
・nav

セクショニングルート:
要素内のアウトラインが独立している。
内容として含んでいるセクションや見出しが外部のアウトラインに影響を与えない要素
body, blockquote, fieldset, figure, td

構造を示す要素

headerはセクション、セクショニングルートのヘッダー
footerはセクション、セクショニングルートのフッター
mainはページ全体のメインコンテンツ

main要素はarticle, aside, nav, header, footerの内部に配置できない

テキスト

markはオリジナルの状態に手を加えて目立たせたい部分
dataは機械読み取りが可能なデータを属性値として提供する要素
timeはdataを日時での使用に特化させた要素

ChatGPT

HTML5文書の基本構造:

<!DOCTYPE html>
<html>
<head>
  <title>タイトル</title>
</head>
<body>
  <!-- ここにコンテンツを記述 -->
</body>
</html>

主要な要素:
<h1>から<h6>: 見出し
<p>: 段落
<a>: ハイパーリンク
<img>: 画像
<ul>と<li>: 箇条書きリスト
<ol>と<li>: 番号付きリスト
<div>: ブロック要素のコンテナ
<span>: インライン要素のコンテナ

主要な属性:
src: 画像や動画のURL
href: ハイパーリンク先のURL
alt: 代替テキスト（画像が読み込めない時に表示）
class: 要素にクラス名を指定
id: 要素に一意のIDを指定
style: インラインCSSスタイルを指定

以下の要素を持つページ

header
footer
main
section
mark
data
time
wbr
bdi
ruby
video
audio
source
track
embed
form
figure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Template</title>
</head>
<body>
    <header>
        <h1>Header Content</h1>
    </header>

    <main>
        <section>
            <h2>Section Title</h2>
            <p>Section Content</p>
            <mark>Highlighted Text</mark>
            <data value="2023-07-31">July 31, 2023</data>
            <time datetime="2023-07-31T12:00">12:00 PM</time>
            <wbr>
            <bdi>Bi-Directional Text</bdi>
            <ruby>
                漢<rt>かん</rt>字<rt>じ</rt>
            </ruby>
            <video controls width="640" height="360">
                <source src="video.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <audio controls>
                <source src="audio.mp3" type="audio/mpeg">
                Your browser does not support the audio tag.
            </audio>
            <figure>
                <img src="image.jpg" alt="Image Description">
                <figcaption>Image Caption</figcaption>
            </figure>
        </section>
    </main>

    <footer>
        <p>Footer Content</p>
    </footer>
</body>
</html>

以下の要素を持つページ

meta
address
div
span
h1
blockquote
cite
ins
del
em
br
abbr
dfn
pre
code
samp
kbd
var
bdo
sup
sub
img
map
area
object
param
table
form
ifrane
script
noscript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Template</title>
</head>
<body>
    <!-- meta -->
    <meta name="description" content="This is a sample meta description.">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Your Name">
    
    <!-- address -->
    <address>
        <p>123 Street Name</p>
        <p>City, State, Zip Code</p>
        <p>Country</p>
    </address>

    <!-- div -->
    <div>
        <h1>Div Content</h1>
        <p>This is a div element.</p>
    </div>

    <!-- span -->
    <p>This is a <span>span</span> element.</p>

    <!-- h1 -->
    <h1>Heading 1</h1>

    <!-- blockquote -->
    <blockquote>
        <p>This is a blockquote.</p>
        <cite>Source of the quote</cite>
    </blockquote>

    <!-- ins -->
    <ins datetime="2023-07-31">Inserted Text</ins>

    <!-- del -->
    <del datetime="2023-07-31">Deleted Text</del>

    <!-- em -->
    <p>This is <em>emphasized</em> text.</p>

    <!-- br -->
    <p>This is a line.<br>Next line.</p>

    <!-- abbr -->
    <p><abbr title="World Health Organization">WHO</abbr> is an important organization.</p>

    <!-- dfn -->
    <p><dfn title="Hypertext Markup Language">HTML</dfn> is used to create web pages.</p>

    <!-- pre -->
    <pre>
        This is preformatted text.
        It retains      spaces and newlines.
    </pre>

    <!-- code -->
    <code>function sayHello() {
        console.log("Hello!");
    }</code>

    <!-- samp -->
    <p>Sample output: <samp>Hello, world!</samp></p>

    <!-- kbd -->
    <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

    <!-- var -->
    <p>The value of x is <var>x</var>.</p>

    <!-- bdo -->
    <bdo dir="rtl">This text will be displayed right-to-left.</bdo>

    <!-- sup -->
    <p>This is <sup>superscript</sup> text.</p>

    <!-- sub -->
    <p>This is <sub>subscript</sub> text.</p>

    <!-- img -->
    <img src="image.jpg" alt="Image Description">

    <!-- map -->
    <img src="planets.jpg" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">
        <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
    </map>

    <!-- object -->
    <object data="object.swf" type="application/x-shockwave-flash">
        <param name="movie" value="object.swf">
    </object>

    <!-- param -->
    <object data="video.mp4" type="video/mp4">
        <param name="autoplay" value="true">
    </object>

    <!-- table -->
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>

    <!-- form -->
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <input type="submit" value="Submit">
    </form>

    <!-- iframe -->
    <iframe src="https://www.example.com" title="Embedded Website" width="800" height="600"></iframe>

    <!-- script -->
    <script src="script.js"></script>

    <!-- noscript -->
    <noscript>
        <p>This website requires JavaScript to function properly.</p>
    </noscript>
</body>
</html>

以下のCSS3の要素を持つページ

色
背景
アニメーション
マルチカラム
フレキシブルボックス

この例では、色と背景のスタイルはbody要素に適用される。
アニメーションはCSS3の@keyframesルールを使用して定義し、div要素に適用して回転アニメーションを実現する。
マルチカラムはcolumn-countとcolumn-gapプロパティを使用して3つのカラムに分割される。

フレキシブルボックスはdisplay: flexを使用して親要素をフレキシブルコンテナにし、内部の子要素を等間隔で配置する。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Elements</title>
    <style>
        /* 色 */
        body {
            color: #333 ; /* テキストの色 */
        }

        /* 背景 */
        body {
            background-color: #f0f0f0 ; /* 背景色 */
        }

        /* アニメーション */
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .animated-box {
            width: 100px;
            height: 100px;
            background-color: #007bff ;
            animation: rotate 2s linear infinite;
        }

        /* マルチカラム */
        .multi-column-container {
            column-count: 3; /* カラム数 */
            column-gap: 20px; /* カラム間の間隔 */
            width: 600px;
            margin: 20px auto;
        }

        .multi-column-content {
            margin: 5px;
        }

        /* フレキシブルボックス */
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 200px;
            background-color: #ffc107 ;
            margin: 20px;
        }

        .flex-item {
            width: 100px;
            height: 100px;
            background-color: #28a745 ;
        }
    </style>
</head>
<body>
    <h1>Color, Background, Animation, Multi-column, and Flexbox</h1>

    <!-- アニメーション -->
    <div class="animated-box"></div>

    <!-- マルチカラム -->
    <div class="multi-column-container">
        <div class="multi-column-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="multi-column-content">
            <p>Integer sed odio at urna tincidunt bibendum.</p>
        </div>
        <div class="multi-column-content">
            <p>Vestibulum sed metus vel purus condimentum.</p>
        </div>
        <div class="multi-column-content">
            <p>Fusce mollis quam in neque malesuada, eget congue dui ullamcorper.</p>
        </div>
        <div class="multi-column-content">
            <p>Phasellus dignissim tortor vel odio feugiat vehicula.</p>
        </div>
    </div>

    <!-- フレキシブルボックス -->
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

9章　オフラインWebアプリケーション

オフラインWebアプリケーション

ネットワークに接続していないオフラインの状態でも利用可能なwebアプリケーションのこと。

オフライン状態でもアプリケーションを利用するために、アプリケーションキャッシュという機能がある。

1) webブラウザからアプリケーションにアクセス
2) キャッシュマニフェストを読み取り
3) そこに書かれたファイルをローカル環境に保存
4) 保存されたファイルを利用してアプリケーション利用を実現する

オフラインwebアプリケーションのメリット
・webブラウザがオフラインでもwebアプリケーションを利用できる
・2回目のアクセス以降、ローカルファイルはネットワーク経由のファイルよりも早く読み込まれる
・すべてのファイルをサーバから取得しないためサーバ負荷を軽減できる

デメリット
・サーバ側のファイルを更新したら、ユーザーのローカルキャッシュファイルも更新が必要
・キャッシュマニフェストの記述を誤れば、変更ファイルが更新されないことがある

キャッシュマニフェスト

オフラインwebアプリケーションでは指定したファイルをローカルに保存して、オフリアン時にはそれを利用する。

キャッシュマニフェストには、CACHE, FALLBACK, NETWORK, SETTINGSのセクションがある

ローカルに保存されたファイルを更新するにはキャッシュマニフェストを更新する。

キャッシュマニフェストの記述方法

キャッシュマニフェストを用いてローカル環境に保存するファイルを指定する

一般的に、拡張子「appcache」を使う。
CACHE: はキャッシュするファイルを記述する。
NETWORK: 常にネットワークから取得するファイルを記述する。
　　　　　サーバ上での処理が必要なファイルが対象になる。
FALLBACK: ローカル環境にキャッシュされたファイルが
　　　　　　存在しない場合の代替ファイルを指定する
SETTINGS: キャッシュの利用方法を指定する。
　　　指定がない場合はネットワークに接続されていてもキャッシュを
　　　利用する。
　　　prefer-onlineを指定すると、ネットワーク接続されている場合には
　　　webサイトからファイルをダウンロードする。

CACHE MANIFEST
# バージョン情報
CACHE MANIFEST VERSION 1.0

# キャッシュするリソースのリスト
CACHE:
/js/main.js
/css/styles.css
/images/logo.png
/index.html

# オフライン時に表示するフォールバックページ
FALLBACK:
/ /offline.html

# オンライン時に毎回再取得するリソース
NETWORK:
*

# キャッシュマニフェストのバージョン更新時に古いキャッシュをクリーンアップ
# バージョン番号を変更することでキャッシュを無効化
# NETWORK セクションの '*' は、必ずキャッシュマニフェストを再取得する
# それ以外のファイルは、バージョンが変更されるまでキャッシュされたまま

キャッシュマニフェストは、MIMEタイプをtext/cache-manifestとする必要がある。
設定方法はwebサーバによって異なる。

Apache HTTP Serverの場合)
設定ファイルまたは.htaccessに以下の設定を追加する

AddType text/cache-manifest .appcache

HTMLファイルからの指定方法

ブラウザにキャッシュマニフェストの存在を認識してもうためにサイト利用時にアクセスされるHTMLファイルにキャッシュマニフェストを指定する。

html要素にmanifest属性を追加する

キャッシュマニフェストには基本的に全キャッシュ対象のファイルを書くことが推奨される。
しかし、キャッシュマニフェスト指定のHTMLファイル内ではキャッシュマニフェスト内でキャッシュの指定がなくても自動的にキャッシュされる。

<html manifest="example.appcache">
</html>

キャッシュファイルの更新

ローカル環境にファイルがキャッシュされた後、
-> サーバ側でそのファイルが更新されてもwebブラウザ側にはその更新が反映されない。
-> 反映するためには、キャッシュマニフェストそのものを更新する必要がある。

オフラインwebアプリケーションのネットワーク接続時/オフライン接続時の動作イメージ

ネットワーク接続時の動作イメージ:

ユーザーがアプリケーションにアクセスすると、ネットワーク経由でアプリケーションのコードやリソースがダウンロードされます。
ダウンロードされたリソースはキャッシュに保存され、次回以降のアクセス時にキャッシュから読み込まれます。これにより、ページの読み込み速度が向上します。
アプリケーションはオンラインで正常に動作し、ネットワーク経由でデータの送受信が行われます。ユーザーはリアルタイムの情報やアップデートを取得できます。

オフライン接続時の動作イメージ:

ユーザーがネットワークから切断された状態でアプリケーションにアクセスすると、最初にキャッシュされたリソースが使用されます。これにより、基本的なアプリケーションの機能はオフラインでも利用可能です。
キャッシュに保存されているページやデータを表示しながら、オフラインのための特別なフォールバックページやコンテンツが表示されることもあります。これは、CACHE MANIFEST ファイルで定義されたフォールバックルールに従います。
ユーザーがアプリケーション内で何らかの操作を行った場合、キャッシュ内に保存されているデータやリソースを操作することができます。これにより、オフライン状態でも一部の機能が制限されないようになります。
オンラインに復帰した場合、アプリケーションはネットワーク経由でデータを同期し、新しいコンテンツや変更内容を取得します。この際、オフラインで行った操作や変更も同期されます。

オフラインWebアプリケーションは、
・オンライン時とオフライン時の両方で利用可能
・一部の機能やデータがオフライン状態でもアクセス可能
ただし、完全なオンライン体験と比べると一部の制約があるため、アプリケーションの設計やキャッシュ戦略に注意が必要になる。

アプリケーションキャッシュの確認・削除

保存されたアプリケーションキャッシュはwebブラウザから確認、削除することができる。
Chromeの場合)
chrome://appcache-internals/と入力すると保存されているキャッシュ一覧がh常時される。
Removeで削除、View Entriesでキャッシュの詳細を確認できる

Firefoxの場合)
アドレスバーにabout:cacheと入力する
画面が表示される

IEの場合)

インターネットオプションから確認する

10章　Web関連の規格と技術

HTTPのメッセージの構成：
　・開始行(リクエストライン/ステータスライン)
　・0行以上のヘッダフィールド
　　　General-header(要求と応答いずれにも使える)
　　　Request-header(要求の際に追加できる)
　　　Response-header(応答の際にサーバが追加できる)
　　　Entity-header(メッセージボディについての情報を定義する)
　・CRLFの改行
　・メッセージボディ

HTTPのリクエストメッセージのメソッドは8種類
　1) HEAD(ヘッダのみを取得)
　2) GET
　　　リソースを取得
　3) POST
　　　リソースの子リソースの作成、リソースへのデータ追加
　4) PUT
　　　メッセージボディに含まれる情報を保存
　5) DELETE
　　　リソースの削除
　6) OPTIONS(リクエストURIがサポートしているメソッドを取得)
　7) TRACE(自分宛てにリクエストメッセージを返却し
　　　　　　ループバック試験に使用)
　8) CONNECT(プロキシ動作のトンネル接続への変更のために使用)

HTTPのレスポンスメッセージはステータスコードが含まれる
1xx: Informational 情報提供のコード
2xx: Success 成功
3xx: Redirection 転送
4xx: Client Error クライアントエラー
5xx: Server Error サーバエラー

HTTP

HTTP: HTMLや画像などの表示を提供するサーバ(Webサーバの事)
アプリケーション層のプロトコル

HTTPの通信は、
・リクエストメッセージを送信して、
・レスポンスメッセージを受信する。

HTTPSプロトコル

HTTPS: セキュリティを確保した通信路上でHTTP通信をすること。
データを暗号化して送受信するTSLプロトコル、SSLプロトコルを使う。

1) SSL/TSLセッション確立
　鍵交換・認証処理など
2) HTTPセッション

HTTPのメッセージ構造

リクエストラインまたはステータスライン（Request Line / Status Line）
　リクエストの場合はクライアントからの要求を示す行。
　ステータスの場合はサーバーからの応答の状態を示す。
ヘッダー（Headers）
キーバリューペア形式で、リクエストやレスポンスに関するメタデータを含む。
空行（空白行　CRLF）
ヘッダーとボディを区切る空行
リクエストの場合はヘッダーの終了を、レスポンスの場合はステータスラインとヘッダーの終了を示す。
メッセージボディ（Body）
必要に応じて、データやコンテンツを含む部分。
リクエストやレスポンスによって異なります。

HTTPのリクエストメッセージ

GET /example.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml

リクエストライン：
　　GET /example.html HTTP/1.1。
　　GETメソッドを使用して /example.html というリソースを要求
　　HTTPのバージョンは1.1を使用

ヘッダー：ホスト名、ユーザーエージェント、受け入れるメディアタイプ（MIMEタイプ）を指定。
空行：ヘッダーとボディを区切るための空行がある（ここでは省略）。

このHTTPリクエストは、クライアントがサーバーに対して /example.html というリソースをGETメソッドで要求。
リクエストラインとヘッダーには、要求の詳細情報が含まれている。

HTTPのレスポンスメッセージ

1xx - Informational (情報)

例: 100 Continue

mathematicaCopy codeHTTP/1.1 100 Continue

このステータスコードは、リクエストを受け取ったサーバーが要求を受け入れ、クライアントがリクエストを続行できることを示す。

2xx - Successful (成功)

例: 200 OK

phpCopy codeHTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

このステータスコードは、リクエストが成功し、レスポンスが正常に返されたことを示す。レスポンスボディにはHTMLコンテンツが含まれる。

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

例: 302 Found

vbnetCopy codeHTTP/1.1 302 Found
Location: https://www.example.com/new-page

このステータスコードは、リクエストされたリソースが一時的に別の場所にあることを示し、新しいURLへのリダイレクトを提供する。

4xx - Client Error (クライアントエラー)

例: 404 Not Found

arduinoCopy codeHTTP/1.1 404 Not Found
Content-Type: text/plain

The requested resource was not found on this server.

このステータスコードは、リクエストがクライアントの誤りや要求されたリソースが存在しないことを示す。

5xx - Server Error (サーバーエラー)

例: 500 Internal Server Error

vbnetCopy codeHTTP/1.1 500 Internal Server Error
Content-Type: text/plain

An internal server error occurred while processing your request.

このステータスコードは、サーバー側で何らかのエラーが発生し、リクエストの処理が失敗したことを示す。

リクエストヘッダフィールド

Host: サーバーのホスト名とポート番号を指定
例: Host: www.example.com
User-Agent: クライアントのユーザーエージェント情報を含み、
クライアントの種類やバージョンなどを示す。
例: User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: クライアントが受け入れるメディアタイプ（MIMEタイプ）を
指定。
例: Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Content-Type: リクエストボディのコンテンツタイプを指定
例: Content-Type: application/json
Authorization:
認証情報を含むトークンやクレデンシャルを送信し、サーバーがリクエストを認証するために使用
例: Authorization: Bearer <token>

レスポンスヘッダフィールド

Date: レスポンスが生成された日付と時刻を示す。
例: Date: Sat, 22 Aug 2023 12:34:56 GMT
Server: サーバーソフトウェアの名称とバージョンを示す。
例: Server: Apache/2.4.41 (Unix)
Content-Length: レスポンスボディの長さをバイト単位で示す。
例: Content-Length: 12345
Content-Type: レスポンスボディのコンテンツタイプを示す。
例: Content-Type: text/html; charset=utf-8
Location: リダイレクト時に新しいURLを指定す。
例: Location: https://www.example.com/new-page

HTTPでの認証

HTTPは特定のファイルへのアクセス制限するために認証が可能
認証方法は、
1) Basic認証
　ユーザー名とパスワードを「:」で接続し、Base64でエンコードして送信することで認証する。
しかし、これは盗聴や改善が簡単にできる。
2) Digest認証
　盗聴や改善を防ぐために、ユーザー名とパスワードをMD5でハッシュ化して送信して認証する。

クッキー

HTTPはステートレスプロトコル(システムの現在の状態を保持しない)。

webサーバとwebブラウザの間の状態管理は出来ない。
webブラウザにクッキー(状態管理情報)を保持することで、HTTPでの状態管理を行う。

クッキーの用途は、
・webサイト上のログイン状態
・ECサイト上のカート情報
・広告配信業者のアクセス履歴
などを記録する。

ネットワーク・サーバ関連技術

IP: コンピュータ間の通信を規定するプロトコル
　IPアドレスはコンピュータの住所

TCP: IPの上でアプリケーション間の通信を規定するプロトコル
HTTPで用いられる

DNS: ドメイン名とIPアドレスとの対応付けを管理するシステム

OSI参照モデル

物理層（Physical Layer）:
物理的な接続
データリンク層（Data Link Layer）:
直接接続されている機器のデータ転送
ネットワーク層（Network Layer）:
通信経路の選択、中継
トランスポート層（Transport Layer）:
誤り訂正や再送処理など、データ転送の信頼性確保
セッション層（Session Layer）:
ログイン、ログアウトなどセッション
プレゼンテーション層（Presentation Layer）:
データ変換や圧縮
アプリケーション層（Application Layer）:
アプリケーション間のデータ交換

TCP/IPの階層構造と対応するOSI参照モデルの階層:

アプリケーション層 (Application Layer) - OSI参照モデルの第7層に対応
- インターネットアプリケーションやサービスとの通信を担当
- HTTP、FTP、SMTPなどのプロトコルが含まれる
トランスポート層 (Transport Layer) - OSI参照モデルの第4層に対応
- データセグメンテーション、エラー検出、再送制御などを行う
- TCPとUDPがこの層に相当
インターネット層 (Internet Layer) - OSI参照モデルの第3層に対応
- ネットワーク間のルーティングとパケット転送を担当
- IPプロトコルがこの層に相当
ネットワークインターフェース層 (Network Interface Layer) - OSI参照モデルの第1および第2層に対応
- 物理的なネットワークメディアを通じてデータを転送
- イーサネット、Wi-Fi、PPPなどが含まれる

TCP/IP(Transmission Control Protocol/Internet Protocol)

現在のインターネット/イントラネット通信で標準的に用いられているプロトコル。

IP(Internet Protocol)
レイヤ3(ネットワーク層)のプロトコル。
規定しているのは、
・アドレッシング(ネットワーク参加機器の住所付け)
・ルーティング(相互接続された複数ネットワーク内での経路選択)

IPでコンピュータ間の通信機能が提供される。
IPアドレスはIPで割り振られた住所の事。
　　通信時のコンピュータ識別に利用する。

IPv4およびIPv6という2つの主要なバージョンがある。
それぞれ32ビット（IPv4）または128ビット（IPv6）の数値で表される。

TCP(Transmission Control Protocol)

レイヤ4(トランスポート層)のプロトコル。
ネットワーク層とセッション層以上の橋渡しとなる。
HTTPで用いられている。

IPだけでは届いた情報をどのアプリケーションで処理すればいいか分からない。
-> TCPでアプリケーション同士をつなぐ処理を行う。

通信方式にコネクション型を用いる。順序制御や再送機能など信頼性が高い。

UDP(User Datagram Protocol)

TCPと同じくレイヤ4(トランスポート層)のプロトコル。
TCPと同様にネットワーク層とセッション層以上の橋渡しをする。

TCPとの違いは、
・TCPはアプリケーション同士をつなぐ機能を提供している
・UDPはIPの機能をアプリケーションから直接利用し、一方的にデータを送信する。
・TCPの通信方式はコネクション型、UDPはコネクションレス型
・TCPは順序制御や再送機能がある、UDPにはない
・TCPのほうが信頼性が高い。しかし転送速度はUDPのほうが早い。

ドメイン

IPネットワークにて、個々のコンピュータを識別する名称の一部。

ドメイン（Domain）もIPアドレス（Internet Protocol Address）は、インターネット上でコンピューターやリソースを特定するための異なる方法。

ドメイン名は人間にとってわかりやすい識別子、IPアドレスはコンピューターやネットワークデバイスに対する数値的な識別子となる。

ドメイン名とIPアドレスは、基本的には対応関係を持っている。

ドメイン名は、ユーザーにとって覚えやすく理解しやすい形式でインターネットリソースを識別する。

実際の通信はIPアドレスを使って行われる。

DNS（Domain Name System）がドメイン名を対応するIPアドレスに変換する。
DNSを用いて、ドメイン名に対応するIPアドレスを調べることを名前解決という。

"www.example.com"というドメイン名では、
　"com"がTLD
　"example"がセカンドレベルドメイン
　"www"がサブドメイン

名前解決にはDNSレコードというデータを使い下の階層のネームサーバへ次々と問い合わせを行う

WHOISサービスを使えばIPアドレスやドメインの登録車情報を閲覧できる

Webサーバ関連技術

以下の技術が役割を果たすことで、効率的なウェブサービスの提供とセキュアな通信が実現される

・webサーバ
・プロキシ
・負荷分散装置(ロードバランサ)
・ファイアーウォール
・バーチャルホスト

1. Webサーバ (Web Server):
webサーバは、HTTPプロトコルを使用してクライアントからのウェブページやリソースのリクエストを受け付け、それに対するレスポンスを返す。

・クライアントのウェブブラウザからのHTTPリクエストを受信
・ウェブページや画像、動画などの静的・動的コンテンツを提供する。
代表的な例) Apache、Nginx、Microsoft IISなど

2. プロキシ (Proxy):
プロキシは、クライアントとサーバー間に存在し、クライアントのリクエストとサーバーのレスポンスを中継する

プロキシを使うメリット:
・セキュリティの向上
・アクセス制御
・キャッシュを活用した高速化

リバースプロキシは、クライアントと複数のバックエンドサーバーの間で負荷分散を行う際に使う。

3. 負荷分散装置 (ロードバランサ) (Load Balancer):
トラフィックが複数のサーバーに均等に分散されるようにするための装置やソフトウェアのこと
トラフィックの増加やサーバーの障害時にも安定したサービスを提供する

負荷分散装置のメリット:
複数のサーバーが協力してアプリケーションの処理を行い、
・高可用性と
・パフォーマンスの向上
が狙える

4. ファイアーウォール (Firewall):
ネットワークやシステムを悪意のあるアクセスや攻撃から保護するためのセキュリティ装置

設定に基づいてトラフィックをフィルタリングすることで、不正なアクセスを阻止する。

方法:
・IP, TCP, UDPのパケットフィルタリング
・HTTPなどのアプリケーションプロトコルを制御する。

主要なソフトウェア実装:
ipfw(UNIX), iptables(Linux)など

利用される場面:
・webサーバやネットワークにおけるセキュリティ対策

例えば、社内ネットワークと外部ネットワークとの通信を中継、制御し、特定ネットワークの安全を維持する。

5. バーチャルホスト (Virtual Host):
1つの物理的なサーバー上で複数のウェブサイトをホストするための技術

1つの物理的なサーバー内で複数のドメインやサブドメインに対応するウェブサイトを独立して運用することが可能

メリット:
・コストの削減
・リソースの最適活用
が可能

IPベースバーチャルホストと名前ベースバーチャルホストがある

データベース

データベース操作の言語は3つある。

1) DDL(Data Definition Language データ定義言語)
DDLコマンドは、データベースの構造を定義・変更する

CREATE
　テーブルや制約条件を定義

ALTER
　テーブルやインデックスの構造を変更

DROP
　テーブルの削除

2) DML(Data Manipulation Language データ操作言語)
テーブルのデータの操作を行う

SELECT
　レコード抽出

INSERT
　レコード挿入

DELETE
　レコード削除

UPDATE
　レコード更新

3) DCL(Data Control Language データ制御言語)
データベースのアクセス権や権限の管理を行う

BEGIN
　トランザクション開始

COMMIT
　トランザクション終了

ROLLBACK
　トランザクション取り消し

-- トランザクションを開始
BEGIN;

-- データの更新などの処理

-- 変更を確定（コミット）
COMMIT;

-- 変更を取り消し（ロールバック）
ROLLBACK;



-- ユーザーにSELECT権限を付与する
GRANT SELECT ON employees TO user123;



-- ユーザーからSELECT権限を取り消す
REVOKE SELECT ON employees FROM user123;

XHTMLについて

HTMLをXMLの文法で定義したもの。

HTMLとの相違点：
・文章の先頭にxml宣言文を書く
・文字の大文字/小文字が厳密に区別される
・要素は必ず開始タグ、終了タグがないといけない

マイクロデータ

HTML文書内の特定の要素に追加されるマークアップ形式
構造化されたデータを提供するために使用される

映画 "Inception" の情報をマイクロデータでマークアップした例。

itemscope属性: 要素をマイクロデータのアイテムとして宣言
itemtype属性: そのアイテムの種類（スキーマのURL）を指定
itemprop属性: その要素がどのプロパティに関連付けを示す

マイクロデータのメリット:
マイクロデータのマークアップを使用することで、
・検索エンジンや他のアプリケーションがウェブページ内の情報を理解しやすくなる
・検索結果や他のサービスでの表示が向上する

<div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Inception</h1>
    <p>
      <strong>Director:</strong> <span itemprop="director">Christopher Nolan</span><br>
      <strong>Release Date:</strong> <time itemprop="datePublished" datetime="2010-07-16">July 16, 2010</time><br>
      <strong>Genre:</strong> <span itemprop="genre">Science Fiction</span><br>
      <strong>Rating:</strong> <span itemprop="contentRating">PG-13</span>
    </p>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <strong>Rating:</strong> <span itemprop="ratingValue">8.8</span><br>
      <strong>Reviews:</strong> <span itemprop="reviewCount">5645</span>
    </div>
  </div>

RDFaとOGP

RDFaとOGPは、ウェブページのセマンティクスを向上させ、コンテンツの理解と共有を促進するための手段として活用される

RDFa（Resource Description Framework in Attributes）:

概要: RDFaは、HTMLやXMLの属性を使用してセマンティックデータをマークアップする(ウェブ上のリソースとその関係性を記述する)

リンクされたデータ（Linked Data）の概念を支援し、ウェブ上の情報を構造化する

Web上のHTML文書にインラインで注釈を追加するためのシステム。
使用例: ウェブページ上の人物の情報やその関連するデータ、イベントの詳細などをマークアップ
メリット:
- セマンティックウェブの概念: RDFaはセマンティックウェブの概念に従い、ウェブ上の情報を意味のある関連性を持つデータとして構造化する
- リンクされたデータ: RDFaによってリンクされたデータが提供されるため、異なるデータソース間での情報統合が容易になる。
- 検索エンジン最適化: RDFaによって提供されるセマンティック情報は、検索エンジンにとって理解しやすくなり、検索結果の精度が向上する

OGP（Open Graph Protocol）:

概要: ソーシャルメディアプラットフォーム上でコンテンツをシェアする際に、コンテンツのタイトル、説明、画像などの情報を提供するためのプロトコル

主にFacebookによって提案されたが、他のプラットフォームでも広く使用される
使用例: OGPメタタグをウェブページに追加することで、リンクをソーシャルメディア上でシェアする際に、見出し、説明、プレビュー画像などの情報をカスタマイズできる。
メリット:
- リンクの魅力的な表示: OGPによって提供されるプレビュー情報により、リンクがより魅力的に表示され、ユーザーがコンテンツをシェアしやすくなる
- コンテンツの一貫性: OGPを使用することで、リンクを共有する際にコンテンツの一貫性を保つ
- ソーシャルメディア最適化: ソーシャルメディアプラットフォーム上でのコンテンツ共有が最適化され、プレビュー情報が正しく表示されるため、ユーザーの関心を引きやすくなる

DOM(Document Object Model)

HTML文書、XML文書の要素にプログラムからアクセスするためのAPI

JavaScriptを用いてDOMを操作することによって文書を取得・変更したり、要素の値を動的に変更できる。

HTMLファイルのDOMツリーの例)
HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <h1 id="main-title">Welcome to DOM Example</h1>
  <p>This is a simple example of the Document Object Model (DOM).</p>
  <ul>
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
    <li class="list-item">Item 3</li>
  </ul>
</body>
</html>

DOM

- Document
  - <!DOCTYPE html>
  - <html>
    - <head>
      - <meta>
      - <title>
    - <body>
      - <h1 id="main-title">
      - <p>
      - <ul>
        - <li class="list-item">
        - <li class="list-item">
        - <li class="list-item">

AjaxとJSON

例) Ajaxを使用してdata.jsonという外部のJSONファイルを取得し、その内容を解析してウェブページに表示

JavaScriptのXMLHttpRequestオブジェクトを使用して非同期通信を行い、取得したJSONデータを解析してDOM要素に挿入する

JSON(JavaScript Object Notation)

{
  "name": "John Doe",
  "age": 30,
  "occupation": "Web Developer"
}

Ajax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax and JSON Example</title>
</head>
<body>
  <h1>Person Information</h1>
  <p id="person-info">Loading...</p>
  
  <script>
    // Ajax request
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        var personData = JSON.parse(xhr.responseText);
        var personInfoElement = document.getElementById('person-info');
        
        // Update the paragraph content with JSON data
        personInfoElement.textContent = 'Name: ' + personData.name + '\n' +
                                        'Age: ' + personData.age + '\n' +
                                        'Occupation: ' + personData.occupation;
      }
    };
    xhr.send();
  </script>
</body>
</html>

セッション

ネットワーク通信でログイン(接続)からログオフ(切断)するまでの一連の通信のこと

何故使う?
-> HTTPはステートレスなプロトコルで画面遷移が同一ユーザーか判別できない。
-> そこで、複数ページにまたがるwebアプリケーションでは一連の通信をセッションとして扱う。

セッションを実現する仕組み:
・クッキー
・URL rewriting

webブラウザはURLとそのクッキーを紐づけて管理し、次回のアクセスではクッキーを送信する

Base64

64種類の文字(英文字、+, / の2種類の記号)と「=」記号によりマルチバイト文字やバイナリデータを扱うためのエンコード方式

使用例)
・電子メールでの処理イメージで添付ファイルを送る場合
・Basic認証

エンコードによりファイルサイズが元の約1.3倍になるため大きなファイルの転送に不向き。

Webサイトへの不正な攻撃手法の例

・SQLインジェクション
・クロスサイト・スクリプティング(XSS)
・クロスサイト・リクエスト・フォージェリ(CSRF)
・ディレクトリ・トラバーサル
・HTTPヘッダインジェクション

1. SQLインジェクション:

概要:ウェブアプリケーションのフォーム入力などで受け取ったユーザー入力を不正なSQLクエリとして実行させる攻撃

攻撃者はユーザー入力に不正なSQLコードを挿入し、データベースから情報を盗んだり操作する。
脅威:
・データベースのデータが盗まれる、改ざん
・機密情報の漏洩やデータ破壊

2. クロスサイト・スクリプティング（XSS）:

概要: ウェブアプリケーションにおいて、攻撃者が不正なスクリプトを挿入して、他のユーザーのブラウザで実行させる攻撃

主にユーザーが入力する場所（コメント欄など）で発生する
脅威:
攻撃者は他のユーザーに対して、
・偽のコンテンツを表示させる
・クッキーを窃取する
・セッションを乗っ取っとる

3. クロスサイト・リクエスト・フォージェリ（CSRF）:

概要: 攻撃者が認証済みユーザーの代わりに意図しない操作を実行させる攻撃

ユーザーがログインしている状態で、攻撃者が用意した悪意あるリクエストを送信する
脅威: 攻撃者はユーザーの名前で、
・パスワード変更
・資金移動
などの操作を実行させる

4. ディレクトリ・トラバーサル:

概要: ウェブアプリケーションがファイルのパスを適切に検証せずに処理する際に発生する

撃者は不正なパスを使用して、許可されていないファイルやディレクトリにアクセスする
脅威: 攻撃者が成功すれば、
・サーバー上の機密ファイル
・システム情報
にアクセスできる

5. HTTPヘッダインジェクション:

概要: 攻撃者がユーザー入力を含むHTTPヘッダーを操作し、不正なコンテンツを送信する攻撃

主にセキュリティ制御を回避したり、ユーザーに悪意あるコンテンツを表示させたりするために使用される
脅威: 攻撃者が成功すれば、ユーザーに対して
・フィッシング攻撃
・マルウェアの配布
などを行うことができる

ネットワーク上の脅威対策

1) 統合脅威管理
ネットワークを複数の脅威から統合的に保護する手法や製品の事。
1つの製品で以下を処理できる、
・ファイアーウォール
・VPN機能
・アンチウイルス
・不正侵入防御
・コンテンツフィルタリング

メリット:
・危機管理負担軽減や導入コスト削減

2) webサイト改ざん検知の手法

IPAでは以下の検知方法を推奨している
・オリジナルとサーバのHTMLファイルを比較してみる
・HTMLソースをセキュリティソフトでスキャンする
・FTPアクセスログを確認する

3) 侵入検知システム

ネットワークからの不正アクセスを検知する。
以下の種類がある、
・ネットワーク型IDS
ネットワークの通信内容を検査する

・ホスト型IDS
サーバに異常がないかを監視する

Webサイトやアプリケーションの制作

・MVCアーキテクチャ

・CMS(コンテンツマネジメントシステム)
コンテンツ(テキストや画像)を一元的に管理し、webページの作成や更新が可能なソフトウェアのこと。

例) Blog, wikiソフトウェア、ServiceNow

画像について

画像ファイルのフォーマットは以下、
・BMP
・GIF
・PNG
・JPEG
・SVG

一般的なフォーマットの選別、
・高品質な写真を表示したい -> JPEGやPNG
・透明な背景を使用したい -> PNG
・ベクトルデータを使用したい -> SVG

BMP (Bitmap Image):

概要: BMPはビットマップ形式の画像ファイル
　　ピクセルごとに色情報を格納する非圧縮フォーマット
　　高品質な画像を提供しますが、ファイルサイズが大きい
メリット: 高品質な画像を提供し、色情報の損失がないため画質が高い。
デメリット: ファイルサイズが大きく、圧縮されていないためウェブでの使用には向いていない。

GIF (Graphics Interchange Format):

概要: GIFは256色のパレットを使用する画像フォーマット
　　　アニメーションや透明な背景をサポートする
　　　ロスレス圧縮を使用しているため、ファイルサイズが小さい
メリット: アニメーションや透明な背景をサポートし、
　　　　　ファイルサイズが小さい。
デメリット: 色数が限られており、高品質の写真などには向かない。

PNG (Portable Network Graphics):

概要: PNGはロスレス圧縮を使用し、透明な背景をサポートする
　　　画像フォーマット
　　　画質の高さとファイルサイズの小ささを両立させる
メリット: 高品質な画像を提供し、
　　　　　透明な背景と小さなファイルサイズを持つ
デメリット: 一部の画像エディタでは対応していない

JPEG (Joint Photographic Experts Group):

概要: JPEGは写真や画像の圧縮に使用されるフォーマット
　　　可逆圧縮と非可逆圧縮のオプションがある
　　　非可逆圧縮ではデータが削減されますが、一部の画質が低下する
メリット: ファイルサイズを効果的に圧縮し、写真などの画像に適する
デメリット: 非可逆圧縮を使用する場合、
　　　　　一部の画質が低下する

SVG (Scalable Vector Graphics):

概要: SVGはベクトルベースの画像フォーマット
　　　拡大縮小しても画質が劣化しない。
　　コードベースで画像を表現するため、編集やアニメーションに適する
メリット: 拡大縮小しても画質が劣化しない、
　　　　　編集やアニメーションに適している
デメリット: 写真のような実写画像を効果的に表現するのは難しい

この記事が気に入ったらサポートをしてみませんか？

「HTML5プロフェッショナル認定試験レベル1」まとめ

試験範囲

1章 HTMLの基礎知識

2章 HTML5で追加された要素

セクション

構造を示す要素

テキスト

ChatGPT

以下の要素を持つページ

以下の要素を持つページ

9章 オフラインWebアプリケーション

オフラインWebアプリケーション

キャッシュマニフェスト

キャッシュマニフェストの記述方法

HTMLファイルからの指定方法

キャッシュファイルの更新

オフラインwebアプリケーションのネットワーク接続時/オフライン接続時の動作イメージ

アプリケーションキャッシュの確認・削除

10章 Web関連の規格と技術

HTTP

HTTPSプロトコル

HTTPのメッセージ構造

HTTPのリクエストメッセージ

HTTPのレスポンスメッセージ

リクエストヘッダフィールド

レスポンスヘッダフィールド

HTTPでの認証

クッキー

ネットワーク・サーバ関連技術

OSI参照モデル

TCP/IPの階層構造と対応するOSI参照モデルの階層:

TCP/IP(Transmission Control Protocol/Internet Protocol)

ドメイン

Webサーバ関連技術

データベース

XHTMLについて

マイクロデータ

RDFaとOGP

DOM(Document Object Model)

AjaxとJSON

セッション

Base64

Webサイトへの不正な攻撃手法の例

ネットワーク上の脅威対策

Webサイトやアプリケーションの制作

画像について

1章　HTMLの基礎知識

2章　HTML5で追加された要素

9章　オフラインWebアプリケーション

10章　Web関連の規格と技術