menu
menu

HTML5・ページ作成の基本 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook48
  • はてなブックマーク105
  • Google+4
  • Pocket0
  • Twitter0

HTML5・ページ作成の基本

  • HTML

HTML5

こんにちは(・∀・)

 HTML5でページを作るときの基本です。DOCTYPE宣言文、言語コード指定、文字コード宣言など参考にしてください^^。

HTML5でページを作るときの基本
DOCTYPE宣言文

<!DOCTYPE html>

 DOCTYPE宣言文は従来のに比べてかなり短くなりました。


言語コードの指定

<html lang="ja">

 言語コードの指定は日本語ならjaです。


文字コードの宣言

<meta charset="utf-8">

 文字コードの宣言も短くなりました。utf-8推奨です。


スタイルシートの指定

<link rel="stylesheet" href="sample.css">

 type="text/css"は省略して短くできます。


スクリプトの指定

<script src="sample.js"></script>

 こちらもtype="text/javascript"を省略できるので短くなります。


IE8以下の対応

 IE8以下はHTML5に対応していませんがGoogle Codeで公開されているhtml5shivスクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。


 head要素内に次の内容を記述します。

 *JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 HTML5の新要素でブロックボックスとしてレンダリングさせる要素に対してプロパティdisplayに値blockを指定します。


article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}

関連リンク

 HTML5・要素と属性 新しい要素と属性、廃止予定の要素と属性


参考

 HTML5 differences from HTML4

HTML5レイアウトサンプル

 新規でページを作成する際にご利用ください^^。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="sample.js"></script>
</head>
<body>
<header>ヘッダー</header>
<nav>ナビ</nav>
<article>
<h1>タイトル</h1>
<section>
<h2>セクションタイトル</h2>
<p>コンテント</p>
</section>
</article>
<aside>その他セクション</aside>
<footer>フッター</footer>
</body>
</html>

関連リンク

 HTML5でレイアウトしたサンプルです。

 HTML5で1カラムレイアウト

 HTML5で2カラムレイアウト

 HTML5で3カラムレイアウト


 HTML5でレスポンシブ2カラムレイアウト

 HTML5でレスポンシブ3カラムレイアウト


 HTML5でスマホサイトを作る場合はこちらへ

 スマホサイトの作成・基本編

  • カテゴリー:HTML
  • facebook48
  • はてなブックマーク105
  • Google+4
  • Pocket0
  • Twitter0