今更聞けない!HTML5・CSS3

HTML5でできるようになったこととは?

「HTML」。HTMLとは、Hyper Text Markup Languageの頭文字を取ったものです。
私たちが普段読み書きする文章の、見出し・段落・箇条書きなどの要素をコンピュータに捉えさせるための文法ですね。
初期のHTML1.0が開発され、それからバージョンアップを重ね、2014年にHTML5が勧告されました。
今回はHTML5を使って出来ること、HTML4との違いをまとめました。

どんなデバイスでも再生出来る動画や音声データを埋め込める

これまでのHTMLでは、動画を使うには「Flash」を使っていました。
しかしHTML5では、動画や音声データをHTMLから扱えるようになりました。
新しく追加される<video>や<audio>を使用し、(<img>で画像を扱うように)動画や音声をシンプルに扱えるようになりました。

より明確に文書構造を示すことが出来る

今まではHTMLでWebページを構築すると、タグで文章が埋め尽くされてしまいました。
HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。

代表的なタグを紹介します。
■article … 記事であることを示します。
■aside … 余談・補足情報のセクションであることを示します。
■footer … 文書のフッター部分であることを示します。
■header … 文書のヘッダー部分であることを示します。
■nav … ナビゲーションであることを示します。
■section … 文書のそれぞれの要素を囲み、ひとつのセクションであることを示します。
■body… 文書の本体を表します。
■figure…… 図表であることを示します。
■figcaption…… 図表のキャプションを示します。
■wbr…… 改行しても良い位置を示します。
HTML5のタグを利用することで、
適切な要素に割り当てることが出来るようになります。

HTML5のDOCTYPE宣言の書き方

XHTML1.0 TranditionalのDOCTYPE宣言
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML4.1のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

HTML5のDOCTYPE宣言
<!DOCTYPE html>

かなり短くなりましたね。
HTML5はシンプルで覚えやすくなったとおもいます。

フォーム機能の拡張

HTML5から、<input>タグのtype属性に新しく追加された値には、下記のものなどがあります。
<input type=”email”> …… メールアドレス
<input type=”url”> …… URL
<input type=”search”> …… 検索テキスト
<input type=”tel”> …… 電話番号
<input type=”number”> …… 数値
<input type=”date”> …… 日付
<input type=”month”> …… 月
<input type=”week”> …… 週
<input type=”time”> …… 時間
<input type=”color”> …… 色

項目として不適切な文字を入力して、フォームをサブミットしようとすると、HTML5 Formsをサポートしたブラウザであればエラーが表示され、サブミットできません。

入力ルールを指定する属性

■placeholder属性 …… プレースホルダー
placeholder属性で指定した値が、入力欄に初期値として
表示されます。
テキストフィールドに初期値として、「キーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。
■required属性 …… 入力必須
required属性を指定すると、その入力項目が入力必須であることをブラウザに知らせることができます。
■pattern属性 …… 正規表現による入力制限
pattern属性を指定すると、正規表現を使って
入力値のパターンを指定することができます。
正規表現が使えることで、特定の文字列が含まれているかどうかや、半角英数・全角文字・ひがらなのみなど、入力制限を自由に設定できます。

CSS3とは?

CSS3を駆使すれば、描画表現の幅が広がる

HTML5とセットで紹介されたCSSの技術「CSS3」を使えば、下記のような処理をJavascriptを使わず、簡単に実現することが出来ます。
(「HTML5+CSS3」のように表記されることがよくありますが、CSS3はHTML5と一緒に使わなければならないわけではありません。
例えば、HTML4.01で記述されているwebページを、CSS3を使ってデザインすることもできます。)
■opacity……[要素の透明度を指定することができます。値…透明度の値
0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)
■border-radius ……角丸を指定することができます。
値…長さ
楕円半径の長さを指定する(初期値は0)
パーセンテージ
ボーダーボックスの幅と高さに対する楕円半径の
パーセンテージを指定する
■box-shadow …… ボックスに影をつけることができます
none
要素に影をつけない(初期値)
値…水平方向の距離 垂直方向の距離 ぼかし距離
広がり距離 影の色 inset
スペース区切りで、水平方向の距離 垂直方向の
距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。
■text-shadow …… テキストに影をつけることができます
値…none
テキストに影をつけない(初期値)
水平方向の距離 垂直方向の距離 影のぼかし半径 影の色
スペース区切りで<水平方向の距離> <垂直方向の距離>
<影のぼかし半径> <影の色>を指定する。
■linear gradients ……線形グラデーションを指定することができます。
■radial gradients……円形グラデーションを指定することができます。
■rotate …… 要素を回転表示することができます。
値…rotate(回転角度)
rotate()関数では、角度によって2D回転を指定します。
rotateX(回転角度)
X軸を軸とする角度によって時計回りの回転を指定します。
rotateY(回転角度)
Y軸を軸とする角度によって時計回りの回転を指定します。
rotateZ(回転角度)
Z軸を軸とする角度によって時計回りの回転を指定します。
■multiple columns…カラム幅とカラム数を指定することができます。
■multiplebackgrounds ……背景画像の複数指定ができます。
■scale ……要素を拡大・縮小表示することができます。
■skew ……要素を傾斜変形させることができます。

ご紹介したものは数ある中の一部ですが、その他にもCSS3を使えばアニメーションも使うことも出来ます。
ぜひ実際にさわってみていろいろ試してみてください。

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

筆者

A.Haraguchi

Bigmac inc. 制作部所属。2016年3月に入社しました。 ほぼ未経験の状態で入社し、戸惑うこともたくさんありましたが、会社のメンバー達に支えられながら今に至ります。 2児の母なので休日は子供との時間にしています。一緒に料理したり、家事を手伝ってもらったり、娘達が自分でできるようになっていく姿をみることが最近の楽しみです。

筆者が最近執筆した記事