menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

HTML5・ページ作成の基本

  • HTML

HTML5

こんにちは(・∀・)

HTML5でWebページを作るときの基本です。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.jsを利用すればIE8以下でもHTML5のページを表示することが可能になります。

こちらのhttps://github.com/scottjehl/Respondからダウンロードしたhtml5shiv.jsをhead要素内に読み込ませてください。

html5shiv.jsとhtml5shiv-printshiv.jsがあります。html5shiv.jsは通常用で、html5shiv-printshiv.jsは印刷対応版です。html5shiv-printshiv.min.jsを記述しておけば良いと思います。

head要素内に次の内容を記述します。JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。


<!--[if lt IE 9]>
<script src="/js/html5shiv-printshiv.min.js"></script>
<![endif]-->

IE8以下でCSSのメディアクエリを対応させるには次のコードを記述します。


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

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


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

HTML5 differences from HTML4

関連リンク

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


HTML5レイアウトサンプル

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


<!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でFloatレイアウト
HTML5でFlexレイアウト

HTML5でスマホサイトを作る場合はこちらへ
スマホサイトの作成・基本編

  • カテゴリー:HTML