Help us understand the problem. What is going on with this article?

HTML5プロフェッショナル認定試験 無料セミナー

More than 5 years have passed since last update.

開催日:
2014年2月22日(土) 13時30分~16時30分
主催:LPI-JAPAN


認定試験は2つのレベル

  • レベル1 マークアッププロフェッショナル(静的なコンテンツを作成できる)
  • レベル2 アプリケーションデベロップメントプロフェッショナル(動的Webコンテンツが作成できる)

対象範囲

レベル1はJavaScriptの知識が必要ない。マークアップ、CSS3、レスポンシブデザインが主な対象となる。

試験概要

所要時間:90分
問題数:60問
優位性の期限:5年間
受験料:15,000

出題構成

Webの基礎知識、要素で67%をしめる。その他はCSS3が20%、レスポンシブWebデザインが10%

2月4日付で追加された新要素

Template要素

内容をスクリプトで挿入する範囲。HTML5.1から移行。

rb要素

ルビ要素。

rtc要素

同じくルビ要素

これらが加わりHTML5の要素は現在111種類

HTML5文書の全体構造

HTML5の特徴としては<!DOCTYPE html>、<meta charset="UTF8">が特徴的

base
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF8">
<tytle></tytle>

スタイルシートとスクリプトのデフォルト値が設定された。
type=text/csstype=text/javascriptと記載する必要がなくなった。

HTML5で削除された要素。

合計13の要素が削除された。

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • tt

HTML5で変更された要素

現在も仕様が変更されているので、今後変更される可能があるので注意

要素名 役割
b 以前は太字。現在は注目してほしいキーワードにつける。
cite その部分が作品のタイトルであることを示す。人名には使用しない
dl 用語解説型リスト。HTML4ではdefinition Listの略だったが、HTML5ではdescription Listの略。定義の意味がなくなったので注意。
hr 段落単位での内容の区切りを示す。セクションの中で話題や場面が変わる部分などで使用することを想定。
i イタリックで表記されるような部分。学名や船の名前、言語が異なっている部分などに使用する
s その部分を取り消したことを示す。すでに正しくない情報となってしまった部分や、無関係となった部分などに使用。
small  メインコンテンツには含まれない部分において、一般に小さな文字で掲載される部分。ページ下のCopyright情報とか
strong その部分が重要であることを示す。強調の意味合いはなくなった。入れ子にすることで重要性の度合いを高めることができる。
u 中国語の固有名詞とそうでない部分を区別したり、スペルが間違っている部分を示したい部分を示したい場合に使用。

HTML5で追加された要素

セクションを示す要素

