CDN
CDN (Contents Delivery Network) を通じてCSSをインポートすることもできます。
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
</head>
<body>
<!-- content -->
</body>
</html>.flash
Primer CSSでフラッシュ（アラート）を作成するには、flash クラスを指定する。
<div class="flash">情報</div>情報
.flash-success
<div class="flash flash-success">成功</div>成功
.flash-warn
警告を意味するアラートを作成するには、flashクラスに加えて、flash-warn修飾クラスを指定します。
<div class="flash flash-warn">警告</div>警告
.flash-error
<div class="flash flash-error">エラー</div>エラー
アイコン
フラッシュにアイコンを付けるには、SVG画像で描画する。
<div class="flash flash-warn">
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
<path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" />
</svg>
警告
</div>
警告
.color-bg-default
<div class="color-bg-default">.color-bg-default</div>.color-bg-default
.color-bg-overlay
<div class="color-bg-overlay">.color-bg-overlay</div>.color-bg-inset
<div class="color-bg-inset">.color-bg-inset</div>.color-bg-inset
.color-bg-subtle
<div class="color-bg-subtle">.color-bg-subtle</div>.color-bg-subtle
.color-bg-emphasis
Primer CSSで背景を強調色にするには、color-bg-emphasis クラスを指定する。
<div class="color-bg-emphasis">.color-bg-emphasis</div>color-bg-emphasis
.color-bg-accent
<div class="color-bg-accent">.color-bg-accent</div>.color-bg-accent
.color-bg-accent-emphasis
<div class="color-bg-accent-emphasis">.color-bg-accent-emphasis</div>.color-bg-accent-emphasis
.color-bg-success
<div class="color-bg-success">.color-bg-success</div>.color-bg-success
.color-bg-success-emphasis
<div class="color-bg-success-emphasis">.color-bg-success-emphasis</div>.color-bg-success-emphasis
.color-bg-attention
<div class="color-bg-attention">.color-bg-attention</div>.color-bg-attention
.color-bg-attention-emphasis
<div class="color-bg-attention-emphasis">.color-bg-attention-emphasis</div>.color-bg-attention-emphasis
.color-bg-severe
<div class="color-bg-severe">.color-bg-severe</div>.color-bg-severe
.color-bg-severe-emphasis
<div class="color-bg-severe-emphasis">.color-bg-severe-emphasis</div>.color-bg-severe-emphasis
.color-bg-danger
<div class="color-bg-danger text-gray-light">.color-bg-danger</div>.color-bg-dangerk
.color-bg-danger-emphasis
<div class="color-bg-danger-emphasis">.color-bg-danger-emphasis</div>.color-bg-danger-emphasis
.color-bg-done
<div class="color-bg-done">.color-bg-done</div>.color-bg-done
.color-bg-done-emphasis
<div class="color-bg-done-emphasis">.color-bg-done-emphasis</div>.color-bg-done-emphasis
.color-bg-sponsors
<div class="color-bg-sponsors">.color-bg-sponsors</div>.color-bg-sponsors
.color-bg-sponsors-emphasis
<div class="color-bg-sponsors-emphasis">.color-bg-sponsors-emphasis</div>.color-bg-sponsors-emphasis
.border
<div class="border">.border</div>.border
.border-top
<div class="border-top">.border-top</div>.border-top
.border-right
要素の右側に境界線を表示するには、Primer CSS の border-right クラスを指定する。border-right クラスは CSS の border-right プロパティに相当する。
<div class="border-right">.border-right</div>.border-right
.border-bottom
<div class="border-bottom">.border-bottom</div>.border-bottom
.border-left
<div class="border-left">.border-left</div>.border-left
.border-x
<div class="border-x">.border-x</div>.border-x
.border-y
<div class="border-y">.border-y</div>.border-y
.border-dashed
<div class="border border-dashed">.border-dashed</div>.border-dashed
.color-border-default
<div class="border color-border-default">.color-border-default</div>.color-border-default
.color-border-muted
<div class="border color-border-muted">.color-border-muted</div>.color-border-muted
.color-border-subtle
<div class="border color-border-subtle">.color-border-subtle</div>.color-border-subtle
.color-border-accent
<div class="border color-border-accent">.color-border-accent</div>.color-border-accent
.color-border-accent-emphasis
<div class="border color-border-accent-emphasis">.color-border-accent-emphasis</div>.color-border-accent-emphasis
.color-border-success
<div class="border color-border-success">.color-border-success</div>.color-border-success
.color-border-success-emphasis
<div class="border color-border-success-emphasis">.color-border-success-emphasis</div>.color-border-success-emphasis
.color-border-attention
<div class="border color-border-attention">.color-border-attention</div>.color-border-attention
.color-border-attention-emphasis
<div class="border color-border-attention-emphasis">.color-border-attention-emphasis</div>.color-border-attention-emphasis
.color-border-severe
<div class="border color-border-severe">.color-border-severe</div>.color-border-severe
.color-border-severe-emphasis
<div class="border color-border-severe-emphasis">.color-border-severe-emphasis</div>.color-border-severe-emphasis
.color-border-danger
<div class="border color-border-danger">.color-border-danger</div>.color-border-danger
.color-border-danger-emphasis
<div class="border color-border-danger-emphasis">.color-border-danger-emphasis</div>.color-border-danger-emphasis
.color-border-done
<div class="border color-border-done">.color-border-done</div>.color-border-done
.color-border-done-emphasis
<div class="border color-border-done-emphasis">.color-border-done-emphasis</div>.color-border-done-emphasis
.color-border-sponsors
<div class="border color-border-sponsors">.color-border-sponsors</div>.color-border-sponsors
.color-border-sponsors-emphasis
<div class="border color-border-sponsors-emphasis">.color-border-sponsors-emphasis</div>.color-border-sponsors-emphasis
.border-rounded-{n}
<div class="border rounded-1">.rounded-1</div>
<div class="border rounded-2">.rounded-2</div>.rounded-1
.rounded-2
.border-rounded-top-{n}
<div class="border rounded-top-1">.rounded-top-1</div>
<div class="border rounded-top-2">.rounded-top-2</div>.rounded-top-1
.rounded-top-2
.border-rounded-right-{n}
<div class="border rounded-right-1">.rounded-right-1</div>
<div class="border rounded-right-2">.rounded-right-2</div>.rounded-right-1
.rounded-right-2
.border-rounded-bottom-{n}
<div class="border rounded-bottom-1">.rounded-bottom-1</div>
<div class="border rounded-bottom-2">.rounded-bottom-2</div>.rounded-bottom-1
.rounded-bottom-2
.border-rounded-left-{n}
<div class="border rounded-left-1">.rounded-left-1</div>
<div class="border rounded-left-2">.rounded-left-2</div>.rounded-left-1
.rounded-left-2
.breadcrumb-item
<nav aria-label="Breadcrumb">
<ol>
<li class="breadcrumb-item">
<a href="/">SE学院</a>
</li>
<li class="breadcrumb-item">
<a href="/css/">CSS</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Primer CSS
</li>
</ol>
</nav>.btn
<button class="btn" type="button">Button</button><a class="btn" href="#" role="button">Link</a>.btn-sm
<button class="btn btn-sm" type="button">Small</button>.btn-large
<button class="btn btn-large" type="button">Large</button>.btn-primary
<button class="btn btn-primary" type="button">Primary</button>.btn-danger
<button class="btn btn-danger" type="button">Danger</button>.btn-outline
<button class="btn btn-outline" type="button">Outline</button>aria-disabled
<button class="btn" type="button" aria-disabled="true">Disabled</button>.btn-block
<button class="btn btn-block" type="button">Block</button>.color-fg-default
<p class="color-fg-default>.color-fg-default</p>.color-fg-default
.color-fg-muted
<p class="color-fg-muted>.color-fg-muted</p>.color-fg-muted
.color-fg-subtle
<p class="color-fg-subtle>.color-fg-subtle</p>.color-fg-subtle
.color-fg-accent
<p class="color-fg-accent>.color-fg-accent</p>.color-fg-accent
.color-fg-success
<p class="color-fg-success">.color-fg-success</p>.color-fg-success
.color-fg-attention
<p class="color-fg-attention">.color-fg-attention</p>.color-fg-attention
.color-fg-severe
<p class="color-fg-severe">.color-fg-severe</p>.color-fg-severe
.color-fg-danger
<p class="color-fg-danger">.color-fg-danger</p>.color-fg-danger
.color-fg-done
<p class="color-fg-done">.color-fg-done</p>.color-fg-done
.color-fg-sponsors
<p class="color-fg-sponsors">.color-fg-sponsors</p>.color-fg-sponsors
.color-fg-on-emphasis
<p class="color-fg-on-emphasis">.color-fg-on-emphasis</p>.color-fg-on-emphasis
.form-control
<label for="first_name">First name</label>
<input class="form-control" type="text" placeholder="First name" id="first_name" />checkbox
<label>
<input type="checkbox" value="agree" />
同意する
</label>Radio
<label>
<input type="radio" name="radio" value="sa" checked /> 普通預金
</label>
<label>
<input type="radio" name="radio" value="ca" /> 当座預金
</label>.form-select
Primer CSSでは、selectタグにform-selectクラスを指定します。
<select class="form-select">
<option value="0001">みずほ銀行</option>
<option value="0005">三菱UFJ銀行</option>
<option value="0009">三井住友銀行</option>
<option value="9900">ゆうちょ銀行</option>
</select>.col-1
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の1にするには、col-1 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-1 float-left border p-1">
col-1
</div>
</div>col-1
.col-2
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の2にするには、col-2 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-2 float-left border p-1">
col-2
</div>
</div>col-2
.col-3
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の3にするには、col-3 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-3 float-left border p-1">
col-3
</div>
</div>col-3
.col-4
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の4にするには、col-4 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-4 float-left border p-1">
col-4
</div>
</div>col-4
.col-5
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の5にするには、col-5 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-5 float-left border p-1">
col-5
</div>
</div>col-5
.col-6
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の6にするには、col-6 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-6 float-left border p-1">
col-6
</div>
</div>col-6
.col-7
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の7にするには、col-7 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-7 float-left border p-1">
col-7
</div>
</div>col-7
.col-8
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の8にするには、col-8 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-8 float-left border p-1">
col-8
</div>
</div>col-8
.col-9
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の9にするには、col-9 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-9 float-left border p-1">
col-9
</div>
</div>col-9
.col-10
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の10にするには、col-10 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-10 float-left border p-1">
col-10
</div>
</div>col-10
.col-11
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の11にするには、col-11 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-11 float-left border p-1">
col-11
</div>
</div>col-11
.img-responsive
画像をレスポンシブデザインにするには、img-responsive クラスを指定する。レスポンシブな画像は、画面幅に合わせて縮小される。
<img src="whale.png" class="img-responsive" alt="whale" />
Grayscale image
<img src="whale.png" class="img-responsive grayscale" alt="whale" />Label
<span class="Label">Label</span>Label
State
<span class="State">State</span>State
Counter
<span class="Counter">1</span>1
マージン
Primer CSSフレームワークには、要素のマージンを m-0 から m-6 までの7段階で設定できるユーティリティクラスが用意されている。
<p class="m-0 color-bg-success">m-0</p>
<p class="m-1 color-bg-success">m-1</p>
<p class="m-2 color-bg-success">m-2</p>
<p class="m-3 color-bg-success">m-3</p>
<p class="m-4 color-bg-success">m-4</p>
<p class="m-5 color-bg-success">m-5</p>
<p class="m-6 color-bg-success">m-6</p>m-0
m-1
m-2
m-3
m-4
m-5
m-6
.mt-0
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-0 color-bg-success">mt-0</div>mt-0
.mt-1
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-1 color-bg-success">mt-1</div>mt-1
.mt-2
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-2 color-bg-success">mt-2</div>mt-2
.mt-3
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-3 color-bg-success">mt-3</div>mt-3
.mt-4
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-4 color-bg-success">mt-4</div>mt-4
.mt-5
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-5 color-bg-success">mt-5</div>mt-5
.mt-6
Primer CSSフレームワークには、要素の上マージンを mt-0 から mt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mt-6 color-bg-success">mt-6</div>mt-6
.mr-0
Primer CSSフレームワークには、要素の右マージンを mr-0 から mr-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mr-0 color-bg-success">.mr-0</div>.mr-0
.mr-1
<div class="mr-1 color-bg-success">.mr-1</div>.mr-1
.mr-2
<div class="mr-2 color-bg-success">.mr-2</div>.mr-2
.mr-3
<div class="mr-3 color-bg-success">.mr-3</div>.mr-3
.mr-4
<div class="mr-4 color-bg-success">.mr-4</div>.mr-4
.mr-5
<div class="mr-5 color-bg-success">.mr-5</div>.mr-5
.mr-6
<div class="mr-6 color-bg-success">.mr-6</div>.mr-6
.mb-0
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-0 color-bg-success">mb-0</div>mb-0
.mb-1
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-1 color-bg-success">mb-1</div>mb-1
.mb-2
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-2 color-bg-success">mb-2</div>mb-2
.mb-3
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-3 color-bg-success">mb-3</div>mb-3
.mb-4
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-4 color-bg-success">mb-4</div>mb-4
.mb-5
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-5 color-bg-success">mb-5</div>mb-5
.mb-6
Primer CSSフレームワークには、要素の下マージンを mb-0 から mb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mb-6 color-bg-success">mb-6</div>mb-6
ml-0
Primer CSSフレームワークには、要素の左マージンを ml-0 から ml-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="ml-0 color-bg-success">.ml-0</div>.ml-0
ml-1
<div class="ml-1 mb-1 color-bg-success">.ml-1</div>.ml-1
ml-2
<div class="ml-2 color-bg-success">.ml-2</div>.ml-2
ml-3
<div class="ml-3 color-bg-success">.ml-3</div>.ml-3
ml-4
<div class="ml-4 color-bg-success">.ml-4</div>.ml-4
ml-5
<div class="ml-5 color-bg-success">.ml-5</div>.ml-5
ml-6
<div class="ml-6 color-bg-success">.ml-6</div>.ml-6
mx-0
Primer CSSフレームワークには、要素の左右マージンを mx-0 から mx-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="mx-0 color-bg-success">.mx-0</div>.mx-0
mx-1
<div class="mx-1 color-bg-success">.mx-1</div>.mx-1
mx-2
<div class="mx-2 color-bg-success">.mx-2</div>.mx-2
mx-3
<div class="mx-3 color-bg-success">.mx-3</div>.mx-3
mx-4
<div class="mx-4 color-bg-success">.mx-4</div>.mx-4
mx-5
<div class="mx-5 color-bg-success">.mx-5</div>.mx-5
mx-6
<div class="mx-6 color-bg-success">.mx-6</div>.mx-6
.my-0
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-0 color-bg-success">my-0</div>my-0
.my-1
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-1 color-bg-success">my-1</div>my-1
.my-2
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-2 color-bg-success">my-2</div>my-2
.my-3
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-3 color-bg-success">my-3</div>my-3
.my-4
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-4 color-bg-success">my-4</div>my-4
.my-5
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-5 color-bg-success">my-5</div>my-5
.my-6
Primer CSSフレームワークには、要素の上下マージンを my-0 から my-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="my-6 color-bg-success">my-6</div>my-6
.menu
<nav class="menu" aria-label="Primer">
<a class="menu-item" href="/css/bootstrap/">Bootstrap</a>
<a class="menu-item" href="/css/bulma/">Bulma</a>
<a class="menu-item" href="/css/materialize/">Meterialize</a>
</nav>aria-current
<nav class="menu" aria-label="Primer">
<a class="menu-item" href="/css/milligram/">Milligram</a>
<a class="menu-item" href="#" aria-current="page">Primer CSS</a>
<a class="menu-item" href="/css/pure/">Pure.css</a>
</nav>.menu-heading
<nav class="menu" aria-labelledby="menu-heading">
<span class="menu-heading" id="menu-heading">Framework</span>
<a class="menu-item" href="/css/semantic/">Semantic UI</a>
<a class="menu-item" href="/css/skeleton/">Skeleton</a>
<a class="menu-item" href="/css/spectre/">Spectre.css</a>
</nav>.p-0
Primer CSSフレームワークには、要素のパディングを p-0 から p-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="p-0 color-bg-success">p-0</div>p-0
.p-1
<div class="p-1 color-bg-success">p-1</div>p-1
.p-2
<div class="p-2 color-bg-success">p-2</div>p-2
.p-3
<div class="p-3 color-bg-success">p-3</div>p-3
.p-4
<div class="p-4 color-bg-success">p-4</div>p-4
.p-5
<div class="p-5 color-bg-success">p-5</div>p-5
.p-6
<div class="p-6 color-bg-success">p-6</div>p-6
.pt-0
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-0 color-bg-success">pt-0</div>pt-0
.pt-1
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-1 color-bg-success">pt-1</div>pt-1
.pt-2
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-2 color-bg-success">pt-2</div>pt-2
.pt-3
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-3 color-bg-success">pt-3</div>pt-3
.pt-4
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-4 color-bg-success">pt-4</div>pt-4
.pt-5
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-5 color-bg-success">pt-5</div>pt-5
.pt-6
Primer CSSフレームワークには、要素の上パディングを pt-0 から pt-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pt-6 color-bg-success">pt-6</div>pt-6
pr-0
Primer CSSフレームワークには、要素の右パディングを pr-0 から pr-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pr-0 color-bg-success">.pr-0</div>.pr-0
pr-1
<div class="pr-1 color-bg-success">.pr-1</div>.pr-1
pr-2
<div class="pr-2 color-bg-success">.pr-2</div>.pr-2
pr-3
<div class="pr-3 color-bg-success">.pr-3</div>.pr-3
pr-4
<div class="pr-4 color-bg-success">.pr-4</div>.pr-4
pr-5
<div class="pr-5 color-bg-success">.pr-5</div>.pr-5
pr-6
<div class="pr-6 color-bg-success">.pr-6</div>.pr-6
.pb-0
Primer CSSフレームワークには、要素の下パディングを pb-0 から pb-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pb-0 color-bg-success">.pb-0</div>.pb-0
.pb-1
<div class="pb-1 color-bg-success">.pb-1</div>.pb-1
.pb-2
<div class="pb-2 color-bg-success">.pb-2</div>.pb-2
.pb-3
<div class="pb-3 color-bg-success">.pb-3</div>.pb-3
.pb-4
<div class="pb-4 color-bg-success">.pb-4</div>.pb-4
.pb-5
<div class="pb-5 color-bg-success">.pb-5</div>.pb-5
.pb-6
<div class="pb-6 color-bg-success">.pb-6</div>.pb-6
pl-0
Primer CSSフレームワークには、要素の左パディングを pl-0 から pl-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="pl-0 color-bg-success">.pl-0</div>.pl-0
pl-1
<div class="pl-1 color-bg-success">.pl-1</div>.pl-1
pl-2
<div class="pl-2 color-bg-success">.pl-2</div>.pl-2
pl-3
<div class="pl-3 color-bg-success">.pl-3</div>.pl-3
pl-4
<div class="pl-4 color-bg-success">.pl-4</div>.pl-4
pl-5
<div class="pl-5 color-bg-success">.pl-5</div>.pl-5
pl-6
<div class="pl-6 color-bg-success">.pl-6</div>.pl-6
px-0
Primer CSSフレームワークには、要素の左右パディングを px-0 から px-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="px-0 color-bg-success">.px-0</div>.px-0
px-1
<div class="px-1 color-bg-success">.px-1</div>.px-1
px-2
<div class="px-2 color-bg-success">.px-2</div>.px-2
px-3
<div class="px-3 color-bg-success">.px-3</div>.px-3
px-4
<div class="px-4 color-bg-success">.px-4</div>.px-4
px-5
<div class="px-5 color-bg-success">.px-5</div>.px-5
px-6
<div class="px-6 color-bg-success">.px-6</div>.px-6
.py-0
Primer CSSフレームワークには、要素の上下パディングを py-0 から py-6 までの7段階で設定できるユーティリティクラスが用意されている。
<div class="py-0 color-bg-success">.py-0</div>.py-0
.py-1
<div class="py-1 color-bg-success">.py-1</div>.py-1
.py-2
<div class="py-2 color-bg-success">.py-2</div>.py-2
.py-3
<div class="py-3 color-bg-success">.py-3</div>.py-3
.py-4
<div class="py-4 color-bg-success">.py-4</div>.py-4
.py-5
<div class="py-5 color-bg-success">.py-5</div>.py-5
.py-6
<div class="py-6 color-bg-success">.py-6</div>.py-6
.text-center
<p class="text-center">Center aligned text</p>Center aligned text
.text-right
<p class="text-right">Right aligned text</p>Right aligned text
.text-italic
<p class="text-italic">Italic</p>Italic
.text-bold
<p class="text-bold">Bold</p>Bold
.text-underline
<p class="text-underline">Underline</p>Underline
.text-emphasized
<p class="text-emphasized">Emphasized</p>Emphasized
.text-small
<p class="text-small">Small</p>Small
.lead
<p class="lead">
Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。
</p>Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。
.border-bottom
Primer CSSフレームワークを使って表の各行に下境界線を引くには、<tr> タグに border-bottom クラスを指定する。
<table>
<caption>ブレークポイント</caption>
<thead>
<tr class="border-bottom">
<th>ブレークポイント</th>
<th>接尾辞</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td>none</td>
<td>なし</td>
<td>≥0px</td>
</tr>
<tr class="border-bottom">
<td>small</td>
<td>sm</td>
<td>≥544px</td>
</tr>
<tr class="border-bottom">
<td>medium</td>
<td>md</td>
<td>≥768px</td>
</tr>
<tr class="border-bottom">
<td>large</td>
<td>lg</td>
<td>≥1012px</td>
</tr>
<tr class="border-bottom">
<td>extra large</td>
<td>xl</td>
<td>≥1280px</td>
</tr>
</tbody>
</table>| ブレークポイント | 接尾辞 | 寸法 |
|---|---|---|
| none | なし | ≥0px |
| small | sm | ≥544px |
| medium | md | ≥768px |
| large | lg | ≥1012px |
| extra large | xl | ≥1280px |
.width-full
Primer CSSフレームワークを使って表を親要素の幅いっぱいにするには、<table> タグに width-full クラスを指定する。
<table class="width-full">
<caption>ブレークポイント</caption>
<thead>
<tr>
<th>ブレークポイント</th>
<th>接尾辞</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>なし</td>
<td>≥0px</td>
</tr>
<tr>
<td>small</td>
<td>sm</td>
<td>≥544px</td>
</tr>
<tr>
<td>medium</td>
<td>md</td>
<td>≥768px</td>
</tr>
<tr>
<td>large</td>
<td>lg</td>
<td>≥1012px</td>
</tr>
<tr>
<td>extra large</td>
<td>xl</td>
<td>≥1280px</td>
</tr>
</tbody>
</table>| ブレークポイント | 接尾辞 | 寸法 |
|---|---|---|
| none | なし | ≥0px |
| small | sm | ≥544px |
| medium | md | ≥768px |
| large | lg | ≥1012px |
| extra large | xl | ≥1280px |