MarkdownPreview CSS 20選

markdown-preview-css-20-recomends CSS
markdown-preview-css-20-recomends

我がサイト、運営を初めてかなりの年月が経っていて
それなりにいろいろな記事を書いてきたつもりですが、
ここ最近、ずーっとMarkdown関連のアクセスが多いです。

皆さん同じような感想を抱いているんですね。

というわけで、ここにCSSを20種置いておきます！
お好みがあればガンガン活用してください。

ご自身でカスタマイズするのもまた面白いと思います。

1. アメリカンコミック

Title H1

アメリカンコミックをイメージしたマークダウンプレビュースタイルです。

Title H2

派手で明るい色使い、太字でインパクトのあるフォントを使用しています。

Title H3

コミック風のデザイン要素が特徴です。


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロックは、背景色とボーダーで強調されています。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview.markdown-preview {
    background-color: #A0E7FF;
    color: #000000;
    font-family: 'Impact', 'Comic Sans MS', 'Arial Black', sans-serif;
    line-height: 1.6;
    padding: 20px;

    h1, h2 {
        color: #FF0000;
        border-bottom: 5px solid #000000;
        padding-bottom: 10px;
        margin-top: 30px;
        text-transform: uppercase;
        text-shadow: 3px 3px 0 #FFFF00,
                    5px 5px 0 #000000;
    }

    h1 {
        font-size: 3em;
        border-bottom-style: double;
    }

    h2 {
        font-size: 2em;
    }

    blockquote {
        background-color: #FFFFFF;
        color: #000000;
        border: 5px dashed #FF0000;
        padding: 15px 20px;
        margin: 20px 0;
        box-shadow: 8px 8px 0 #000000;
        font-style: italic;
    }

    ul {
        list-style-type: disc;
    }

    ul li::marker {
        color: #FF0000;
        font-size: 1.2em;
    }

    pre code {
        background-color: #F0F0F0;
        color: #000000;
        border: 3px dotted #000000;
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #FFDDDD;
        color: #FF0000;
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
    }

    a {
        color: #0000FF;
        text-decoration: none;
        border-bottom: 3px solid #0000FF;
        font-weight: bold;
    }

    a:hover {
        color: #FFFF00;
        background-color: #0000FF;
    }

    strong {
        color: #FF0000;
        font-weight: 900;
        background-color: #FFFF00;
        padding: 0 3px;
    }
}

2. キャンディ＆スイーツ

Title H1

パステルカラーを基調とした、優しく丸みのあるデザイン。

Title H2

ラベンダーやミントグリーン、ピンクを使って甘くポップな雰囲気を演出。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #F8F4FF; 
    color: #4A4A4A; 
    font-family: 'A-OTF Shin Maru Go Pro', 'Klee One', 'Hanamiduki', 'ヒラギノ丸ゴ ProN', 'Rounded Mplus 1c', sans-serif;
    line-height: 1.7;
    padding: 25px;

    h1, h2 {
        color: #6C5CE7; 
        background-color: #D3EEF3; 
        padding: 10px 20px;
        margin-top: 30px;
        border-radius: 25px; 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
        border: 2px dashed #FFB8C9; 
        display: inline-block; 
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.6em;
    }

    blockquote {
        background-color: #FFECF4; 
        color: #6C5CE7; 
        border-left: 8px solid #FFB8C9; 
        padding: 15px 20px;
        margin: 20px 0;
        border-radius: 10px;
        font-style: normal;
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li {
        position: relative;
        margin-bottom: 8px;
    }

    ul li::before {
        content: "🌸"; 
        color: #FFB8C9; 
        font-size: 1.1em;
        position: absolute;
        left: -20px;
        top: 0;
    }

    pre code {
        background-color: #FFFFFF; 
        color: #4A4A4A;
        border: 1px solid #D3EEF3; 
        border-radius: 15px; 
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace; 
    }

    :not(pre) > code {
        background-color: #D3EEF3; 
        color: #6C5CE7; 
        padding: 3px 6px;
        border-radius: 5px;
        font-weight: bold;
    }

    a {
        color: #FFB8C9; 
        text-decoration: none;
        border-bottom: 2px solid #6C5CE7; 
        font-weight: bold;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #6C5CE7; 
        border-radius: 5px;
    }

    strong {
        color: #FF007F; 
        font-weight: bold;
    }
}

3. レトロゲームピクセル

Title H1

8ビットゲームのような、ドット絵のフォントと原色系の強いコントラスト。

Title H2

