12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【HTML5リファレンス】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・要素と属性 新しい要素と属性、廃止予定の要素と属性
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でスマホサイトを作る場合はこちらへ
スマホサイトの作成・基本編