この記事は、ブログのデザイン要素を確認するためのデモページです。太字、イタリック、取り消し線、そしてインラインコードの表示を確認します。

1. コードブロックのデザイン#

コードブロックは技術ブログの命です。シンタックスハイライトとコントラストを確認してください。

JavaScript / React#

import React, { useState, useEffect } from 'react';

const UserCard = ({ user }) => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    console.log(`User ${user.name} mounted.`);
    return () => console.log('Unmounting...');
  }, [user]);

  return (
    <div
      className={`card ${isActive ? 'active' : ''}`}
      onClick={() => setIsActive(!isActive)}
    >
      <h3>{user.name}</h3>
      <p>
        Email: <a href={`mailto:${user.email}`}>{user.email}</a>
      </p>
      {/* 条件付きレンダリング */}
      {user.isAdmin && <span className="badge">Admin</span>}
    </div>
  );
};

export default UserCard;

Python#

def calculate_fibonacci(n):
    """
    再帰的にフィボナッチ数を計算する関数
    """
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2)

# テスト実行
if __name__ == "__main__":
    for i in range(10):
        print(f"Fibonacci({i}) = {calculate_fibonacci(i)}")

CLI / Bash#

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# ビルド
npm run build

2. リンクと引用のデザイン#

テキスト中のリンクのデザインは、本文の読みやすさを邪魔せず、かつクリック可能であることが明確である必要があります。

「良いデザインとは、可能な限りデザインを行わないことである。」

— ディーター・ラムス、Good Design Principles

引用の中にコードを含めることもあります。

useEffect is a Hook that lets you synchronize a component with an external system.

3. リストとテーブル#

順序なしリスト#

  • アイテム 1
  • アイテム 2
    • サブアイテム A
    • サブアイテム B
  • アイテム 3

順序付きリスト#

  1. ステップ 1: 計画
  2. ステップ 2: 実装
  3. ステップ 3: テスト

テーブル#

機能ステータス優先度
ダークモード✅ 完了高
コードハイライト✅ 完了高
SEO最適化🚧 進行中中
ユーザーログイン❌ 未着手低

4. その他#

長い文章の途中で脚注1を入れることもできます。

  1. これは脚注のサンプルです。ページ下部に表示されます。 ↩︎