Pure.css

Yahoo!が開発したCSSフレームワーク「Pure.css」の使い方をご紹介します。このページ自体もPure.cssを使っているので、そのままサンプルとなっています。

CSSフレームワーク

Pure.css
公式サイト https://purecss.io/
開発者 Yahoo! Inc.
ライセンス Yahoo BSD
グリッド 24列
GitHub stars 21.7k
Pure.css v2.0.6
モジュールサイズ
pure-min.css 16.3KB
grids-responsive-min.css 7.81KB

使い方

はじめに Button Form
Grid
Grid for SM screen Grid for MD screen Grid for LG screen Grid for XL screen Image
Menu Table

CDN

Pure.css は CDN (Contents Delivery Network) を通じて導入できる。

<!DOCTYPE html>
<html>
  <head>
    <!-- ビューポート -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Pure.css -->
    <link rel="stylesheet"
      href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
      integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
      crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">
  </head>
</html>

.pure-button

<a class="pure-button" href="#">Link</a>
<button class="pure-button">Button</button>
Link

.pure-button-primary

<a class="pure-button pure-button-primary" href="#">
  Primary Link
</a>
<button class="pure-button pure-button-primary">
  Primary button
</button>
Primary Link

.pure-button-disabled

<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

.pure-button-active

<a class="pure-button pure-button-active" href="#">
  Active link
</a>
<button class="pure-button pure-button-active">
  Active button
</button>
Active link

.pure-button-group

<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

.pure-form

<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/
Sign in

.pure-form-stacked

<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>
Sign in

.pure-form-aligned

<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>
Sign in

.pure-input-1

<form class="pure-form">
  <input class="pure-input-1" type="text" placeholder="pure-input-1">
</form>

.pure-input-1-2

<form class="pure-form">
  <input class="pure-input-1-2" type="text" placeholder="pure-input-1-2">
</form>

.pure-input-1-3

<form class="pure-form">
  <input class="pure-input-1-3" type="text" placeholder="pure-input-1-3">
</form>

.pure-input-2-3

<form class="pure-form">
  <input class="pure-input-2-3" type="text" placeholder="pure-input-2-3">
</form>

.pure-input-1-4

<form class="pure-form">
  <input class="pure-input-1-4" type="text" placeholder="pure-input-1-4">
</form>

.pure-input-3-4

<form class="pure-form">
  <input class="pure-input-3-4" type="text" placeholder="pure-input-3-4">
</form>

required

<form class="pure-form">
  <input type="text" required>
</form>

disabled

<form class="pure-form">
  <input type="text" disabled>
</form>

readonly

<form class="pure-form">
  <input type="text" value="Readonly" readonly>
</form>

.pure-input-rounded

<form class="pure-form">
  <input class="pure-input-rounded" type="text">
</form>

.pure-u-1

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-u-1

.pure-u-1-2

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-u-1-2

.pure-u-1-3

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-u-1-3

.pure-u-2-3

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-u-2-3

.pure-u-1-4

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-u-1-4

.pure-u-3-4

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-u-3-4

.pure-u-1-5

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-u-1-5

.pure-u-2-5

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-u-2-5

.pure-u-3-5

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-u-3-5

.pure-u-4-5

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-u-4-5

.pure-u-1-6

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>
1/6

.pure-u-5-6

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>
5/6

.pure-u-1-8

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>
1/8

.pure-u-3-8

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>
3/8

.pure-u-5-8

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>
5/8

.pure-u-7-8

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>
7/8

.pure-u-1-12

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>
1/12

.pure-u-5-12

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>
5/12

.pure-u-7-12

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>
7/12

.pure-u-11-12

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>
11/12

.pure-u-1-24

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>
1/24

.pure-u-sm-*

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>
first
second

.pure-u-md-*

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>
first
second

.pure-u-lg-*

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>
first
second

.pure-u-xl-*

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>
first
second

.pure-img

画像をレスポンシブイメージにするには、pure-img クラスを指定する。

<img class="pure-img" src="/css/css.png" alt="CSS">
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>

.pure-table

<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

.pure-table-bordered

<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

.pure-table-horizontal

<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

.pure-table-odd

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