ターミナルやコマンドラインを思わせるシンプルなデザイン。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-family: 'Pixel Mplus 12', 'VT323', 'Monospace', monospace;
    line-height: 1.5;
    padding: 15px;
    text-rendering: optimizeSpeed;

    h1, h2 {
        color: #39FF14;
        border-bottom: 3px solid #FF0000;
        padding-bottom: 5px;
        margin-top: 25px;
        text-shadow: 0 0 5px rgba(57, 255, 20, 0.8),
                    0 0 10px rgba(57, 255, 20, 0.5);
        text-transform: uppercase;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.8em;
    }

    blockquote {
        background-color: #000000;
        color: #FFFF00;
        border: 1px solid #FF00FF;
        padding: 10px 15px;
        margin: 15px 0;
        font-style: normal;
        box-shadow: 3px 3px 0 #000000;
    }

    ul {
        list-style-type: square;
    }

    ul li::marker {
        color: #39FF14;
        font-size: 1.1em;
    }

    pre code {
        background-color: #0D0D0D;
        color: #FFEA00;
        border: 2px solid #FF0000;
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Pixel Mplus 12', 'Monospace', monospace;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    :not(pre) > code {
        background-color: #000000;
        color: #39FF14;
        padding: 1px 4px;
        border: 1px dashed #FF00FF;
        font-weight: bold;
    }

    a {
        color: #00FFFF;
        text-decoration: none;
        border-bottom: 1px solid #00FFFF;
    }

    a:hover {
        color: #FF0000;
        background-color: #00FFFF;
    }

    strong {
        color: #FF0000;
        font-weight: bold;
    }
}

4. ライブハウスの薄暗さ

Title H1

真っ黒な背景に、ホワイト、グレー、そしてネオンレッドを差し色に使ったデザイン。

Title H2

重厚感のある太字のサンセリフ体で見出しを強調する。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #000000; 
    color: #CCCCCC; 
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif; 
    line-height: 1.5;
    padding: 20px;

    h1, h2 {
        color: #FF073A; 
        border-bottom: 3px solid #FF00FF; 
        padding-bottom: 8px;
        margin-top: 40px;
        text-transform: uppercase; 
        
        text-shadow: 0 0 5px rgba(255, 7, 58, 0.7);
        font-weight: 900; 
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
    }

    blockquote {
        background-color: #1A1A1A; 
        color: #FFFFFF; 
        border-left: 5px solid #39FF14; 
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
        box-shadow: 0 0 10px rgba(57, 255, 20, 0.3); 
    }

    ul {
        list-style-type: square; 
    }

    ul li::marker {
        color: #FF073A; 
        font-size: 1.1em;
    }

    pre code {
        background-color: #0D0D0D; 
        color: #39FF14; 
        border: 1px solid #FF073A; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #1A1A1A; 
        color: #FF00FF; 
        padding: 2px 5px;
        border-radius: 2px;
        font-weight: bold;
    }

    a {
        color: #39FF14; 
        text-decoration: none;
        border-bottom: 1px dashed #39FF14;
    }

    a:hover {
        color: #000000;
        background-color: #FF073A; 
        border-bottom-color: #FF073A;
    }

    strong {
        color: #FFFFFF; 
        background-color: #FF073A; 
        padding: 1px 3px;
        font-weight: 900;
    }
}

5. パンク＆ビビッド

Title H1

黒と濃いグレーをベースに、ショッキングピンクと蛍光イエローを差し色にしたデザイン。

Title H2

太い枠線やチェック柄で、反骨精神とビビッドな可愛らしさを両立。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #111111; 
    color: #FFFFFF; 
    font-family: 'Oswald', 'Arial Black', 'Impact', sans-serif; 
    line-height: 1.4;
    padding: 20px;

    h1, h2 {
        color: #FF1493; 
        border: 5px solid #FF1493; 
        padding: 10px 15px;
        margin-top: 35px;
        background-color: #000000;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        display: block;
    }

    h1::before, h2::before {
        content: "★ ";
        color: #FFFF00; 
    }

    h1::after, h2::after {
        content: " ★";
        color: #FFFF00;
    }

    h1 {
        font-size: 2.4em;
        letter-spacing: 2px;
    }

    h2 {
        font-size: 1.8em;
    }

    blockquote {
        background-image: linear-gradient(to right, rgba(255, 20, 147, 0.1) 10%, transparent 10%),
                        linear-gradient(to bottom, rgba(255, 20, 147, 0.1) 10%, transparent 10%);
        background-size: 10px 10px;
        background-color: #222222; 
        color: #FFFFFF;
        border: 3px solid #FFFF00; 
        border-radius: 5px;
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
        font-weight: bold;
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "» "; 
        color: #FFFF00; 
        font-size: 1.2em;
        font-weight: bold;
    }

    pre code {
        background-color: #000000;
        color: #39FF14; 
        border: 1px solid #FF1493; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: #333333; 
        color: #FFFF00; 
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
    }

    a {
        color: #FFFF00; 
        text-decoration: none;
        background-color: #FF1493; 
        padding: 0 3px;
        font-weight: 900;
    }

    a:hover {
        color: #FF1493;
        background-color: #FFFF00; 
    }

    strong {
        color: #FF1493; 
        font-weight: 900;
        text-shadow: 1px 1px 0 #000000; 
    }
}

6. ヘヴィメタル

Title H1

非常に濃いグレーの背景にノイズテクスチャを重ね、赤の強いコントラストと炎のような影で重厚感を演出。

