SE学院

Pure.cssの使い方

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

Pure.css
ItemDescription
URL https://purecss.io/
License Yahoo BSD
Pure.css v2.0.3
ModuleSize
pure-min.css 16.4KB
grids-responsive-min.css 7.84KB

使い方

はじめに Button
Form
Grid Image Menu
Table

はじめに

CDN

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

Button

.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="#">Link</a>
<button class="pure-button pure-button-primary">Button</button>
Link

.pure-button-disabled

<button class="pure-button pure-button-disabled">Button</button>
<button class="pure-button" disabled>Button</button>

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-{n}

<form class="pure-form pure-form-stacked">
  <input class="pure-input-1" type="text" placeholder=".pure-input-1">
  <input class="pure-input-3-4" type="text" placeholder=".pure-input-3-4">
  <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3">
  <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2">
  <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3">
  <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4">
</form>

required

<form class="pure-form">
  <input id="id" type="text" placeholder="ID" required>
  <span class="pure-form-message">必須</span>
</form>
必須

Grid

Breakpoint

Breakpoints
Key 画面幅 クラス名
なし すべて pure-u-*
sm ≥ 568px pure-u-sm-*
md ≥ 768px pure-u-md-*
lg ≥ 1024px pure-u-lg-*
xl ≥ 1280px pure-u-xl-*

.pure-u-{n}

<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

Image

<img class="pure-img" src="...">

Pure.cssにはメニュー・コンポーネントを作成するためのクラスが用意されています。

Pure.cssのメニュークラス
タグ クラス 説明
div pure-menu メニューの基本クラス
pure-menu-horizontal 水平メニュー
li pure-menu-heading メニューの見出し
pure-menu-item メニュー項目
pure-menu-selected 選択中のメニュー項目
pure-menu-disabled 選択できないメニュー項目
a pure-menu-link リンク 
<div class="pure-menu custom-restricted-width">
  <ul class="pure-menu-list">
    <li class="pure-menu-heading">
      Pure.css
    </li>
    <li class="pure-menu-item">
      <a href="button.html" class="pure-menu-link">Button</a>
    </li>
    <li class="pure-menu-item">
      <a href="form.html" class="pure-menu-link">Form</a>
    </li>
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Selected</a>
    </li>
    <li class="pure-menu-item pure-menu-disabled">
      Disabled
    </li>
  </ul>
</div>
<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-heading">
      Pure.css
    </li>
    <li class="pure-menu-item">
      <a href="button.html" class="pure-menu-link">Button</a>
    </li>
    <li class="pure-menu-item">
      <a href="form.html" class="pure-menu-link">Form</a>
    </li>
  </ul>
</div>

Table

.pure-table

<table class="pure-table">
クラス説明
pure-table テーブルの基本クラス（縦の枠線のみ）
pure-table-bordered 横の枠線もあるテーブル

.pure-table-bordered

<table class="pure-table pure-table-bordered">
クラス説明
pure-table テーブルの基本クラス（縦の枠線のみ）
pure-table-bordered 横の枠線もあるテーブル

.pure-table-horizontal

<table class="pure-table pure-table-horizontal">
クラス説明
pure-table テーブルの基本クラス（縦の枠線のみ）
pure-table-horizontal 横の枠線のみのテーブル

.pure-table-odd

trタグにpure-table-oddクラスを指定すると、その行の色がグレーに変わる。

<table class="pure-table">
  <tbody>
    <tr class="pure-table-odd">
クラス説明
なし ノーマライズされたテーブル
pure-table テーブルの基本クラス（縦の枠線のみ）
pure-table-bordered 横の枠線もあるテーブル
pure-table-horizontal 横の枠線のみのテーブル
pure-table-odd 行に色をつける
クラス説明