Pure.css CSSフレームワークの使い方をご紹介します。このページ自体もPure.cssを使っているので、そのままサンプルとなっています。
公式サイト | https://purecss.io/ |
開発者 | Yahoo! Inc. |
ライセンス | Yahoo BSD |
グリッド | 24列 |
GitHub stars | 21.5k |
モジュール | サイズ |
---|---|
pure-min.css | 16.4KB |
grids-responsive-min.css | 7.84KB |
Pure.css は CDN (Contents Delivery Network) を通じて導入できる。
<html>
<head>
<!-- ビューポート -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Pure.css -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />
</head>
</html>
<a class="pure-button" href="#">Link</a>
<button class="pure-button">Button</button>
Link
<a class="pure-button pure-button-primary" href="#">
Primary Link
</a>
<button class="pure-button pure-button-primary">
Primary button
</button>
Primary Link
<a class="pure-button pure-button-disabled" href="#">
Disabled link
</a>
<button class="pure-button pure-button-disabled">
Disabled button
</button>
<button class="pure-button" disabled>
Disabled button
</button>
Disabled link
<a class="pure-button pure-button-active" href="#">
Active link
</a>
<button class="pure-button pure-button-active">
Active button
</button>
Active link
<div class="pure-button-group">
<button class="pure-button">First</button>
<button class="pure-button">Second</button>
<button class="pure-button">Third</button>
</div>
<form class="pure-form">
<fieldset>
<legend>Sign in</legend>
<input id="email" type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form/
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Sign in</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
<form class="pure-form pure-form-aligned">
<fieldset>
<legend>Sign in</legend>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</div>
</fieldset>
</form>
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder="pure-input-1">
</form>
<form class="pure-form">
<input class="pure-input-1-2" type="text" placeholder="pure-input-1-2">
</form>
<form class="pure-form">
<input class="pure-input-1-3" type="text" placeholder="pure-input-1-3">
</form>
<form class="pure-form">
<input class="pure-input-2-3" type="text" placeholder="pure-input-2-3">
</form>
<form class="pure-form">
<input class="pure-input-1-4" type="text" placeholder="pure-input-1-4">
</form>
<form class="pure-form">
<input class="pure-input-3-4" type="text" placeholder="pure-input-3-4">
</form>
<form class="pure-form">
<input type="text" required>
</form>
<form class="pure-form">
<input type="text" disabled>
</form>
<form class="pure-form">
<input type="text" value="Readonly" readonly>
</form>
<form class="pure-form">
<input class="pure-input-rounded" type="text">
</form>
Pure.css のグリッドレイアウトシステムにおいて、横幅を100%にするには、pure-u-1 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1" style="background-color: silver;">
pure-u-1
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を2分の1にするには、pure-u-1-2 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-2" style="background-color: silver;">
pure-u-1-2
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を3分の1にするには、pure-u-1-3 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-3" style="background-color: silver;">
pure-u-1-3
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を3分の2にするには、pure-u-2-3 クラスを指定する。
<div class="pure-g">
<div class="pure-u-2-3" style="background-color: silver;">
pure-u-2-3
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を4分の1にするには、pure-u-1-4 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-4" style="background-color: silver;">
pure-u-1-4
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を4分の3にするには、pure-u-3-4 クラスを指定する。
<div class="pure-g">
<div class="pure-u-3-4" style="background-color: silver;">
pure-u-3-4
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を5分の1にするには、pure-u-1-5 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-5" style="background-color: silver;">
pure-u-1-5
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を5分の2にするには、pure-u-2-5 クラスを指定する。
<div class="pure-g">
<div class="pure-u-2-5" style="background-color: silver;">
pure-u-2-5
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を5分の3にするには、pure-u-3-5 クラスを指定する。
<div class="pure-g">
<div class="pure-u-3-5" style="background-color: silver;">
pure-u-3-5
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を5分の4にするには、pure-u-4-5 クラスを指定する。
<div class="pure-g">
<div class="pure-u-4-5" style="background-color: silver;">
pure-u-4-5
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を6分の1にするには、pure-u-1-6 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-6" style="background-color: silver;">
1/6
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を6分の5にするには、pure-u-5-6 クラスを指定する。
<div class="pure-g">
<div class="pure-u-5-6" style="background-color: silver;">
5/6
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を8分の1にするには、pure-u-1-8 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-8" style="background-color: silver;">
1/8
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を8分の3にするには、pure-u-3-8 クラスを指定する。
<div class="pure-g">
<div class="pure-u-3-8" style="background-color: silver;">
3/8
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を8分の5にするには、pure-u-5-8 クラスを指定する。
<div class="pure-g">
<div class="pure-u-5-8" style="background-color: silver;">
5/8
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を8分の7にするには、pure-u-7-8 クラスを指定する。
<div class="pure-g">
<div class="pure-u-7-8" style="background-color: silver;">
7/8
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を12分の1にするには、pure-u-1-12 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-12" style="background-color: silver;">
1/12
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を12分の5にするには、pure-u-5-12 クラスを指定する。
<div class="pure-g">
<div class="pure-u-5-12" style="background-color: silver;">
5/12
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を12分の7にするには、pure-u-7-12 クラスを指定する。
<div class="pure-g">
<div class="pure-u-7-12" style="background-color: silver;">
7/12
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を12分の7にするには、pure-u-7-12 クラスを指定する。
<div class="pure-g">
<div class="pure-u-11-12" style="background-color: silver;">
11/12
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、横幅を24分の1にするには、pure-u-1-24 クラスを指定する。
<div class="pure-g">
<div class="pure-u-1-24" style="background-color: silver;">
1/24
</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、画面サイズが小さい(568px以上、768px未満)ときのサイズを指定するには、pure-u-sm- 接頭辞を付ける。
キー | 適用 | クラス名 |
---|---|---|
なし | 常に | pure-u-* |
sm | ≥ 568px | pure-u-sm-* |
md | ≥ 768px | pure-u-md-* |
lg | ≥ 1024px | pure-u-lg-* |
xl | ≥ 1280px | pure-u-xl-* |
まずデフォルトのサイズを指定して、次に画面が小さい時のサイズを指定する。
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">first</div>
<div class="pure-u-1 pure-u-sm-1-2">second</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、画面サイズが中程度(768px以上、1024px未満)ときのサイズを指定するには、pure-u-md- 接頭辞を付ける。
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">first</div>
<div class="pure-u-1 pure-u-md-1-2">second</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、画面サイズが大きい(1024px以上、1280px未満)ときのサイズを指定するには、pure-u-lg- 接頭辞を付ける。
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-1-2">first</div>
<div class="pure-u-1 pure-u-lg-1-2">second</div>
</div>
Pure.css のグリッドレイアウトシステムにおいて、画面サイズが非常に大きい(1280px以上)ときのサイズを指定するには、pure-u-xl- 接頭辞を付ける。
<div class="pure-g">
<div class="pure-u-1 pure-u-xl-1-2">first</div>
<div class="pure-u-1 pure-u-xl-1-2">second</div>
</div>
画像をレスポンシブイメージにするには、pure-img クラスを指定する。
<img class="pure-img" src="/css/css.png" alt="CSS">
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/bootstrap/">Bootstrap</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/bulma/">Bulma</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/materialize/">Materialize</a>
</li>
</ul>
</div>
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-heading">Framework</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/milligram/">Milligram</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/primer/">Primer CSS</a>
</li>
</ul>
</div>
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">
<a class="pure-menu-link" href="#">Pure.css</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/semantic/">Semantic UI</a>
</li>
</ul>
</div>
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-disabled">
Semantic UI
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/skeleton/">Skeleton</a>
</li>
</ul>
</div>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/spectre/">Spectre.css</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/tachyons/">Tachyons</a>
</li>
</ul>
</div>
子メニューを持たせるには、pure-menu-has-children クラスを指定する。
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a class="pure-menu-link" href="#MENU">Framework</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/tailwind/">Tailwind CSS</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/uikit/">UIkit</a>
</li>
</ul>
</li>
</ul>
</div>
メニューをスクロール可能にするには、pure-menu-scrollable クラスを指定する。
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/bootstrap/">Bootstrap</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/bulma/">Bulma</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/materialize/">Materialize</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/milligram/">Milligram</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/primer/">Primer CSS</a>
</li>
<li class="pure-menu-item pure-menu-selected">
<a class="pure-menu-link" href="#">Pure.css</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/semantic/">Semantic UI</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/skeleton/">Skeleton</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/spectre/">Spectre.css</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/tachyons/">Tachyons</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/tailwind/">Tailwind CSS</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/uikit/">UIkit</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="/css/foundation/">Zurb Foundation</a>
</li>
</ul>
</div>
<table class="pure-table">
<caption>メディアクエリ</caption>
<thead>
<tr>
<th>クラス名</th>
<th>摘要</th>
</tr>
</thead>
<tbody>
<tr>
<th>pure-u-*</th>
<th>常に</th>
</tr>
<tr>
<th>pure-u-sm-*</th>
<th>≥ 568px</th>
</tr>
</tbody>
</table>
クラス名 | 摘要 |
---|---|
pure-u-* | 常に |
pure-u-sm-* | ≥ 568px |
pure-u-md-* | ≥ 768px |
pure-u-lg-* | ≥ 1024px |
pure-u-xl-* | ≥ 1280px |
<table class="pure-table pure-table-bordered">
クラス名 | 摘要 |
---|---|
pure-u-* | 常に |
pure-u-sm-* | ≥ 568px |
pure-u-md-* | ≥ 768px |
pure-u-lg-* | ≥ 1024px |
pure-u-xl-* | ≥ 1280px |
<table class="pure-table pure-table-horizontal">
クラス名 | 摘要 |
---|---|
pure-u-* | 常に |
pure-u-sm-* | ≥ 568px |
pure-u-md-* | ≥ 768px |
pure-u-lg-* | ≥ 1024px |
pure-u-xl-* | ≥ 1280px |
trタグにpure-table-oddクラスを指定すると、その行の色がグレーに変わる。
<table class="pure-table">
<caption>メディアクエリ</caption>
<thead>
<tr>
<th>クラス名</th>
<th>摘要</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<th>pure-u-*</th>
<th>常に</th>
</tr>
<tr>
<th>pure-u-sm-*</th>
<th>≥ 568px</th>
</tr>
<tr class="pure-table-odd">
<th>pure-u-md-*</th>
<th>≥ 768px</th>
</tr>
<tr>
<th>pure-u-lg-*</th>
<th>≥ 1024px</th>
</tr>
<tr class="pure-table-odd">
<th>pure-u-xl-*</th>
<th>≥ 1280px</th>
</tr>
</tbody>
</table>
クラス名 | 摘要 |
---|---|
pure-u-* | 常に |
pure-u-sm-* | ≥ 568px |
pure-u-md-* | ≥ 768px |
pure-u-lg-* | ≥ 1024px |
pure-u-xl-* | ≥ 1280px |