Title H2

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #111111; 
    color: #A9A09D; 
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 3px
    );
    font-family: 'Times New Roman', 'Gothic', serif; 
    line-height: 1.5;
    padding: 20px;

    h1, h2 {
        color: #FF0000; 
        border-bottom: 2px solid #555555; 
        padding-bottom: 5px;
        margin-top: 40px;
        text-transform: uppercase;
        text-shadow: 0 0 5px #FF6600, 
                    0 0 10px #FF0000, 
                    1px 1px 0 #000000; 
        font-weight: bold;
        letter-spacing: 1px;
    }

    h1 {
        font-size: 2.8em;
    }

    h2 {
        font-size: 2.2em;
    }

    blockquote {
        background-color: #181818; 
        color: #E0E0E0;
        border: 3px double #FF0000; 
        border-radius: 5px;
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "◇ "; 
        color: #8B0000; 
        font-size: 1.1em;
        font-weight: bold;
    }

    pre code {
        background-color: #000000;
        color: #FF6600; 
        border: 1px solid #444444; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
        box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.1); 
    }

    :not(pre) > code {
        background-color: #222222; 
        color: #FF0000; 
        padding: 2px 5px;
        border-radius: 2px;
        font-weight: bold;
    }

    a {
        color: #A9A09D; 
        text-decoration: none;
        border-bottom: 1px solid #FF0000; 
    }

    a:hover {
        color: #FFFFFF;
        background-color: #8B0000; 
    }

    strong {
        color: #FF0000; 
        font-weight: 900;
    }
}

7. フレッシュ＆ナチュラル

Title H1

ペールイエローの背景とダークネイビーのテキストで落ち着きを出し、

Title H2

スカイブルーと淡いグリーンをアクセントに使った、清潔感のあるデザイン。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FFFFF0; 
    color: #191970; 
    font-family: 'Avenir', 'Roboto', 'Noto Sans JP', sans-serif; 
    line-height: 1.6;
    padding: 20px;

    h1, h2 {
        color: #1E90FF; 
        background-color: #E0FFFF; 
        border-bottom: 2px solid #1E90FF; 
        padding: 10px 15px;
        margin-top: 30px;
        border-radius: 8px; 
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.8em;
    }

    blockquote {
        background-color: #E6F7E6; 
        color: #191970;
        border-left: 5px solid #3CB371; 
        padding: 15px 20px;
        margin: 20px 0;
        border-radius: 5px;
        font-style: italic;
    }

    ul {
        list-style-type: disc;
    }

    ul li::marker {
        color: #3CB371; 
        font-size: 1.1em;
    }

    pre code {
        background-color: #F8F8FF; 
        color: #191970;
        border: 1px solid #B0E0E6; 
        border-radius: 4px;
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: #E0FFFF; 
        color: #1E90FF; 
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
    }

    a {
        color: #1E90FF; 
        text-decoration: none;
        border-bottom: 1px dashed #1E90FF;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #1E90FF; 
        border-bottom-color: transparent;
        border-radius: 3px;
    }

    strong {
        color: #3CB371; 
        font-weight: 700;
    }
}

8. マカロンカラー

Title H1

淡いピンク、イエロー、ブルーなどのパステルカラーを多用し、

Title H2

丸ゴシックと丸みのあるデザインで甘く優しい印象。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    --macaron-pink: #FFDDEE;
    --macaron-yellow: #FFF8E1;
    --macaron-blue: #E1F5FE;
    --macaron-lavender: #F3E5F5;
    --text-brown: #5D4037; 

    background-color: #F8F8F8; 
    color: var(--text-brown);
    font-family: 'A-OTF Shin Maru Go Pro', 'Rounded Mplus 1c', 'ヒラギノ丸ゴ ProN', sans-serif;
    font-weight: 500; 
    line-height: 1.7;
    padding: 25px;

    h1, h2, h3 {
        color: var(--text-brown);
        padding: 10px 15px;
        margin-top: 35px;
        border-radius: 15px; 
        border: 2px dotted #B0BEC5; 
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); 
    }

    h1 {
        background-color: var(--macaron-pink); 
        font-size: 2em;
    }

    h2 {
        background-color: var(--macaron-yellow); 
        font-size: 1.6em;
    }

    h3 {
        background-color: var(--macaron-blue); 
        font-size: 1.3em;
    }

    blockquote {
        background-color: var(--macaron-lavender); 
        color: var(--text-brown);
        border-left: 5px solid #FF80AB; 
        padding: 15px 20px;
        margin: 20px 0;
        border-radius: 10px;
        font-style: italic;
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "●"; 
        color: #FFB8C9; 
        font-size: 0.8em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #FFFFFF; 
        color: #4CAF50; 
        border: 1px solid #B3E5FC; 
        border-radius: 8px;
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: var(--macaron-blue); 
        color: var(--text-brown);
        padding: 3px 6px;
        border-radius: 5px;
        font-weight: 700;
    }

    a {
        color: #FF80AB; 
        text-decoration: none;
        border-bottom: 1px solid #FF80AB;
        font-weight: bold;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #FF80AB; 
        border-bottom-color: transparent;
        border-radius: 3px;
    }

    strong {
        color: #FF80AB; 
        font-weight: 900;
    }
}

