Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ウェブデザインの余白に規則性を持たせるためのパターン

ウェブデザインの余白に規則性を持たせるためのパターン

フォントサイズベース

$spacing: 1rem;

body {
  margin: ($spacing * 4) $spacing;
}

Vertical Rhythm

$vertical-rhythm-line-height: 1.7;
$vertical-rhythm-unit: ($vertical-rhythm-line-height * 1rem);

h1 {
  margin: 0 0 $vertical-rhythm-unit;
  padding-bottom: ($vertical-rhythm-unit * .5);
  font-size: 1.5rem;
  line-height: ($vertical-rhythm-unit * 2);
  border-bottom: 1px solid gray;
}

p {
  margin: 0 0 $vertical-rhythm-unit;
  line-height: $vertical-rhythm-unit;
}

参考

Modular Scale

$ratio: 1.7;

$line-height: $ratio;

$spacing: ($ratio * 1rem);
$spacing-minimal: ($spacing / $ratio / $ratio / $ratio);
$spacing-tiny: ($spacing / $ratio / $ratio);
$spacing-small: ($spacing / $ratio);
$spacing-large: ($spacing * $ratio);
$spacing-huge: ($spacing * $ratio * $ratio);
$spacing-gargantuan: ($spacing * $ratio * $ratio * $ratio);

参考

8の倍数

$spacing: 8px;

body {
  margin: ($spacing * 4) $spacing;
}

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment