Primer CSS

GitHubが開発したPrimer CSSフレームワークの使い方をご紹介します。このページもPrimer CSSを使っているので、そのままサンプルとなっています。

概要

Primer CSS
公式サイト https://primer.style/css/
開発者 GitHub
ライセンス MIT
グリッド 12列
GitHub stars 10k

チートシート

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
<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>
Link

.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" />
whale

Grayscale image

<img src="whale.png" class="img-responsive grayscale" alt="whale" />
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
<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>
<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>
<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ゆうちょ銀行

.container-sm

小さいコンテナを作成するには、container-sm クラスを指定する。

<div class="container-sm bg-green-light">container-sm</div>
container-sm

.container-md

中サイズのコンテナを作成するには、container-md クラスを指定する。

<div class="container-md bg-green-light">container-md</div>
container-md

.container-lg

大きいコンテナを作成するには、container-lg クラスを指定する。

<div class="container-lg bg-green-light">container-lg</div>
container-lg

.container-xl

特大サイズのコンテナを作成するには、container-xl クラスを指定する。

<div class="container-xl bg-green-light">container-xl</div>
container-xl