9. 静謐な書斎

Title H1

アイボリーを背景に、濃いセピアのテキストとダークグリーンをアクセントに使ったクラシカルなデザイン。

Title H2

セリフ体フォントと二重線で重厚感を演出。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FFFFF0; 
    color: #4E342E; 
    font-family: 'Georgia', 'Palatino', 'Times New Roman', serif; 
    line-height: 1.7;
    padding: 30px;

    h1, h2 {
        color: #006400; 
        border-bottom: 3px double #A9A9A9; 
        padding-bottom: 5px;
        margin-top: 40px;
        font-family: 'Goudy Old Style', 'Georgia', serif; 
        font-weight: bold;
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 2em;
        color: #800000; 
    }

    blockquote {
        background-color: #F8F8F4; 
        color: #4E342E;
        border: 1px solid #BDB76B; 
        border-left: 8px solid #006400; 
        padding: 15px 25px;
        margin: 25px 0;
        font-style: italic;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
    }

    ul {
        list-style-type: square; 
    }

    ul li::marker {
        color: #800000; 
        font-size: 1.1em;
    }

    pre code {
        background-color: #F5F5DC; 
        color: #1F1F1F; 
        border: 1px dashed #A9A9A9; 
        padding: 12px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #E8E8D0; 
        color: #006400; 
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
    }

    a {
        color: #800000; 
        text-decoration: none;
        border-bottom: 1px solid #800000;
    }

    a:hover {
        color: #FFFFF0;
        background-color: #006400; 
        border-bottom-color: transparent;
    }

    strong {
        color: #006400; 
        font-weight: 900;
    }
}

10. アンティークレース

Title H1

ややピンクがかったアイボリーの背景に、濃いグレージュのテキスト。

Title H2

薄いゴールドや淡いピンクを差し色に、筆記体風フォントと繊細な装飾で上品さを表現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FFF9F6; 
    color: #5D534A; 
    font-family: 'A-OTF Honoka Mincho', 'Klee One', 'Yu Mincho', serif; 
    line-height: 1.8;
    padding: 30px;

    h1, h2 {
        color: #5D534A; 
        font-family: 'Klee One', 'A-OTF Honoka Mincho', serif; 
        padding-bottom: 5px;
        margin-top: 40px;
        border-bottom: 1px solid #E0B589; 
        box-shadow: 0 1px 0 #E0B589; 
        letter-spacing: 0.5px;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.8em;
        padding-left: 10px;
        border-left: 5px solid #F0A3BC; 
    }

    blockquote {
        background-color: #FBF4F7; 
        color: #5D534A;
        border: 1px dashed #E0B589; 
        padding: 15px 20px;
        margin: 25px 0;
        border-radius: 15px; 
        font-style: italic;
        box-shadow: 0 0 5px rgba(224, 181, 137, 0.3); 
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "❀ "; 
        color: #F0A3BC; 
        font-size: 1em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #F8F8F4; 
        color: #4A4A4A; 
        border: 1px solid #E0B589; 
        border-radius: 5px;
        padding: 12px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #F0A3BC; 
        color: #FFFFFF; 
        padding: 3px 6px;
        border-radius: 5px;
        font-weight: bold;
    }

    a {
        color: #F0A3BC; 
        text-decoration: none;
        border-bottom: 1px dashed #E0B589; 
        font-weight: 600;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #E0B589; 
        border-bottom-color: transparent;
        border-radius: 3px;
    }

    strong {
        color: #E0B589; 
        font-weight: 700;
    }
}

11. ヒュッゲな暮らし

Title H1

ホワイトとライトグレーを基調に、アースカラー（ミント、イエロー、木目調）をアクセントに使用。

Title H2

シンプルなサンセリフ体と柔らかな角丸で、温かい暮らしの雰囲気を表現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #F7F7F7; 
    color: #333333; 
    font-family: 'Avenir', 'Roboto', 'Noto Sans JP', sans-serif;
    line-height: 1.7;
    padding: 25px;

    h1, h2 {
        color: #333333;
        padding-bottom: 5px;
        margin-top: 35px;
        font-weight: 600; 
        border-bottom: 3px solid transparent; 
        box-shadow: 0 3px 0 #C8E6C9; 
    }

    h1 {
        font-size: 2.2em;
        box-shadow: 0 3px 0 #FFF9C4; 
    }

    h2 {
        font-size: 1.8em;
        padding-left: 15px;
        border-left: 5px solid #C8E6C9; 
    }

    blockquote {
        background-color: #FFFFFF; 
        color: #4A4A4A;
        border-left: 5px solid #A1887F; 
        padding: 15px 20px;
        margin: 25px 0;
        border-radius: 8px;
        font-style: italic;
        box-shadow: 4px 4px 0 #EFEBE9, 
                    6px 6px 0 #D7CCC8; 
    }

    ul {
        list-style-type: disc;
    }

    ul li::marker {
        color: #6D9F71; 
        font-size: 1.1em;
    }

    pre code {
        background-color: #FFFFFF; 
        color: #5D5D5D;
        border: 1px solid #E0E0E0; 
        border-radius: 5px;
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: #F0F4C3; 
        color: #4A4A4A;
        padding: 3px 6px;
        border-radius: 3px;
        font-weight: 600;
    }

    a {
        color: #A1887F; 
        text-decoration: none;
        border-bottom: 1px dashed #A1887F;
        font-weight: 600;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #6D9F71; 
        border-bottom-color: transparent;
    }

    strong {
        color: #6D9F71; 
        font-weight: 700;
    }
}

