CDN
CDN (Contents Delivery Network) を通じてCSSをインポートすることもできます。
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
</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>
警告
.bg-blue
Primer CSSで背景色を青にするには、bg-blue クラスを指定する。
<div class="bg-blue">bg-blue</div>bg-blue
.bg-blue-light
<div class="bg-blue-light">.bg-blue-light</div>.bg-blue-light
.bg-red
<div class="bg-red">.bg-red</div>.bg-red
.bg-red-light
<div class="bg-red-light">.bg-red-light</div>.bg-red-light
.bg-green-light
<div class="bg-green-light">.bg-green-light</div>.bg-green-light
.bg-yellow-dark
<div class="bg-yellow-dark">.bg-yellow-dark</div>.bg-yellow-dark
.bg-yellow
<div class="bg-yellow">.bg-yellow</div>.bg-yellow
.bg-yellow-light
<div class="bg-yellow-light">.bg-yellow-light</div>.bg-yellow-light
.bg-purple
<div class="bg-purple">.bg-purple</div>.bg-purple
.bg-gray-dark
<div class="bg-gray-dark text-gray-light">.bg-gray-dark</div>.bg-gray-dark
.bg-gray
<div class="bg-gray">.bg-gray</div>.bg-gray
.bg-white
<div class="bg-white">.bg-white</div>.bg-white
.border
<div class="border">.border</div>.border
.border-top
<div class="border-top">.border-top</div>.border-top
.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
.border-blue
<div class="border border-blue">.border-blue</div>.border-blue
.border-blue-light
<div class="border border-blue-light">.border-blue-light</div>.border-blue-light
.border-green
<div class="border border-green">.border-green</div>.border-green
.border-green-light
<div class="border border-green-light">.border-green-light</div>.border-green-light
.border-red
<div class="border border-red">.border-red</div>.border-red
.border-red-light
<div class="border border-red-light">.border-red-light</div>.border-red-light
.border-purple
<div class="border border-purple">.border-purple</div>.border-purple
.border-yellow
<div class="border border-yellow">.border-yellow</div>.border-yellow
.border-gray-light
<div class="border border-gray-light">.border-gray-light</div>.border-gray-light
.border-gray-dark
<div class="border border-gray-dark">.border-gray-dark</div>.border-gray-dark
.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
text-blue
<p class="text-blue">.text-blue</p>.text-blue
text-dark
<p class="text-dark">.text-dark</p>.text-dark
text-gray-light
<p class="text-gray-light">.text-gray-light</p>.text-gray-light
text-gray
<p class="text-gray">.text-gray</p>.text-gray
text-gray-dark
<p class="text-gray-dark">.text-gray-dark</p>.text-gray-dark
text-red
<p class="text-red">.text-red</p>.text-red
text-orange
<p class="text-orange">.text-orange</p>.text-orange
text-orange-light
<p class="text-orange-light">.text-orange-light</p>.text-orange-light
text-yellow
<p class="text-yellow">.text-yellow</p>.text-yellow
text-green
<p class="text-green">.text-green</p>.text-green
text-purple
<p class="text-purple">.text-purple</p>.text-purple
text-pink
<p class="text-pink">.text-pink</p>.text-pink
.form-control
<label for="first_name">First name</label>
<input class="form-control" type="text" placeholder="First name" id="first_name" />Checkbox
Radio
<label>
<input type="radio" id="sa" name="radio" checked /> 普通預金
</label>
<label>
<input type="radio" id="ca" name="radio" /> 当座預金
</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
m-0
Primer CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。
マージンを無くすには、m-0 クラスを指定する。
<div class="m-0 bg-green-light">m-0</div>m-0
m-1
<div class="m-1 bg-green-light">m-1</div>m-1
m-2
<div class="m-2 bg-green-light">m-2</div>m-2
m-3
<div class="m-3 bg-green-light">m-3</div>m-3
m-4
<div class="m-4 bg-green-light">m-4</div>m-4
m-5
<div class="m-5 bg-green-light">m-5</div>m-5
m-6
マージンを一番大きくするには、m-6 クラスを指定する。
<div class="m-6 bg-green-light">m-6</div>m-6
mt-{n}
<div class="mt-0 mr-1 px-2 bg-green-light">mt-0</div>
<div class="mt-1 mr-1 px-2 bg-green-light">mt-1</div>
<div class="mt-2 mr-1 px-2 bg-green-light">mt-2</div>
<div class="mt-3 mr-1 px-2 bg-green-light">mt-3</div>
<div class="mt-4 mr-1 px-2 bg-green-light">mt-4</div>
<div class="mt-5 mr-1 px-2 bg-green-light">mt-5</div>
<div class="mt-6 mr-1 px-2 bg-green-light">mt-6</div>
</div><div class="d-flex flex-wrap">
<div class="mt-0 mr-1 px-2 bg-green-light">mt-0</div>
<div class="mt-1 mr-1 px-2 bg-green-light">mt-1</div>
<div class="mt-2 mr-1 px-2 bg-green-light">mt-2</div>
<div class="mt-3 mr-1 px-2 bg-green-light">mt-3</div>
<div class="mt-4 mr-1 px-2 bg-green-light">mt-4</div>
<div class="mt-5 mr-1 px-2 bg-green-light">mt-5</div>
<div class="mt-6 mr-1 px-2 bg-green-light">mt-6</div>
</div>mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
mr-{n}
<div class="mr-0 bg-green-light">.mr-0</div>
<div class="mr-1 mb-1 bg-green-light">.mr-1</div>
<div class="mr-2 mb-1 bg-green-light">.mr-2</div>
<div class="mr-3 mb-1 bg-green-light">.mr-3</div>
<div class="mr-4 mb-1 bg-green-light">.mr-4</div>
<div class="mr-5 mb-1 bg-green-light">.mr-5</div>
<div class="mr-6 mb-1 bg-green-light">.mr-6</div>.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mr-6
mb-{n}
<div class="d-flex flex-wrap">
<div class="mb-0 mr-1 px-2 bg-green-light">mb-0</div>
<div class="mb-1 mr-1 px-2 bg-green-light">mb-1</div>
<div class="mb-2 mr-1 px-2 bg-green-light">mb-2</div>
<div class="mb-3 mr-1 px-2 bg-green-light">mb-3</div>
<div class="mb-4 mr-1 px-2 bg-green-light">mb-4</div>
<div class="mb-5 mr-1 px-2 bg-green-light">mb-5</div>
<div class="mb-6 mr-1 px-2 bg-green-light">mb-6</div>
</div>mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
ml-0
<div class="ml-0 bg-green-light">.ml-0</div>.ml-0
ml-1
<div class="ml-1 mb-1 bg-green-light">.ml-1</div>.ml-1
ml-2
<div class="ml-2 bg-green-light">.ml-2</div>.ml-2
ml-3
<div class="ml-3 bg-green-light">.ml-3</div>.ml-3
ml-4
<div class="ml-4 bg-green-light">.ml-4</div>.ml-4
ml-5
<div class="ml-5 bg-green-light">.ml-5</div>.ml-5
ml-6
<div class="ml-6 bg-green-light">.ml-6</div>.ml-6
mx-{n}
<div class="mx-0 mb-1 bg-green-light">.mx-0</div>
<div class="mx-1 mb-1 bg-green-light">.mx-1</div>
<div class="mx-2 mb-1 bg-green-light">.mx-2</div>
<div class="mx-3 mb-1 bg-green-light">.mx-3</div>
<div class="mx-4 mb-1 bg-green-light">.mx-4</div>
<div class="mx-5 mb-1 bg-green-light">.mx-5</div>
<div class="mx-6 mb-1 bg-green-light">.mx-6</div>.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mx-6
my-{n}
<div class="d-flex flex-wrap">
<div class="my-0 mr-1 px-2 bg-green-light">my-0</div>
<div class="my-1 mr-1 px-2 bg-green-light">my-1</div>
<div class="my-2 mr-1 px-2 bg-green-light">my-2</div>
<div class="my-3 mr-1 px-2 bg-green-light">my-3</div>
<div class="my-4 mr-1 px-2 bg-green-light">my-4</div>
<div class="my-5 mr-1 px-2 bg-green-light">my-5</div>
<div class="my-6 mr-1 px-2 bg-green-light">my-6</div>
</div>my-0
my-1
my-2
my-3
my-4
my-5
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
<div class="p-0 bg-green-light">p-0</div>p-0
.p-1
<div class="p-1 bg-green-light">p-1</div>p-1
.p-2
<div class="p-2 bg-green-light">p-2</div>p-2
.p-3
<div class="p-3 bg-green-light">p-3</div>p-3
.p-4
<div class="p-4 bg-green-light">p-4</div>p-4
.p-5
<div class="p-5 bg-green-light">p-5</div>p-5
.p-6
<div class="p-6 bg-green-light">p-6</div>p-6
pt-{n}
<div class="pt-0 mb-1 px-2 bg-green-light">pt-0</div>
<div class="pt-1 mb-1 px-2 bg-green-light">pt-1</div>
<div class="pt-2 mb-1 px-2 bg-green-light">pt-2</div>
<div class="pt-3 mb-1 px-2 bg-green-light">pt-3</div>
<div class="pt-4 mb-1 px-2 bg-green-light">pt-4</div>
<div class="pt-5 mb-1 px-2 bg-green-light">pt-5</div>
<div class="pt-6 mb-1 px-2 bg-green-light">pt-6</div>pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6
pb-{n}
<div class="pb-0 mb-1 bg-green-light">.pb-0</div>
<div class="pb-1 mb-1 bg-green-light">.pb-1</div>
<div class="pb-2 mb-1 bg-green-light">.pb-2</div>
<div class="pb-3 mb-1 bg-green-light">.pb-3</div>
<div class="pb-4 mb-1 bg-green-light">.pb-4</div>
<div class="pb-5 mb-1 bg-green-light">.pb-5</div>
<div class="pb-6 mb-1 bg-green-light">.pb-6</div>.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-6
pl-0
<div class="pl-0 bg-green-light">.pl-0</div>.pl-0
pl-1
<div class="pl-1 bg-green-light">.pl-1</div>.pl-1
pl-2
<div class="pl-2 bg-green-light">.pl-2</div>.pl-2
pl-3
<div class="pl-3 bg-green-light">.pl-3</div>.pl-3
pl-4
<div class="pl-4 bg-green-light">.pl-4</div>.pl-4
pl-5
<div class="pl-5 bg-green-light">.pl-5</div>.pl-5
pl-6
<div class="pl-6 bg-green-light">.pl-6</div>.pl-6
py-{n}
<div class="py-0 mb-1 bg-green-light">.py-0</div>
<div class="py-1 mb-1 bg-green-light">.py-1</div>
<div class="py-2 mb-1 bg-green-light">.py-2</div>
<div class="py-3 mb-1 bg-green-light">.py-3</div>
<div class="py-4 mb-1 bg-green-light">.py-4</div>
<div class="py-5 mb-1 bg-green-light">.py-5</div>
<div class="py-6 mb-1 bg-green-light">.py-6</div>.py-0
.py-1
.py-2
.py-3
.py-4
.py-5
.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
<table>
<caption>金融機関コード</caption>
<thead>
<tr class="border-bottom">
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr class="border-bottom">
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr class="border-bottom">
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr class="border-bottom">
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
.width-full
<table class="width-full">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |