CSS で Markdown を美しくする

Markdown はテキストをフォーマットするための簡潔な構文を提供しますが、CSS スタイルを使用することで、ドキュメントをより美しくプロフェッショナルにすることができます。

基本スタイル

インラインスタイル

Markdown ドキュメントで HTML とインライン CSS を直接使用できます：

# 私のドキュメント

<style>
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}
</style>

<div class="highlight">
これは重要な段落をハイライト表示しています。
</div>

外部スタイルシート

より良い保守性のために外部 CSS ファイルを参照：

<link rel="stylesheet" href="styles/markdown-custom.css">

# スタイル付きドキュメント

このコンテンツは外部スタイルシートを使用してスタイル設定されます。

一般的な Markdown 要素のスタイル

見出しスタイル

/* すべての見出しの基本スタイル */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* 特定の見出しスタイル */
h1 {
  font-size: 2.5em;
  border-bottom: 2px solid #eaecef;
  padding-bottom: 10px;
}

h2 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 8px;
}

リンクスタイル

/* 基本リンク */
a {
  color: #0366d6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

a:hover {
  border-bottom: 1px solid #0366d6;
}

コードスタイル

/* インラインコード */
code {
  background-color: #f6f8fa;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: #d73a49;
}

/* コードブロック */
pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  line-height: 1.45;
}

結論

適切に設計された CSS により、シンプルな Markdown ドキュメントを美しくプロフェッショナルなウェブコンテンツに変換できます。シンプルさ、可読性、レスポンシブデザインのバランスを保つことが重要です。

その他のリソース

• MDN CSS ドキュメント
• CSS Tricks
• Can I Use - CSS 互換性チェック
• GitHub Markdown ガイド