ウェブデザイン技能検定3級学科解説その7

1.インターネット概論

1-6.インターネット最新動向と事例

1.インターネット及びワールドワイドウェブ(WWW)に関わる各種最新動向について一般的な知識を有すること。

2.ウェブデザインに関る最新事例について一般的な知識を有すること。

 

インターネット及びワールドワイドウェブ(WWW)に関わる各種最新動向について

現時点でこの話は少々難しいかもしれないが、

過去問にこういう問題が出題されているので難しいとも言っていられない。

 

過去問

1. 各設問において、正しいものは1を、間違っているものは 2 を、該当設問の解答欄に記せ。

2017 年現在、HTML 5.1 は W3C 勧告として公開されている。

 

問題は2017年のモノなので正解は1なのだが、

2018年現在ではHTMLは5.2となっている。

HTML5.0とHTML5.1、そしてHTML5.2でできることをとりあえず解説しておくので

一度は目を通しておいて欲しい。

 

HTML5以前の仕様について

HTML2.0ではHTMLタグを使ってマークアップすることで論理構造の記述が可能になり、

HTML4.0ではCSSを使用することで視覚的なデザインの記述を分離できるようになった。

そしてHTML4.01からHTML5になったことで

ヘッダーやフッターのような文書構造専用のタグが設けられ、

よりシンプルに文書構造を示せるようになった。

その他にもフォーム機能の充実や動画・音声データの取り扱いがより簡易になり、

APIの追加も実施されるなど機能面の充実が図られたことがHTML5の特徴である。

 

HTML5.1に追加された要素や変更点について

HTML5.1では、HTML5で定義しきれなかった部分の仕様変更があった。

追加された機能の中で最も注目度が高いのは、レスポンシブWebデザインを簡単に実現できる「picture要素」。

従来はPCやスマートフォン、タブレットなど各端末用のWebページを用意し、

ユーザー環境に合わせて表示ページを変えていたが、

最近では1つのWebページを用意して表示方法を変える「レスポンシブWebデザイン」が主流となっている。

例えば、PCには大きい画像、スマートフォンには小さい画像を表示させたい場合、

画像を埋め込む「img要素」を使用すると表示画像の切り替えが面倒だが、

メディアリソースを指定する「source要素」をpicture要素に複数持たせるだけで、

端末に応じた画像を表示させることができる。

 

HTML5.2に追加された要素や変更点について

<dialog>要素の追加

この要素で括られた要素は、モーダルウィンドウのように表示されるようになる。

ダイアログボックスは、現在のWebでは広く見られるものではあるが、

JavaScriptを使ったり CSSだけで実装したりと、その実装方法は様々である。

しかし、裏を返せば、アクセシビリティの観点ではダイアログの表示部分は

セマンティックではないといった問題点も残ってた。

新しく用意された<dialog> タグを使うことで、こうした問題は解決さる。

Divタグで括ってダイアログを作る以上に、よりセマンティックな HTMLファイルにもなる。

使い方は非常にシンプルで、ダイアログで表示したい部分を<dialog> タグで括れば完了。

 

※セマンティックの意味をものすごく分かりやすく解説しているページがこちら

セマンティック HTML とはなんじゃろう

 

<main>要素の複数設置

<main>要素は、ある特定のページのメイン コンテンツを指し示すために使われるタグである。

HTML5.2以前では、この要素は各ページにユニークな コンテンツとして、1回限りの利用が許されていた。

しかし、昨今では JavaScriptのフレームワークやライブラリを使って、

シングル ページのアプリケーションを開発することも多くなってきた。

<main>要素を複数設置した場合、

ブラウザによっては最初に現れた<main>要素で括られた コンテンツしか表示しない、

といった挙動をするものもあった。

HTML 5.2では、そうした問題を解決するために

<main>要素を複数設置することができるようになった。

ただし、従来のルールと同じように、最初に表示できるメインコンテンツは1つだけで、

他はhidden属性をつけて隠す必要がある。

 

<legend>要素の ヘッダー表示

<legend>要素は、一連のフォーム群を括るためのタグである

<fieldset>要素の中のキャプション( タイトル)を表す要素である。

HTML 5.2以前では、<legend>要素の間にはプレインテキストしか指定できなかったが、

HTML 5.2以降では ヘッダー要素を入れ子で指定することができるようになった。

 

<style>要素の自由配置

これまで、 ページ内の要素のスタイリングを行うための<style>要素は、

HTML文書内の<header>内に設置するのが普通であった。

しかし、 HTML 5.2では、正式に<body>内のどこでも設置できるようになった。

ただし、勧告内の注意書きでは、パフォーマンス上の理由でやはりまだ

<header>内に書いたほうがいいと言及されている。

インラインでスタイルを指定しても、

<style> タグ以前に出てきた要素にもスタイルが適用されてしまうので、

再描画を誘発してしまうからである。

 

<iframe>要素のPayment Request API

W3Cは2017年9月にPayment Request APIを勧告している。

インターネットでの決済が日常的になっているために、

様々な決済フォームに変わり、決済の流れを標準化するために策定された。

HTML 5.2では、Payment Request APIをインラインフレームで実装できるようになった。

それ以前では、こうした決済はインラインフレームでは行うことができなかったが、

Stripeをはじめとした各種サードパーティ製の決済も、

画面を遷移せずに行えるようになった。

 

Payment Request APIを利用するには、「allowpaymentrequest」属性を<iframe>要素に付加する。

これによって、 ページを遷移せずに決済が行えるよう、ブラウザに許可を出すことができる。

 

まとめ

ウェブデザイン技能検定3級学科では、どのバージョンでどの機能が追加されたかや、

どのバージョンでどの機能が廃止されたかなどが問われる傾向にある。

従って、各バージョンでできることや、最新バージョンで追加された機能については

抑えておくべきだといえる。

 

とりあえず1.インターネット概論はここまで!

次回から2.ワールドワイドウェブ(WWW)法務について!

 


このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です