要素名 役割
section 章や節のようなセクションを示す。(他のセクション要素が適当で無いセクションにはこれを使用する。
article ニュース記事、ブログ記事のように内容がそれだけで完結しているセクションをしめす。ブログの各コメントも該当する
aside メインコンテンツには含まれていない部分のセクションを示す。広告やリンクのリストなど。
nav 主要なナビであることを示す。主要でないナビゲーションには使用しない。音声ブラウザなどの利用者がすぐにナビゲーションに移動できるようにするため。

暗黙のセクション

セクションのタグがなくても、見出しのタグがあれば、セクションがあるものと認識する。

  • 見出しの階層が前の見出しと同じか高ければ、前のセクションを終了して新しいセクションを開始する。
  • 見出しの階層が前の見出しよりも低ければ、今のセクションの中でサブセクションを開始する。

ただし暗黙のセクションは@RiskList(削除されるかもしれない仕様)に入っているので注意。

ページの構造を示す要素

要素名 役割
header Webページのいわゆるヘッダー部分を示す要素。一般に、ロゴ画像や検索フォーム、ナビゲーションなどを含む部分。
main メインコンテンツを示す要素。各ページで共通している・重複している要素は含めない。
footer そのfooter要素のあるセクションに関する情報を入れる要素。上にあってもOK。ブログの「次の記事へ」、「前の記事へ」とか

テキスト関連の要素

要素名 役割
bdi 双方向テキストの中の分離・独立(isoleate)された範囲。
mark テキストの特定の部分を目立つようにして(ハイライト表示にして)注目してもらいたい場合に使用。
time コンピュータが読み取り可能な形式の日付・時刻をdatetime属性の値または要素内容で示す。
data 要素内容をコンピュータが読み取り可能な形式にしたデータをvalue属性(必須)の値で示す。
wbr 英単語の途中など、通常は行の折り返しが行われない範囲において、改行可能な位置を示す。空要素。

ルビ関連の要素

要素名 役割
ruby ルビを振る範囲全体
rb ruby base text。ルビをふる漢字部分
rt ruby text。ルビ・ふりがな
rtc ruby text container。rt要素のグループ。
rp ruby parentheses。ルビ未対応用の括弧。

ルビ要素の例

ruby
<ruby>
 <rb>女満別</rb>
 <rt>めまんべつ</rt>
</ruby>

ルビ要素の例2

ruby
<ruby>
 女<rb>満</rb><rb>別</rb>
 <rt>め</rt><rt>まん</rt><rt>べつ</rt>
 <rtc>
  <rt>me</rt><rt>man</rt><rt>betsu</rt>
 </rtc>
</ruby>

図表・図番を示す要素

要素名 役割
figure メインコンテンツから参照される図表
figcaption figure要素のキャプション

音声や動画などを組み込む要素

要素名 役割
audio 音声データを組み込む要素。音声データのurlをsource属性に指定
video 動画データを組み込む要素。動画データのurlをsource属性に指定
source 形式の異なる複数のデータを指定したい場合に使用
track 同期させるテキスト・トラック(字幕など)を指定する要素
embed プラグインを使用するデータを組み込むための要素
canvas ビットマップの動的グラフィックを表示。JavaScriptで制御

フォーム関連の要素

要素名 役割
meter ある範囲のどの位置かを示すフォーム部品(メーター)
progress タスクの進捗状況を示すフォーム部品(プログレスバー)
datalist input要素の選択肢(サジェスト機能のように入力候補を表示)
output 他のフォーム部品からの計算結果を表示させるフォーム部品 at risk
keygen 公開鍵暗号における秘密鍵・公開鍵のペアを生成するフォーム部品

その他の要素

要素名 役割
details 特定の操作(▶をクリックなど)で表示される詳細情報。at risk
summary details要素で最初から表示させる見出しや説明などの情報 at risk
dialog インタラクティブな操作のためのダイアログボックスやウインドウ、インスペクタなど at risk
template 内容をスクリプトで挿入する範囲

属性関連の追加と変更

グローバル属性

属性名
id 固有の名前
class 種類の名前
title 補足情報
lang 言語コード
style CSSの「プロパティ:値;」
accesskey ショートカットキー
tabindex タブキーによる移動の順序
dir 文字表記の標高(ltr/rtl/auto)
contenteditable 編集の可不可(true/false)
draggable ドラッグの可不可(true/false)
dropzone ドロップ時の挙動(copy/move/link)
spellcheck スペルチェックの有無(true/false)
translate ローカライズ時に翻訳するかどうか(yes/no)
hidden 非表示(指定するとtrue/指定しないとfalse)

これだけは覚えておくべきCSS3の仕様

セレクタとは?

スタイルの適用先を示す部分がセレクタ

Selector
div#wrapper {  //セレクタ
   width: 900px; //プロパティ: 値;
   padding: 1em; //プロパティ: 値;
   ...
}

属性セレクタ

CSS2.1 CSS3
[属性名] [属性名^="開始文字列"]
[属性名="属性値全体"] [属性名$="終了文字列"]
[属性名~="属性値の一つ"] [属性名*="含まれる文字列"]
[属性名|="属性値の-の前"]

CSS2.1とCSS3の擬似要素の書式の違い

CSS3からはコロンが2つになった。

CSS2.1 CSS3
:first-letter ::first-letter
:first-line ::first-line
:before ::before
:after ::after

セレクタの組み合わせ

  • セレクタA セレクタB Aの中に含まれるB
  • セレクタA セレクタB Aの子要素であるセレクタB
  • セレクタA セレクタB Aの直後にあるB
  • セレクタA セレクタB AよりもあとにあるB

CSS3の擬似クラス

擬似クラス名 意味
:first-child 最初の要素に適用
:first-of-type 最初の要素に適用(同一要素)
:last-child 最後の要素に適用
:last-of-type 最後の要素に適用(同一要素)
:nth-child(n) 前からn番目に適用
:nth-last-child(n) 後ろからn番目に適用
:nth-of-type(n) 前からn番目に適用(同一要素)
:last-of-type(n) 最後からn番目に適用(同一要素)
:only-child 一人っ子の要素に適用
:only-of-type 一人っ子の要素に適用(同一要素)
:disabled disabled状態の要素に適用
:enabled enabled状態の要素に適用
:checked checked状態の要素に適用
:target 「#◯◯◯」リンクのジャンプ先に適用
:root ルート要素(html要素)に適用
:empty 内容が空の要素に適用
not(セレクタ) 「セレクタ」に該当しない要素に適用
  • :not()自体は擬似クラスとしてはカウントされない。
  • ()内のセレクタだけを普通のセレクタとしてカウント

セレクタによる優先順位

CSS競合時の優先順位について

  • CCの表示していが競合した場合の優先度はセレクタで決められる。
  • セレクタを使用しない「style属性」による指定は最優先される

