HTML5・CSS3とは?

記事公開日:2018.05.09

728 PV


Webサイト制作をするにあたり、HTML、CSSは欠かせません。HTML5、CSS3へのバージョンアップで以前のHTML、CSSから変化したことを紹介します。

CSS3とは?

HTML5とセットで紹介されたCSSの技術「CSS3」を使えば、下記のような処理をJavascriptを使わず、簡単に実現することが出来ます。
(「HTML5とCSS3は必ずしも一緒に使わないとだめ、ということはありません。例えば、HTML4.01で記述されているWebページを、CSS3を使ってWebデザインすることもできます。)

CSS3の代表的なプロパティ

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

要素を傾斜変形させることができます。

HTMLの変化

HTMLとは、Hyper Text Markup Languageの頭文字を取ったものです。初期のHTML1.0が開発され、バージョンアップを重ね、2014年にHTML5が勧告されました。
スマホの普及でレスポンシブWebデザインの導入も増えた為HTML5、CSS3レイアウトの需要が高まりました。

動画や音声データを埋め込む

HTML5以前のHTMLでは、動画をWebコンテンツ内で使うには「Flash」を使用していましたが、HTML5は、動画・音声データをHTMLから使用できるようになりました。

HTML5から追加された<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をサポートしたブラウザであればエラーが表示され、送信することはできません。

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

HTML5で新しくinput要素に追加する入力ルールを指定するための属性です。

placeholder属性

プレースホルダー。placeholder属性で指定した値は、初期値として入力欄に表示されます。
例えばお問い合わせ内容に初期値として、「ご自由にご記入ください。」、などのヒントを示してユーザーの入力を助けることができます。

required属性

入力必須。required属性を指定すると、入力項目が入力必須であることをブラウザに知らせることができます。

pattern属性

正規表現による入力制限。pattern属性を指定すると、正規表現を使って入力の仕方を指定することができます。正規表現を使えることにより、半角英数や全角文字、カタカナのみなど、入力するルールを自由に設定することができます。

HTML5とCSS3

ご紹介したものは数ある中の一部ですが、紹介した以外にもCSS3を使えばアニメーションも使うことも出来ます。ネット上にデザインサンプルやレイアウトサンプルもあるので参考にしてみてはいかがでしょうか。ぜひ実際にさわってみてWeb制作を楽しんでください。

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

筆者

A.Haraguchi

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

筆者が最近執筆した記事