メニュー

フローティングテキスト

enegorisanBLOGについて

趣味に全振りしたweb開発・制作・デザイン・日々の生活をすこし。 ただただ備忘録を。

© 2025 enegorisanBLOG

All rights reserved.

ロゴ

enegorisan
No
Bibouroku

趣味に全振りした
web開発・制作・デザイン・日々の生活をすこし。
ただただ備忘録を。

完全スタイルガイド:マークダウンの全て

スタイルガイド
テック

投稿日: 2020年5月26日

見出し1:最大レベルの見出し

これは通常の段落テキストです。太字のテキスト斜体のテキスト、そして下線付きのテキストを含んでいます。

見出し2:セクションタイトル

ここではインラインコードの例を示しています。プログラミングでよく使われる表現です。

見出し3:サブセクション

これは引用文です。重要な情報や他の人の言葉を引用する際に使用します。ピクセルアートスタイルの境界線が特徴的です。

見出し4:詳細項目

順序なしリストの例:

  • 最初のアイテム
  • 二番目のアイテム
  • 三番目のアイテム
見出し5:小見出し

順序付きリストの例:

  1. ステップ1:準備
  2. ステップ2:実行
  3. ステップ3:確認
見出し6:最小レベルの見出し

コードブロックの例:

javascript
function helloWorld() {
  console.log("Hello, Pixel World!");
  return "ピクセルアートの世界へようこそ!";
}

// 使用例
const message = helloWorld();
console.log(message);

TypeScriptの例:

typescript
interface PixelArt {
  width: number;
  height: number;
  colors: string[];
}

const createPixelArt = (config: PixelArt): void => {
  console.log(`Creating ${config.width}x${config.height} pixel art`);
  console.log(`Using colors: ${config.colors.join(', ')}`);
};

CSSの例:

css
.pixelated-border {
  box-shadow: 
    0 0 0 2px #60a5fa, 
    0 0 0 4px #000, 
    0 0 0 6px #60a5fa;
}

.font-jp-pixel {
  font-family: var(--font-dotgothic16);
  text-shadow: 2px 2px 0 #000;
}

これで全てのスタイルが適用されました。リンクのスタイルも青色テーマに合わせて調整されています。 コードブロックにはコピー機能も追加されています!

この記事をシェア