【装飾サンプル】EigoMark デザインスタイル一覧

この記事は EigoMark の装飾スタイルを確認するためのサンプルページです。蛍光ペン（ハイライター）モチーフのデザインシステムを一覧できます。

H2 見出し — マーカー風アンダーライン

H2 見出しはテキストの下60%に蛍光イエローのマーカーが入ります。

H3 見出し — 左ボーダー＋淡い背景

H3 見出しは蛍光イエローの左ボーダー4pxと、ライトイエローの背景色です。

H4 見出し

H4 はテーマデフォルトのスタイルを活用します。

マーカー装飾

これは蛍光イエローマーカー（marker1）のサンプルです。重要なポイントを強調します。

これは蛍光ピンクマーカー（marker2）のサンプルです。注意点の強調に使います。

これは旧マーカー黄、旧マーカー緑、太字ブルーマーカーのサンプルです。

通常の太字（Bold）とイタリック、そして太字イタリックの組み合わせです。

テーブル（表）

リスト

番号なしリスト

• 英語の会議で使えるフレーズを毎日1つ覚える
• 通勤時間に英語ポッドキャストを聞く
• 週に1回はオンライン英会話でアウトプット

番号つきリスト

1. まずは目標スコアを決める
2. 現在のレベルを模試で確認する
3. 弱点パートを特定する
4. 毎日15分の学習を習慣化する

引用（Blockquote）

The limits of my language mean the limits of my world.

— Ludwig Wittgenstein

ボタン

コード表示

インラインコード: npm install express のように使います。

// ビジネス英語メールのテンプレート
Subject: Quick question regarding [project name]

Dear [Name],

I hope this email finds you well.
I just wanted to touch base on the timeline for [project].
Could we schedule a quick call this week?

Best regards,
[Your name]

リンクスタイル

通常のテキストリンクはこんな感じでグリーンになります。ホバーすると蛍光マーカー風のアンダーラインが表示されます。

タグ表示サンプル

記事下部に表示されるタグは pill 形状（角丸20px）のライトイエロー背景です。この記事には「会議」「メール」「プレゼン」のタグが付いています。

カスタムボックス（JIN移植）

黒板風ボックス

タブ付きボックス

ラベル付きボックス

カラーパレット

まとめ

以上が EigoMark のデザインスタイル一覧です。蛍光ペンモチーフで統一されたデザインシステムにより、読みやすく、学習意欲を高めるサイトを目指しています。