KKLab

Appearance

HTML記法の基礎 ​

HTMLは「HyperText Markup Language」の略で、Webページを作成するための基本的なマークアップ言語です。

基本構造 ​

HTMLドキュメントの基本構造は以下のようになります：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    ページの内容
</body>
</html>

主要な要素 ​

見出し ​

見出しは<h1>から<h6>まであります：

html
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

段落とテキスト ​

html
<p>これは段落です。</p>
<p>これは別の段落です。</p>

<!-- テキストの装飾 -->
<strong>太字</strong>
<em>斜体</em>
<u>下線</u>
<s>取り消し線</s>

リスト ​

順序なしリスト（箇条書き）：

html
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

順序付きリスト（番号付き）：

html
<ol>
    <li>最初の項目</li>
    <li>2番目の項目</li>
    <li>3番目の項目</li>
</ol>

リンクと画像 ​

html
<!-- リンク -->
<a href="https://example.com">リンクテキスト</a>

<!-- 画像 -->
<img src="画像のURL" alt="代替テキスト">

テーブル ​

html
<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

フォーム要素 ​

html
<form action="/submit" method="post">
    <!-- テキスト入力 -->
    <input type="text" name="username">

    <!-- パスワード入力 -->
    <input type="password" name="password">

    <!-- チェックボックス -->
    <input type="checkbox" name="subscribe">

    <!-- ラジオボタン -->
    <input type="radio" name="gender" value="male">
    <input type="radio" name="gender" value="female">

    <!-- セレクトボックス -->
    <select name="country">
        <option value="jp">日本</option>
        <option value="us">アメリカ</option>
    </select>

    <!-- テキストエリア -->
    <textarea name="message"></textarea>

    <!-- 送信ボタン -->
    <button type="submit">送信</button>
</form>

セマンティック要素 ​

HTML5で導入された意味を持つ要素：

html
<header>ヘッダー部分</header>
<nav>ナビゲーション</nav>
<main>メインコンテンツ</main>
<article>記事</article>
<section>セクション</section>
<aside>サイドバー</aside>
<footer>フッター部分</footer>

スタイルとスクリプト ​

html
<!-- CSSの追加 -->
<link rel="stylesheet" href="styles.css">
<!-- または内部スタイル -->
<style>
    body {
        background-color: #f0f0f0;
    }
</style>

<!-- JavaScriptの追加 -->
<script src="script.js"></script>
<!-- または内部スクリプト -->
<script>
    console.log("Hello, World!");
</script>

重要な属性 ​

  • class: 要素のスタイリングやJavaScriptでの選択に使用
  • id: 要素の一意な識別子
  • style: インラインスタイルの適用
  • title: ツールチップとして表示されるテキスト
  • data-*: カスタムデータ属性
html
<div class="container" id="main" style="color: blue;" title="説明">
    <p data-type="text">コンテンツ</p>
</div>

アクセシビリティ ​

アクセシビリティを考慮したマークアップの例：

html
<!-- ARIA属性の使用 -->
<button aria-label="閉じる" aria-expanded="false">
    ×
</button>

<!-- フォームのラベル -->
<label for="username">ユーザー名:</label>
<input id="username" type="text" aria-required="true">

HTMLは、Webページの構造を定義する基本的な言語です。CSSと組み合わせてスタイリングを行い、JavaScriptで動的な機能を追加することで、現代的なWebサイトを構築することができます。