12. ブロック積み

Title H1

余白を少なく、要素を大きなブロックとして捉える。

Title H2

ダークグレーの背景に、太い枠線と強い影で立体感（ベベル）を強調。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #222222; 
    color: #FFFFFF; 
    font-family: 'Impact', 'Oswald', 'Arial Black', sans-serif; 
    line-height: 1.4;
    padding: 15px;

    h1, h2 {
        color: #EEEEEE; 
        background-color: #333333; 
        padding: 15px 20px;
        margin-top: 30px;
        margin-bottom: 5px; 
        border: 5px solid #555555; 
        text-transform: uppercase;
        text-shadow: 2px 2px 0 #111111,
                    4px 4px 0 #000000;
        box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2), 
                    8px 8px 0 #111111; 
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 2px;
    }

    h2 {
        font-size: 1.8em;
    }

    blockquote {
        background-color: #1A1A1A; 
        color: #CCCCCC;
        border: 4px solid #777777; 
        padding: 15px 20px;
        margin: 20px 0;
        font-style: normal;
        box-shadow: 6px 6px 0 #000000; 
    }

    ul {
        list-style-type: square; 
    }

    ul li::marker {
        color: #AAAAAA; 
        font-size: 1.2em;
    }

    pre code {
        background-color: #000000; 
        color: #00FF00; 
        border: 3px solid #555555; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
        box-shadow: 4px 4px 0 #111111;
    }

    :not(pre) > code {
        background-color: #333333; 
        color: #FFD700; 
        padding: 2px 5px;
        font-weight: bold;
    }

    a {
        color: #FFFFFF;
        text-decoration: none;
        background-color: #555555; 
        border-bottom: 3px solid #FFD700; 
        padding: 0 2px;
        font-weight: 700;
    }

    a:hover {
        color: #000000;
        background-color: #FFD700; 
        border-bottom-color: #FFD700;
    }

    strong {
        color: #FFD700; 
        font-weight: 900;
        text-shadow: 1px 1px 0 #000000;
    }
}

13. ミニマル＆コントラスト

Title H1

白と黒の強いコントラストのみを使用。

Title H2

装飾を排除した究極のシンプルさと視認性を追求。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FFFFFF; 
    color: #000000; 
    font-family: 'Helvetica Neue', 'Arial', 'Noto Sans JP', sans-serif; 
    line-height: 1.6;
    padding: 20px;

    h1, h2 {
        color: #FFFFFF; 
        background-color: #000000; 
        padding: 10px 15px;
        margin-top: 30px;
        margin-bottom: 15px;
        text-transform: uppercase;
        font-weight: 900; 
        box-shadow: 0 5px 0 #000000;
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 2em;
    }

    blockquote {
        background-color: #F7F7F7; 
        color: #000000;
        border-left: 5px solid #000000; 
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
    }

    ul {
        list-style-type: square;
    }

    ul li::marker {
        color: #000000;
        font-size: 1.1em;
    }

    pre code {
        background-color: #000000;
        color: #FFFFFF;
        border: 1px solid #000000; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #F0F0F0; 
        color: #000000;
        padding: 2px 5px;
        border: 1px solid #000000; 
        font-weight: bold;
    }

    a {
        color: #000000;
        text-decoration: none;
        border-bottom: 2px solid #000000;
        font-weight: 600;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #000000; 
        border-bottom-color: #000000;
    }

    strong {
        color: #000000;
        font-weight: 900;
        background-color: #FFFFFF;
        text-decoration: underline; 
    }
}

14. 中世の写本風

Title H1

羊皮紙のようなオフホワイトの背景に、濃いインクの色を合わせたデザイン。

Title H2

