GitHubが開発したPrimer CSSフレームワークの使い方をご紹介します。このページもPrimer CSSを使っているので、そのままサンプルとなっています。
公式サイト | https://primer.style/css/ |
開発者 | GitHub |
ライセンス | MIT |
グリッド | 12列 |
GitHub stars | 10k |
CDN (Contents Delivery Network) を通じてCSSをインポートすることもできます。
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
</head>
<body>
<!-- content -->
</body>
</html>
Primer CSSでフラッシュ(アラート)を作成するには、flash クラスを指定する。
<div class="flash">情報</div>
<div class="flash flash-success">成功</div>
警告を意味するアラートを作成するには、flash
クラスに加えて、flash-warn
修飾クラスを指定します。
<div class="flash flash-warn">警告</div>
<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>
Primer CSSで背景色を青にするには、bg-blue クラスを指定する。
<div class="bg-blue">bg-blue</div>
<div class="bg-blue-light">.bg-blue-light</div>
<div class="bg-red">.bg-red</div>
<div class="bg-red-light">.bg-red-light</div>
<div class="bg-green-light">.bg-green-light</div>
<div class="bg-yellow-dark">.bg-yellow-dark</div>
<div class="bg-yellow">.bg-yellow</div>
<div class="bg-yellow-light">.bg-yellow-light</div>
<div class="bg-purple">.bg-purple</div>
<div class="bg-gray-dark text-gray-light">.bg-gray-dark</div>
<div class="bg-gray">.bg-gray</div>
<div class="bg-white">.bg-white</div>
<div class="border">.border</div>
<div class="border-top">.border-top</div>
<div class="border-right">.border-right</div>
<div class="border-bottom">.border-bottom</div>
<div class="border-left">.border-left</div>
<div class="border-x">.border-x</div>
<div class="border-y">.border-y</div>
<div class="border border-dashed">.border-dashed</div>
<div class="border border-blue">.border-blue</div>
<div class="border border-blue-light">.border-blue-light</div>
<div class="border border-green">.border-green</div>
<div class="border border-green-light">.border-green-light</div>
<div class="border border-red">.border-red</div>
<div class="border border-red-light">.border-red-light</div>
<div class="border border-purple">.border-purple</div>
<div class="border border-yellow">.border-yellow</div>
<div class="border border-gray-light">.border-gray-light</div>
<div class="border border-gray-dark">.border-gray-dark</div>
<div class="border rounded-1">.rounded-1</div>
<div class="border rounded-2">.rounded-2</div>
<div class="border rounded-top-1">.rounded-top-1</div>
<div class="border rounded-top-2">.rounded-top-2</div>
<div class="border rounded-right-1">.rounded-right-1</div>
<div class="border rounded-right-2">.rounded-right-2</div>
<div class="border rounded-bottom-1">.rounded-bottom-1</div>
<div class="border rounded-bottom-2">.rounded-bottom-2</div>
<div class="border rounded-left-1">.rounded-left-1</div>
<div class="border rounded-left-2">.rounded-left-2</div>
<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>
<button class="btn" type="button">Button</button>
<a class="btn" href="#" role="button">Link</a>
Link
<button class="btn btn-sm" type="button">Small</button>
<button class="btn btn-large" type="button">Large</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-outline" type="button">Outline</button>
<button class="btn" type="button" aria-disabled="true">Disabled</button>
<button class="btn btn-block" type="button">Block</button>
<p class="text-blue">.text-blue</p>
.text-blue
<p class="text-dark">.text-dark</p>
.text-dark
<p class="text-gray-light">.text-gray-light</p>
.text-gray-light
<p class="text-gray">.text-gray</p>
.text-gray
<p class="text-gray-dark">.text-gray-dark</p>
.text-gray-dark
<p class="text-red">.text-red</p>
.text-red
<p class="text-orange">.text-orange</p>
.text-orange
<p class="text-orange-light">.text-orange-light</p>
.text-orange-light
<p class="text-yellow">.text-yellow</p>
.text-yellow
<p class="text-green">.text-green</p>
.text-green
<p class="text-purple">.text-purple</p>
.text-purple
<p class="text-pink">.text-pink</p>
.text-pink
<label for="first_name">First name</label>
<input class="form-control" type="text" placeholder="First name" id="first_name" />
<label>
<input type="radio" id="sa" name="radio" checked /> 普通預金
</label>
<label>
<input type="radio" id="ca" name="radio" /> 当座預金
</label>
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>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の1にするには、col-1 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-1 float-left border p-1">
col-1
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の2にするには、col-2 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-2 float-left border p-1">
col-2
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の3にするには、col-3 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-3 float-left border p-1">
col-3
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の4にするには、col-4 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-4 float-left border p-1">
col-4
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の5にするには、col-5 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-5 float-left border p-1">
col-5
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の6にするには、col-6 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-6 float-left border p-1">
col-6
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の7にするには、col-7 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-7 float-left border p-1">
col-7
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の8にするには、col-8 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-8 float-left border p-1">
col-8
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の9にするには、col-9 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-9 float-left border p-1">
col-9
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の10にするには、col-10 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-10 float-left border p-1">
col-10
</div>
</div>
Primer CSS のグリッドレイアウトシステムにおいて横幅を12分の11にするには、col-11 クラスを指定する。
<div class="container-lg clearfix">
<div class="col-11 float-left border p-1">
col-11
</div>
</div>
画像をレスポンシブデザインにするには、img-responsive クラスを指定する。レスポンシブな画像は、画面幅に合わせて縮小される。
<img src="whale.png" class="img-responsive" alt="whale" />
<img src="whale.png" class="img-responsive grayscale" alt="whale" />
<span class="Label">Label</span>
Label
<span class="State">State</span>
State
<span class="Counter">1</span>
1
Primer CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。
マージンを無くすには、m-0 クラスを指定する。
<div class="m-0 bg-green-light">m-0</div>
<div class="m-1 bg-green-light">m-1</div>
<div class="m-2 bg-green-light">m-2</div>
<div class="m-3 bg-green-light">m-3</div>
<div class="m-4 bg-green-light">m-4</div>
<div class="m-5 bg-green-light">m-5</div>
マージンを一番大きくするには、m-6 クラスを指定する。
<div class="m-6 bg-green-light">m-6</div>
<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>
<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>
<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>
<div class="ml-0 bg-green-light">.ml-0</div>
<div class="ml-1 mb-1 bg-green-light">.ml-1</div>
<div class="ml-2 bg-green-light">.ml-2</div>
<div class="ml-3 bg-green-light">.ml-3</div>
<div class="ml-4 bg-green-light">.ml-4</div>
<div class="ml-5 bg-green-light">.ml-5</div>
<div class="ml-6 bg-green-light">.ml-6</div>
<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>
<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>
<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>
<div class="p-0 bg-green-light">p-0</div>
<div class="p-1 bg-green-light">p-1</div>
<div class="p-2 bg-green-light">p-2</div>
<div class="p-3 bg-green-light">p-3</div>
<div class="p-4 bg-green-light">p-4</div>
<div class="p-5 bg-green-light">p-5</div>
<div class="p-6 bg-green-light">p-6</div>
<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>
<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>
<div class="pl-0 bg-green-light">.pl-0</div>
<div class="pl-1 bg-green-light">.pl-1</div>
<div class="pl-2 bg-green-light">.pl-2</div>
<div class="pl-3 bg-green-light">.pl-3</div>
<div class="pl-4 bg-green-light">.pl-4</div>
<div class="pl-5 bg-green-light">.pl-5</div>
<div class="pl-6 bg-green-light">.pl-6</div>
<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>
<p class="text-center">Center aligned text</p>
Center aligned text
<p class="text-right">Right aligned text</p>
Right aligned text
<p class="text-italic">Italic</p>
Italic
<p class="text-bold">Bold</p>
Bold
<p class="text-underline">Underline</p>
Underline
<p class="text-emphasized">Emphasized</p>
Emphasized
<p class="text-small">Small</p>
Small
<p class="lead">
Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。
</p>
Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。
<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 | ゆうちょ銀行 |
<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 クラスを指定する。
<div class="container-sm bg-green-light">container-sm</div>
中サイズのコンテナを作成するには、container-md クラスを指定する。
<div class="container-md bg-green-light">container-md</div>
大きいコンテナを作成するには、container-lg クラスを指定する。
<div class="container-lg bg-green-light">container-lg</div>
特大サイズのコンテナを作成するには、container-xl クラスを指定する。
<div class="container-xl bg-green-light">container-xl</div>