WEBサイト制作に欠かせないプログラミング言語(マークアップ言語)といえばHTML・CSSですよね。
現在は、HTML5・CSS3がリリースされており、HTML5とCSS3を使用してWEB制作するのが一般的な方法です。
今回は、HTML5・CSS3の特徴などを紹介します。
「HTML5・CSS3ってなに？」と疑問に思っている人は、ぜひ本記事を参考にしてください。
HTML5の特徴
HTML5の特徴は「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことです。
以前までは、divタグで「header」、「footer」などをidの名称に指定して使用していました。
現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになりました。
なので、これからはid名称に「header」、「footer」など指定するのではなく「header」、「footer」タグを使用するようにしましょう。
HTML5がリリースされるまでのコードの記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title> テストです </title> </head> <body> <div id="header"> ヘッダーです </div> <div id="nav"> <ul> <li>リストです</li> <li>リストです</li> <li>リストです</li> <li>リストです</li> <li>リストです</li> </ul> </div> <div id="main"> メインです。 <div id="section"> セクションです </div> </div> <div id="footer"> フッターです </div> </body> </html>
「header」、「section」、「nav」、「footer」などにdivを割り当てているのが特徴です。
HTML5ではこのようなdivの割り当てが不要になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title> テストです </title> </head> <body> <header> ヘッダーです </header> <nav> <ul> <li>リストです</li> <li>リストです</li> <li>リストです</li> <li>リストです</li> <li>リストです</li> </ul> </nav> <main> メインです。 <section> セクションです </section> </main> <footer> フッターです </footer> </body> </html>
「header」、「section」、「nav」、「footer」などにdivを割り当てがなくなりました。
こちらの方が検索エンジンWEBページの構造が伝わりやすくなります。
なので、検索結果の順位の変動にも影響する可能性もあります。
また、HTML5の記述の方がシンプルで見やすくなったのが特徴です。
HTML5ではこのような要素が追加されました。
| 要素名 | 使用用途 |
|---|---|
| footer | フッターの箇所に使用します 一般的にページの一番最後にフッターを設置しています |
| header | ロゴ・トップイメージなどの親要素に使用します |
| article | 記事・記事のコメント部分に使用するタグ。内容が単体で終わる箇所に使用する |
| aside | 補足情報の箇所に使用する |
| audio | 音声ファイルの箇所に使用する |
| canvas | 図形を描く際に使用する 初期値は横300、縦150になっている |
| datalist | 主にフォームで使用するタグです 入力欄などで入力候補となるデータリストを定義します |
| figure | 写真・イラストなど図表であることを示す際に使用します |
| menu | 操作メニューを作成する際に使用します |
| nav | ナビゲーションの箇所に使用します 主にグローバルナビゲーション部分に使用されることが多いです |
| output | 計算結果を出す際に使用します |
| section | ある程度情報がひとまとまりになっている部分に使用します 汎用性が高く、様々な箇所で使用することが可能です |
| source | audio・videoなどメディア要素の子要素として使用します 使用するファイルのURL指定する際に使用します |
| time | 日時を示す箇所に使用します |
HTML5は追加される要素があります。
それとは反対に廃止される要素も要素もあるので、紹介します。
以下の要素はHTML5で廃止される予定の要素です。
| 要素名 | 使用用途 |
|---|---|
| xmp | ソースをそのまま表示するための要素です コードをプログラムとして扱わず、そのまま表示させたいときに使用されます HTLML5からはpreタグやcodeタグだけを使用するようになりました |
| listing | ソースをそのまま表示するための要素です HTLML5からはpreタグやcodeタグだけを使用するようになりました |
| u | テキストにアンダーラインを引くための要素です HTLML5からはcssのtext-decoration: underlineで指定するようになりました |
| strike | 打ち消し線を引く要素です HTLML5からはcssのtext-decoration: line-throughで指定するようになりました |
| spacer | 間隔をあけるための要素です paddeing・marginなど使って間隔を指定します |
| isindex | 入力欄を作るための要素です HTLML5からはform・input type=”text”などを使用します |
| font | フォントの大きさ・種類・色を指定するための要素です HTLML5からはHTMLタグでfontを指定するのではなく、cssのfontプロパティで使用します |
HTML5の特徴・追加される要素・廃止される予定の要素などを紹介しました。
次はCSS3の特徴について紹介します。
CSS3の特徴
まずは、cssの基本的な役割について説明します。
cssは、WEBサイトのデザインを整える機能を持っています。
なので、美しいWEBサイトに仕上げるためにはcssが必要です。
cssには、css1・css2・css3の3つのバージョンがあります。
バージョンが上がるにつれて、機能が追加されます。
CSS3の機能
css3は2011年に公開されました。
今では、ほとんどのWEBサイトがcss3で制作されています。
また、css3は以下のブラウザに対応しています。
・Internet Explorer 9/10/11
・Firefox 29
・ Google Chrome 34
・Safari 5
・Opera 12
css3には新たにこのような機能が追加されました。
・グラデーション
グラデーションは「linear-gradient」でグラデーションを適用できます。
linear-gradientでは、角度・方向・開始色・途中色・終了色を指定することが可能です。
例えば、四角形の上部を白色・下部を黒色にグラデーションするとこのようになります。
<div style="width:300px; margin:10px; background: linear-gradient(#fff, #000);">サンプル</div>
デフォルトでは上方向からのグラデーションに設定されています。
方向はこのように指定することもできます。
html
<div id="sample1">サンプルです</div>
<div id="sample2">サンプルです</div>
<div id="sample3">サンプルです</div>
<div id="sample4">サンプルです</div>
<div id="sample5">サンプルです</div>
<div id="sample6">サンプルです</div>
<div id="sample7">サンプルです</div>
<div id="sample8">サンプルです</div>
css
#sample1{
width:300px;
margin:10px;
background: linear-gradient(to top, #fff, #000);
}
#sample2{
width:300px;
margin:10px;
background: linear-gradient(to bottom, #fff, #000);
}
#sample3{
width:300px;
margin:10px;
background: linear-gradient(to left, #fff, #000);
}
#sample4{
width:300px;
margin:10px;
background: linear-gradient(to right, #fff, #000);
}
#sample5{
width:300px;
margin:10px;
background: linear-gradient(35deg, #fff, #000);
}
#sample6{
width:300px;
margin:10px;
background: linear-gradient(90deg, #fff, #000);
}
#sample7{
width:300px;
margin:10px;
background: linear-gradient(135deg, #fff, #000);
}
#sample8{
width:300px;
margin:10px;
background: linear-gradient(180, #fff, #000);
}
また、このように%(パーセント)で割合をすることもできます。
html
<div id="sample1">サンプルです</div>
<div id="sample2">サンプルです</div>
<div id="sample3">サンプルです</div>
css
#sample1{
width:300px;
margin:10px;
background: linear-gradient(-45deg, #f00 70%, #fff, ##00f);
}
#sample2{
width:300px;
margin:10px;
background: linear-gradient(-45deg, #f00, #fff 70%, ##00f);
}
#sample3{
width:300px;
margin:10px;
background: linear-gradient(180, #fff, #000 70%);
}
グラデーションは線形だけではなく、円形で指定することもできます。
html
<div id="sample1">サンプルです</div>
<div id="sample2">サンプルです</div>
<div id="sample3">サンプルです</div>
css
#sample1 {
background: radial-gradient(#fff, #000);
}
#sample1 {
background: radial-gradient(ellipse farthest-side, #f00, #fff, #00f);
}
#sample1 {
background: radial-gradient(circle at top left, #f00, #fff, #00f);
}
・変形
要素に2D・3Dを変形するときに使用します。
移動・尺度・回転・軽度などを適用することが可能です。
・角を丸くする
css3以前もborder-radiusを使って角を丸くすることができました。
現在は、以前よりもより細かく設定できるようになりました。
実際にサンプルコードを見てみましょう。
border-radiusはこのように設定できます。
border-radius: 値ax 値bx 値cx 値dx/値ay 値by 値cy dy;
値ax:左上角丸の水平半径
値ay:左上角丸の垂直半径
値bx:右上角丸の水平半径
値by:右上角丸の垂直半径
値cx:左下角丸の水平半径
値cy:左下角丸の垂直半径
値dx:右下角丸の水平半径
値dy:右下角丸の垂直半径
html
<div id="sample1">サンプルです</div>
css
#sample{
width: 500px;
height: 100px;
text-aling: center;
background-color: #00f;
border: 1px solid #000;
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}
このように、1つ1つの角の水平方向・垂直方向の角の丸み具合を変更することが可能です。
上手にborder-radiusを使用することで、複雑な図形を表現することもできます。
・ボックスに影のエフェクトをつける
ボックスシャドウもcss3よりも以前のバージョンから使用することができました。
css3では、より細かいところまでシャドウのエフェクトを設定することが可能です。
box-shadow: 値1(距離) 値2(距離) 値3(距離) 値4(距離) 値5(カラー);
値1(距離)：シャドウの水平方向の距離
値2(距離)：シャドウの垂直方向の距離
値3(距離)：シャドウのぼかしの距離
値4(距離)：シャドウの広がりの距離
値5(カラー)：カラーの値
サンプルコードを見てみましょう。
html
<div id="sample1">
サンプルです
</div>
<div id="sample2">
サンプルです
</div>
<div id="sample3">
サンプルです
</div>
<div id="sample4">
サンプルです
</div>
css
#sample1{
width: 500px;
height: 100px;
text-align: center;
border: 1px solid #000;
box-shadow: 10px 10px;
}
#sample2{
width: 500px;
height: 100px;
text-align: center;
border: 1px solid #000;
box-shadow: 10px 10px 10px 5px rgb(0,0,255);
}
#sample3{
width: 500px;
height: 100px;
text-align: center;
border: 1px solid #000;
box-shadow: 10px 10px 10px 5px rgb(0,0,255,0.4);
}
#sample4{
width: 500px;
height: 100px;
text-align: center;
border: 1px solid #000;
box-shadow: 10px 10px 10px 5px rgb(0,0,255,0.4) inset;
}
シャドウのエフェクトはボックスだけでなく、テキストにも適用できます。
html
<div id="sample1">
サンプルです
</div>
#sample1{
width: 500px;
height: 100px;
font-size: 1.5em;
text-shadow: 2px 2px 2px;
text-align: center;
border: 1px solid #000;
box-shadow: 10px 10px 10px 5px rgb(0,0,255,0.4);
}
ボックスの角を丸くしたい・テキストにエフェクトを適用させたいという人には、「bad-company」というツールがおすすめです。
このツールはカーソルを操作することで、直感的にボックスシャドウ・テキストシャドウのソースコードが生成されます。
bad-companyURL:http://www.bad-company.jp/box-shadow/
・ボックスのレイアウト
flexboxを使用することでボックスレイアウトを変更することができます。
以前はfloat設定することでレイアウトを変更するのが一般的でした。
しかし、floatを設定すると要素が崩れることがあり、初心者が扱うには難易度が高いのが難点です。
flexboxを使用すれば初心者でも簡単にレイアウトを変更できます。
サンプルコードを使って解説します。
html
<div id="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
css
#container {
display: flex;
}
flexboxは、「display: flex;」を指定するだけで子要素が横に並びます。
また、以下のサンプルコードのように子要素の並び順を変更することも可能です。
css
#container {
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
row・・・子要素を左から右に配置する(デフォルトの値)
row-reverse・・・子要素を左から右に配置する
column・・・子要素を上から下に配置する
column-reverse・・・子要素を下から上に配置する
要素を複数行に配置するには以下のコードを使用します。
css
#container {
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
nowrap・・・一行に配置する(デフォルトの値)
wrap・・・上から下に複数行に配置する
wrap-reverse・・・下から上に複数行に配置する
子要素の配置間隔、子要素の配置開始位置を変更することも可能です。
css
#container {
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}
flex-start・・・左から子要素を配置する
flex-end・・・右から子要素を配置する
center・・・真ん中から子要素を配置する
space-between・・・最初と最後の子要素を両端に配置、残りの要素は間隔を均等にあけて配置する
space-around・・・全ての子要素間隔を均等にあけて配置する
子要素の垂直方向の並びを変化させるためにはこのようにコードを記述します。
css
#container {
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
}
stretch・・・親要素の高さまたは子要素の中にあるコンテンツの高さに合わせて配置する(初期値)
flex-start・・・上部から配置する。
flex-end・・・下部から配置する。
center・・・中央に配置する
baseline・・・子要素の中にあるコンテンツのベースラインを基準に配置する
・アニメーション
アニメーションはその名前の通りcssで動きをつけることができます。
動きを表現するのは、javascriptやjQueryなどが主流です。
javascriptやjQueryなどは多様な表現、複雑な動きを表現できます。
しかし、javascriptやjQueryはcssよりも難易度が高く、初心者には理解しにくいのが難点です。
cssのアニメーションはtransitionやanimationなどを使用します。
しかし、これらはOSやブラウザによっては表示されないこともあるので、注意が必要です。
transitionの対応ブラウザ
PCの場合
internet explorer・・・ バージョン6・7・8・9は未対応、バージョン10・11は対応
Firefox・Chrome・Safariは対応
iOSの場合
Safariに対応している
Androidの場合
Chrome・Firefoxに対応している
animationの対応ブラウザ
PCの場合
internet explorer・・・バージョン6・7・8・9は未対応、バージョン10・11は対応
Chrome・Safariは一部未対応の部分もある
Firefoxには対応している
iOSの場合
Safariは一部未対応の部分もある
Androidの場合
Chromeは一部未対応の部分もある
Firefoxには対応している
transitionではこのようなプロバティを使用できます。
clip・・・クリッピングマスク(切り抜き)ができる
visibility・・・表示・非表示が設定できる
background-color・・・背景色の指定ができる
使用できるプロパティのごく一部を紹介しました。
次はコードを描くには欠かせないエディタを紹介します。
おすすめのエディタ
コード記述の生産性を飛躍的にアップさせるのがエディタです。
使いやすいエディタを使用することで、スペルミスを防ぐこともできます。
ここではおすすめのエディタを2つ紹介します。
Sublime Text
「恋におちるエディタ」として有名なのがSublime Textです。
Sublime Textなシンプルなユーザーインターフェイスで初めて本格的なエディタを使用する人も簡単に使えます。
その上、無料で使用することが可能です。
しかし、無料で使用する場合は、保存する時にときどき購入を勧めるウィンドウが表示されます。
拡張機能も充実しており、特におすすめなのが「Emmet」です。
Emmetはコードを素早く記述するためのプラグインです。
「!」と記述してからTabキーをクリックするだけでHTML5のひな形が生成されます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
他にも[link]と記述してからTabキーをクリックするだけで以下のようなコードが生成されます。
<link rel="stylesheet" href="">
Emmetは生産性を飛躍的にアップできるので、ぜひ使ってみてください。
Sublime TextダウンロードURL:https://www.sublimetext.com/3
Atom
豊富な機能性を搭載しているエディタといえばAtomです。
比較的新しいエディタで機能性の高さ、おしゃれなユーザーインターフェイスが人気を集めています。
「パッケージ」と呼ばれる拡張機能を追加することで、自分に最適なエディタに仕上げることが可能です。
Atomは、無料で使用することができます。
現在、急激にユーザーを増やしているエディタなので、ぜひ使ってみてください。
AtomダウンロードURL:https://atom.io/
まとめ
今回はHTML5&CSS3の解説とおすすめのエディタ2つを紹介しました。
いかがでしたか？
現在は、HTML5&CSS3が主流になっているので、コーディングする際はHTML5&CSS3を使うようにしましょう。
コーディングの技術は日々進化しているので、常に情報を入手してスキルアップを目指しましょう。