Pure.css

Pure.css CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Pure.cssを使って作っています。

CSSフレームワーク

Pure.css
項目内容
公式サイト https://purecss.io/
開発者 Yahoo! Inc.
ライセンス Yahoo BSD
Pure.css v2.0.3
モジュールサイズ
pure-min.css 16.4KB
grids-responsive-min.css 7.84KB

使い方

はじめに Button
Form
Grid Image
Menu Table

CDN

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>

.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-*

<div class="pure-g">
  <div class="pure-u-1-2">.pure-u-1-2</div>
  <div class="pure-u-1-2">.pure-u-1-2</div>
</div>
.pure-u-1-2
.pure-u-1-2
<div class="pure-g">
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
</div>
.pure-u-1-3
.pure-u-1-3
.pure-u-1-3
<div class="pure-g">
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-2-3">.pure-u-2-3</div>
</div>
.pure-u-1-3
.pure-u-2-3
<div class="pure-g">
  <div class="pure-u-2-3">.pure-u-2-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
</div>
.pure-u-2-3
.pure-u-1-3

.pure-u-sm-*

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

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

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

<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</a>
    </li>
  </ul>
</div>
  • Framework
    • <div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a class="pure-menu-link" href="#BUTTON">button</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="#FORM">form</a>
    </li>
  </ul>
</div>
    <div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-disabled">
      disabled
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="#FORM">form</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="#BUTTON">Button</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="#FORM">Form</a>
    </li>
  </ul>
</div>
    <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">menu</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a class="pure-menu-link" href="#MENU-HEADING">heading</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    <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