セリフ体と装飾的な影・ボーダーで、中世の写本のような厳かな雰囲気を表現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FDF5E6; 
    color: #191970; 
    font-family: 'Times New Roman', 'Garamond', 'Georgia', serif; 
    line-height: 1.8;
    padding: 40px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); 

    h1, h2 {
        color: #FFFFFF; 
        background-color: #2F4F4F; 
        padding: 10px 15px;
        margin-top: 40px;
        border: 3px solid #8B4513; 
        text-transform: uppercase;
        box-shadow: 5px 5px 0 #1A1A1A;
        font-family: 'Old English Text MT', 'Times New Roman', serif;
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 2px;
    }

    h2 {
        font-size: 2em;
        text-shadow: 1px 1px 0 #555555;
    }

    blockquote {
        background-color: #F5E8C7; 
        color: #483C32; 
        border-left: 5px double #8B4513; 
        border-right: 5px double #8B4513;
        padding: 15px 25px;
        margin: 25px 0;
        font-style: italic;
        position: relative;
    }

    blockquote::before {
        content: "“";
        font-size: 3em;
        color: #8B4513; 
        line-height: 0.1;
        position: absolute;
        left: -10px;
        top: 10px;
    }

    ul {
        list-style-type: disc;
    }

    ul li::marker {
        color: #483C32; 
        font-size: 1.2em;
    }

    pre code {
        background-color: #E6E6FA; 
        color: #000000;
        border: 3px solid #000000; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    :not(pre) > code {
        background-color: #DCDCDC; 
        color: #483C32; 
        padding: 2px 5px;
        font-weight: bold;
        border: 1px solid #A9A9A9;
    }

    a {
        color: #191970; 
        text-decoration: none;
        border-bottom: 1px solid #191970;
        font-weight: bold;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #191970; 
    }

    strong {
        color: #8B4513; 
        font-weight: 900;
    }
}

15. 学生のキャンパスノート

Title H1

横罫線と左端の赤い縦線を再現し、鉛筆書きのようなテキストとシンプルな見出し。

Title H2

ノートのページを表現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FFFAF0; 
    color: #4F4F4F; 
    font-family: 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif; 
    line-height: 1.6;
    padding: 30px 40px 30px 60px; 
    background-image: 
        linear-gradient(to bottom, #A9C9FF 1px, transparent 1px), 
        linear-gradient(to right, #FF7F7F 2px, transparent 2px); 
    background-size: 100% 40px; 
    background-position: 0 10px; 

    p::before {
        content: '';
        position: absolute;
        top: 0;
        left: 25px; 
        height: 100%;
        width: 1px;
        border-left: 1px dashed #FF7F7F; 
        z-index: 1; 
    }

    h1, h2 {
        color: #191970; 
        margin-top: 35px;
        padding-left: 10px;
        padding-bottom: 5px;
        font-weight: bold;
        border-left: 5px solid #FF7F7F; 
        border-bottom: 1px solid #A9C9FF; 
        background-color: transparent; 
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    blockquote {
        background-color: #FFF0F5; 
        color: #000000;
        border: 1px dashed #FF4500; 
        padding: 15px;
        margin: 20px 0;
        border-radius: 5px;
        font-style: italic;
    }

    ul {
        list-style-type: none !important; 
        padding-left: 20px;
    }

    ul li::before {
        content: "•"; 
        color: #1E90FF; 
        font-size: 1.2em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #FFFFFF; 
        color: #000000;
        border: 2px dashed #D3D3D3; 
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
    }

    :not(pre) > code {
        background-color: #F0F8FF; 
        color: #191970; 
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: 700;
    }

    a {
        color: #1E90FF; 
        text-decoration: none;
        border-bottom: 1px dotted #1E90FF; 
        font-weight: bold;
    }

    a:hover {
        color: #4F4F4F;
        background-color: #E0FFFF; 
    }

    strong {
        color: #FF4500; 
        font-weight: 900;
    }
}

16. ダイアリー

Title H1

淡いクラフト紙のような背景に、万年筆のインクのようなテキスト。

Title H2

手書き風フォントとマスキングテープ風の装飾で、温かみのある手帳のページを再現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #FAF6EB; 
    color: #191970; 
    font-family: 'Klee One', 'A-OTF Honoka Mincho', 'Yu Mincho', serif; 
    line-height: 1.8;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 

    h1, h2 {
        color: #4A4A4A; 
        padding-bottom: 5px;
        margin-top: 45px;
        font-family: 'Klee One', 'A-OTF Honoka Mincho', serif; 
        font-weight: 600; 
    }

    h1 {
        font-size: 2.2em;
        border-bottom: 2px dashed #9E9E9E; 
        text-align: center;
    }

    h2 {
        font-size: 1.7em;
        border-bottom: 1px dotted #B0C4DE; 
        padding-left: 10px;
        position: relative;
    }

    h2::before {
        content: "Day |";
        color: #E67E22; 
        margin-right: 5px;
    }

    blockquote {
        background-color: #FFFFFF; 
        color: #333333;
        border: 1px solid #DCDCDC; 
        padding: 20px;
        margin: 30px 0;
        font-style: italic;
        border-radius: 5px;
        position: relative;
    }

    blockquote::before {
        content: '';
        position: absolute;
        top: -15px; 
        left: 20px;
        width: 60px;
        height: 15px;
        background-color: #F0A3BC; 
        border-radius: 10px / 3px; 
        transform: rotate(-1deg);
    }

    blockquote::after {
        content: '';
        position: absolute;
        top: -15px;
        right: 20px;
        width: 40px;
        height: 15px;
        background-color: #C8E6C9; 
        border-radius: 10px / 3px; 
        transform: rotate(2deg);
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "・"; 
        color: #191970; 
        font-size: 1.2em;
        margin-right: 5px;
        display: inline-block;
    }

    pre code {
        background-color: #FFFACD; 
        color: #000000;
        border: 1px solid #E67E22; 
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace; 
        border-radius: 5px;
    }

    :not(pre) > code {
        background-color: #E0FFFF; 
        color: #4A4A4A;
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: 700;
    }

    a {
        color: #191970;
        text-decoration: none;
        background-color: #FFECB3; 
        padding: 0 3px;
        font-weight: 600;
    }

    a:hover {
        background-color: #FFB74D; 
    }

    strong {
        color: #E67E22; 
        font-weight: 900;
    }
}

17. デジタルコンソール

Title H1

ジェットブラックの背景に、ネオングリーンとブルーの強い光沢（グロー）をアクセントに使用。

Title H2

未来的なターミナル画面のような、クールなダークモードデザイン。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #000000; 
    color: #CCCCCC; 
    font-family: 'Roboto Mono', 'Consolas', 'Fira Code', monospace; 
    line-height: 1.5;
    padding: 20px;

    h1, h2 {
        color: #39FF14; 
        padding-bottom: 5px;
        margin-top: 35px;
        text-transform: uppercase;
        text-shadow: 0 0 7px #39FF14, 0 0 10px #39FF14;
        border-bottom: 2px solid #00FFFF; 
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 3px;
    }

    h2 {
        font-size: 2em;
        padding-left: 10px;
    }

    blockquote {
        background-color: #0A0A0A; 
        color: #00FFFF; 
        border-left: 5px solid #00FFFF; 
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: ">"; 
        color: #39FF14; 
        font-size: 1.1em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #0D0D0D; 
        color: #FFFFFF; 
        border: 1px solid #333333; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
        box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.2), 
                    0 0 5px rgba(57, 255, 20, 0.4);
    }

    :not(pre) > code {
        background-color: #1A1A1A; 
        color: #00FFFF; 
        padding: 2px 5px;
        border-radius: 2px;
        font-weight: bold;
    }

    a {
        color: #39FF14; 
        text-decoration: none;
        border-bottom: 1px dashed #00FFFF;
        font-weight: 700;
    }

    a:hover {
        color: #000000;
        background-color: #39FF14; 
        text-shadow: none;
    }

    strong {
        color: #FFEA00; 
        font-weight: 900;
        text-shadow: 0 0 3px #FFEA00;
    }
}

