CSS

CSSコードスクリーンショット生成

CSSのスニペットを、Macから離れることなく共有したくなる画像に。

値そのものが重要なとき、CSS は画像にする価値があります。グラデーション、グリッドの定義、カスタムプロパティのまとまりなどです。

Codeshotは貼り付けたコードからCSSを判別するので、言語の選び間違いは起きません。付属する30種類のうち3つのテーマで同じスニペットを、アプリ自身のスタイルシートで表示しています。

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

Atom One · ダーク

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

GitHub · ダーク

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

Panda Syntax · ダーク

CSSに合うテーマ選び

多くの CSS では色の値が主役なので、それと張り合わないテーマを選んでください。ここでは派手なテーマより中間色のテーマが向いています。

サイズを正しく決める

画像サイズを内容に合わせるか、比率で固定します（1:1、4:3、3:2、16:9、9:16、2:3、3:4）。そのうえで1×・2×・3×から選んで書き出せば、Retinaディスプレイでも鮮明なままです。⌘⇧Cでクリップボードに直接コピー、または⌘Sで保存できます。

30種類のテーマを見比べるか、全体の流れをご覧ください。

CSSと、ほかの59言語のために

すべてMac上で動作します。コードが外に出ることはありません。

macOS版をダウンロード