HTMLのチートシートを以下にまとめました。このチートシートでは、基本構造、基本的なHTMLタグ、属性を簡潔に示しています。
基本構造
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> <!-- コンテンツはここに記述 --> </body> </html>
主要なHTMLタグ
見出しタグ
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
段落タグ
<p>これは段落です。</p>
リンクタグ
<a href="https://example.com">リンクテキスト</a>
画像タグ
<img src="image.jpg" alt="画像の説明">
リストタグ
- 順序なしリスト
<ul> <li>項目1</li> <li>項目2</li> </ul>
- 順序ありリスト
<ol> <li>項目1</li> <li>項目2</li> </ol>
テーブルタグ
<table> <caption>テーブルのタイトル</caption> <tr> <th>ヘッダー1</th> <th>ヘッダー2</th> </tr> <tr> <td>データ1</td> <td>データ2</td> </tr> </table>
フォーム要素
<form action="/submit" method="post"> <label for="name">名前:</label> <input type="text" id="name" name="name"> <label for="email">メール:</label> <input type="email" id="email" name="email"> <input type="submit" value="送信"> </form>
メタタグ
<meta name="description" content="ページの説明"> <meta name="keywords" content="キーワード1, キーワード2, キーワード3"> <meta name="author" content="著者名">
スタイルとスクリプト
<link rel="stylesheet" href="styles.css"> <script src="script.js"></script>
セマンティック要素
<header>ヘッダーコンテンツ</header> <nav>ナビゲーションメニュー</nav> <main>メインコンテンツ</main> <article>記事コンテンツ</article> <section>セクションコンテンツ</section> <footer>フッターコンテンツ</footer>
コメント
<!-- これはコメントです -->
特殊文字
HTMLで使用する特殊文字は、以下のように記述します。
<→<>→>&→&"→"'→'
よく使う属性
- class:CSSでスタイルを適用するためのクラス名を指定
- id:要素に一意の識別子を指定
- style:インラインスタイルを指定
<div class="container" id="main-content" style="color: red;">コンテンツ</div>
HTML5の新機能
- audio:音声を埋め込む
<audio controls> <source src="audio.mp3" type="audio/mpeg"> お使いのブラウザはaudioタグに対応していません。 </audio>
- video:動画を埋め込む
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> お使いのブラウザはvideoタグに対応していません。 </video>
このチートシートを参考にして、HTMLの基本的な構造やタグを素早く確認しながらコーディングを進めてください。