18. 水彩画

Title H1

淡いパステルカラーのグラデーションを背景に、要素の境界線を柔らかく、にじみやぼかしの表現を加える。

Title H2

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-image: linear-gradient(to bottom right, #F0F8FF, #FFF0F5); 
    color: #5D4037; 
    font-family: 'Georgia', 'Palatino', 'Times New Roman', serif; 
    line-height: 1.8;
    padding: 35px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.05));

    h1, h2 {
        color: #4A4A4A; 
        padding-bottom: 5px;
        margin-top: 40px;
        font-weight: 700;
        position: relative;
    }

    h1::after, h2::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #B0E0E6; 
        box-shadow: 0 0 5px rgba(176, 224, 230, 0.8), 
                    -2px 0 0 #ADD8E6; 
        border-radius: 5px; 
    }

    h1 {
        font-size: 2.5em;
        letter-spacing: 0.5px;
    }

    h2 {
        font-size: 2em;
    }

    h2::after {
        background-color: #C8E6C9; 
        box-shadow: 0 0 5px rgba(200, 230, 201, 0.8),
                    -2px 0 0 #A5D6A7;
    }

    blockquote {
        background-color: rgba(255, 255, 255, 0.7); 
        color: #5D4037;
        border: none; 
        padding: 20px;
        margin: 25px 0;
        font-style: italic;
        box-shadow: 0 0 15px rgba(176, 224, 230, 0.6); 
        border-radius: 20px; 
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "💧"; 
        color: #B0E0E6; 
        font-size: 1em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #FFFFFF;
        color: #4CAF50; 
        border: 1px dashed #D3D3D3; 
        padding: 15px;
        display: block;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); 
    }

    :not(pre) > code {
        background-color: #FFECB3; 
        color: #333333;
        padding: 3px 6px;
        border-radius: 5px;
        font-weight: 600;
    }

    a {
        color: #7986CB; 
        text-decoration: none;
        border-bottom: 2px solid #C8E6C9; 
        font-weight: bold;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #B0E0E6; 
        border-bottom-color: transparent;
    }

    strong {
        color: #F0A3BC; 
        font-weight: 900;
    }
}

19. インダストリアル

Title H1

濃淡のあるグレーの背景でコンクリートの質感を表現。

Title H2