セレクタによる優先順位の計算方法

セレクタに含まれる次のものをそれぞれカウントして3桁の数字を作成。
その3桁の数字が大きなモノほど優先順位が高くなる。

セレクタによる優先順位の計算例

セレクタ 計算結果
div 001
.inner 010
div.inner 011
#logo 100
div#logo 101
body div#logo 102

色と半透明の指定方法

RGBからRGBAに

  • rgb( Red, Green, Blue)からrgba( Red, Green, Blue, Alpha)

Alphaが不透明度。

HSLA

  • hsla(Hue, Saturation, Lightness, Alpha)

左の引数から順に、色相、彩度、明度、不透明度。

その他にもopacity値も存在する。

回転・移動・拡大縮小

transformプロパティ

関数形式で表現される。

  • transform: rotate(45deg)
  • transform: translate(50px)
  • transform: scale(1.5)

transform: translate(100px, 50px)はposition: relative; left: 100px; top: 50pxと同じ。

transform: translate(50px) scale(50)など一度に複数の命令を設定できるのが便利な点。

トランジション

プロパティの変化を滑らかにする。パディングの変更、背景色の変更や、transformで移動させるなど。
transform: rotate(36000deg)などと指定して、transition:を設定すれば、滑らかに回転する。

アニメーション

トランジションは2つの間の状態変化を滑らかにしていた。
アニメーションはkeyframeの名前に関連する複数の事象に変化を加える。

animetion
@keyframes test{
 0% { //アニメーションの所要時間の%で指定。
   background-color: red;
 }
 25% { 
   background-color: yellow;
 }
 100% { //0%と100%は必ず指定する必要がある。
   background-color: red;
 }
}

他にもプロパティがあるのでそれぞれ覚えておく。

これだけは覚えておくべきその他の基礎知識

メディアクエリ

レスポンシブデザインを作るために非常な重要な機能。
仕様も確定しているので、覚えておくこと。

従来のメディアの指定方法

media
<link media="screen" ...>
<style media="screen" ... >
</style>
media
@media screen{
...
}

幅や解像度など、従来の属性にメディアの特性を指定できるのがメディアクエリ

HTML5
<link media="screen かつ幅が600px以上" ...>
<style media="screen かつ幅が1024px以下" ... >
</style>

メディアクエリの書式

  • メディア and (メディア特性:値)

いくつでも連結できる。

  • メディア and (メディア特性:値) and (メディア特性:値) ....

  • not メディア and (メディア特性:値) and (メディア特性:値) ....
    条件を逆にする

  • only メディア and (メディア特性:値) and (メディア特性:値) ....
    古いブラウザ対策

メディア特性とその値(抜粋)

メディア特性 説明
width 表示領域の幅(スクロールバーも含む) 実数+単位
min-width 表示領域の最小の幅(スクロールバーも含む) 実数+単位
max-width 表示領域の最大の幅(スクロールバーも含む) 実数+単位
height 表示領域の高さ(スクロールバーも含む) 実数+単位
device-width 出力メディアの画面の幅 実数+単位
min-device-width 出力メディアの画面の最小の幅 実数+単位
max-device-width 出力メディアの画面の最大の幅 実数+単位
resolution 出力メディアの解像度 実数+単位
orientation 縦長・縦横同じ(portrait)/横長(landscape) portrait,lanscape

メディアクエリの使用例

<link media="screen and (max-width: 1000px)" ... >
<link media="screen and (min-width: 1000px)" ... >

オフラインWebアプリケーション キャッシュマニフェスト

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

  • Webアプリケーション(Webサイト)をオフラインでも動作させる仕組み。 ### キャッシュマニフェストとは?
  • キャッシュするファイル、キャッシュしないファイル、その他の関連情報の指示ファイル(テキスト形式)

キャッシュマニフェストの使用例

CACHE MANIFEST #必ず1行目に記述

styles/default.css #省略すると「CACHE:」

CACHE: #キャッシュさせて使うファイルを指定
styles/default.css

NETWORK:
*  #「CACHE:」で指定されていないファイルは全て

SERING: #キャッシュ(モード)の設定
prefer-online #可能ならばネットからファイルを取得。デフォルトはfast(キャッシュを使う)

FALLBACK: #取得失敗時の代替ファイルを指定
offline.html

キャッシュマニフェストの指定方法

manifest
<!DOCTYPE html>
<html lang="ja" manifest="***.appcache">
...
</html>
  • 拡張子 → .appcache
  • MIMEタイプ →text/cache-manifest
  • エンコーディング → UTF-8
budougumi0617
業務ではGo/Ruby。以前はC/C++/C#。 最近はgithub.ioに書いてます。
https://budougumi0617.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした