当サイトでは、カスタマイズをしているものの、チュートリアルサイトとしてできるだけプレーンなGeneratePressを利用するように心がけています。

このページは当サイトにおいて、標準的なHTMLエレメントがどのように表示されるかを確認するためのページです。GeneratePressそのものとは少しだけ違いますが、デフォルト状態に近いテーマのスタイルブックとして参考にしてください。

（リストを入れ子にした場合の余白など、少しおかしな事例も交えてこのページを構成しています）

基本要素の表現

イタリック、太字、等幅フォント を組み合わせることができます。箇条書きリストは以下のようになります：

• 項目 1
• 項目 2
• 項目 3

リンク例：外部サイト、ローカルページ、このページ内のセクション へのリンクです。

引用ブロック：

デジタル時代において、情報は資源となりました。しかし、良質な情報へのアクセスは依然として限定的です。技術によって多くのことが可能になりましたが、人間の判断力と創意工夫はより重要になっています。

水平線：

---

コードブロック

function greeting() {
    console.log("こんにちは、世界！");
}

import requests
# API からデータを取得
response = requests.get('https://api.example.com/data')
data = response.json()
print(data)

ネストされたリスト

1. まず、必要な材料を用意します：

   • HTML の基礎知識
   • CSS の理解
   • ブラウザの確認環境

2. 開発環境をセットアップします。

3. 以下のプロセスに従います：

   1. プロジェクトディレクトリを作成
   2. HTML ファイルを新規作成
   3. CSS フレームワークをリンク
   4. ブラウザで確認
   5. 必要に応じてカスタマイズ

   各ステップを確実に完了してください。

見出し

テーブル

テーブルの表示例：

一般的なデバイス仕様一覧

デバイス名	画面サイズ	用途
スマートフォン	6 インチ以下	モバイル利用
タブレット	8～13 インチ	読書・オフィス作業
デスクトップ	21～27 インチ	開発・コンテンツ制作

複数行テーブルの例：

カテゴリ	説明
Classless CSS	HTML の標準エレメントのみで機能し、CSS クラスを必要としません。シンプルな Web サイトやドキュメント作成に最適です。
レスポンシブデザイン	モバイル、タブレット、デスクトップなど、様々な画面サイズに自動的に対応します。メディアクエリで最適なレイアウトを実現します。

画像

フォーム

テキスト入力フィールド：

テキスト

パスワード

Web アドレス

メールアドレス

電話番号

検索

数値入力

セレクトメニュー：

選択してください オプション 1 オプション 2 オプション 3 オプション 4 オプション 5

チェックボックス：

• オプション A
• オプション B
• オプション C

ラジオボタン：

• 選択肢 1
• 選択肢 2
• 選択肢 3

テキストエリア：

メッセージ入力

ボタン：