カテゴリー:
2系
閲覧数:620 配信日:2013-07-25 06:44
コピペ用HTML基本形
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
</body>
</html>
間違えやすい点
・linkタグのtype属性は省略可能だが、「rel="stylesheet"」は必要
・1タグの閉じタグは不要
・imgタグの閉じタグは不要
・終了タグが不要なhtmlタグ
コピペ用HTML formタグあり
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="xxxx.css" rel="stylesheet">
<script src="xxxx.js"></script>
<style></style>
<script></script>
</head>
<body>
<form action="xxxx.php" method="post"></form>
</body>
</html>
formタグ
・「action属性」と「method属性」の記述順番は任意だが、(記述ミス防止の観点から)Webサービス内で統一させておいた方が良い
・「action属性」は省略可能
→ HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる
・「method属性」の初期値は"get"
HTML5タグ使用テンプレート
<header> <main> <footer>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<h2></h2>
</main>
<footer>
</footer>
</body>
</html>
<header> <main> <article> <footer>
・article要素の定義
・article要素の中を取り出した際に単独でそれがコンテンツとして成立する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<article>
<h1></h1>
<p></p>
</article>
<article>
<h1></h1>
<p></p>
</article>
</main>
<footer>
</footer>
</body>
</html>
<header> <main> <article> <figure> <figurecaption> <footer>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<article>
<h1></h1>
<figure>
<img src="..." alt="...">
<figurecaption>画像のキャプション</figurecaption>
</figure>
</article>
<article>
<h1></h1>
<figure>
<img src="..." alt="...">
<figurecaption>画像のキャプション</figurecaption>
</figure>
</article>
</main>
<footer>
</footer>
</body>
</html>
・1ページに複数articleタグを配置する場合、articleタグ内の見出しはh1タグ開始？ それともh2タグ開始？
・【レスポンシブ ハンバーガーメニュー コピペ CSS】ドロワーメニュー 2019 サンプル 作り方