太い黒の枠線とリベット風の装飾で構造的、無機質な雰囲気を強調する。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-color: #333333; 
    color: #E0E0E0; 
    background-image: linear-gradient(
        45deg, 
        rgba(0,0,0,.08) 25%, 
        transparent 25%, 
        transparent 75%, 
        rgba(0,0,0,.08) 75%, 
        rgba(0,0,0,.08)
    ), 
    linear-gradient(
        45deg, 
        rgba(0,0,0,.08) 25%, 
        transparent 25%, 
        transparent 75%, 
        rgba(0,0,0,.08) 75%, 
        rgba(0,0,0,.08)
    );
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif;
    line-height: 1.5;
    padding: 25px;

    h1, h2 {
        color: #FFFFFF; 
        background-color: #1A1A1A; 
        padding: 15px 20px;
        margin-top: 40px;
        border: 4px solid #000000; 
        text-transform: uppercase;
        position: relative;
        font-weight: 900;
    }

    h1::before, h2::before, h1::after, h2::after {
        content: "●";
        position: absolute;
        color: #777777; 
        font-size: 0.8em;
        text-shadow: 0 0 1px #000000;
    }

    h1::before, h2::before { top: -5px; left: -5px; }

    h1::after, h2::after { top: -5px; right: -5px; }

    h1 {
        font-size: 2.2em;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 1.8em;
    }

    blockquote {
        background-color: #444444; 
        color: #FFFFFF;
        border: 3px solid #8B0000; 
        border-left: 10px solid #8B0000;
        padding: 15px 20px;
        margin: 20px 0;
        font-style: italic;
        box-shadow: 5px 5px 0 #1A1A1A; 
    }

    ul {
        list-style-type: none; 
        padding-left: 20px;
    }

    ul li::before {
        content: "»"; 
        color: #8B0000; 
        font-size: 1.2em;
        margin-right: 8px;
        display: inline-block;
    }

    pre code {
        background-color: #000000;
        color: #FFEA00; 
        border: 2px solid #FF0000; 
        padding: 10px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: #444444; 
        color: #FFEA00; 
        padding: 2px 5px;
        border: 1px solid #777777;
        font-weight: bold;
    }

    a {
        color: #E0E0E0;
        text-decoration: none;
        background-color: #8B0000; 
        padding: 0 3px;
        font-weight: 700;
    }

    a:hover {
        color: #000000;
        background-color: #FFEA00; 
    }

    strong {
        color: #FFEA00; 
        font-weight: 900;
    }
}

20. マリン

Title H1

白とマリンブルーを基調に、赤をアクセントとして使用。

Title H2

ストライプやロープのモチーフを取り入れ、夏の海辺のような爽快感と開放感を表現。

Title H3


太字とインラインコードの両方がサポートされています。


  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

引用ブロック。


console.log("Hello, world!");
function greet(name) {
    return `Hello, ${name}!`;
}
greet("Crossnote");

リンクテキスト
.markdown-preview {
    background-image: repeating-linear-gradient(
        -45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #F0F8FF 10px,
        #F0F8FF 20px
    );
    background-color: #FFFFFF; 
    color: #004D99; 
    font-family: 'Avenir', 'Roboto', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    padding: 30px;

    h1, h2 {
        color: #CC0000; 
        padding: 10px 15px;
        margin-top: 40px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        border: 5px solid transparent; 
        border-image: linear-gradient(
            45deg, 
            #FFFFFF 0%, 
            #FFFFFF 50%, 
            #004D99 50%, 
            #004D99 100%
        );
        border-image-slice: 1;
        font-weight: 800;
        position: relative;
    }

    h1::before {
        content: "≋"; 
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        color: #CC0000;
        font-size: 1.5em;
    }

    h1 {
        font-size: 2.2em;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 1.7em;
        border: none;
        border-left: 5px solid #004D99;
        background: transparent;
        color: #004D99;
    }

    blockquote {
        background-color: #E6F7FF; 
        color: #004D99;
        padding: 15px 20px;
        margin: 25px 0;
        font-style: italic;
        border-radius: 10px;
        border: 5px solid transparent;
        border-image: radial-gradient(circle, #CC0000 30%, #FFFFFF 30%);
        border-image-slice: 1;
        border-image-width: 5px;
        border-image-repeat: round;
    }

    ul {
        list-style-type: disc;
    }

    ul li::marker {
        color: #CC0000; 
        font-size: 1.1em;
    }

    pre code {
        background-color: #F8F8F8; 
        color: #004D99;
        border: 1px solid #B0C4DE; 
        border-radius: 5px;
        padding: 12px;
        display: block;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
    }

    :not(pre) > code {
        background-color: #B0C4DE; 
        color: #000000;
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
    }

    a {
        color: #CC0000; 
        text-decoration: none;
        border-bottom: 2px solid #004D99; 
        font-weight: 700;
    }

    a:hover {
        color: #FFFFFF;
        background-color: #004D99; 
        border-bottom-color: transparent;
    }

    strong {
        color: #CC0000; 
        font-weight: 900;
    }
}