Pure.cssの使い方

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

Pure.cssの使い方

Pure.cssのコンポーネントは、CSSのみで構成されています。

Pure.cssのクラス名には pure-* という接頭辞がついているため、ほかのCSSクラス名と衝突を起こしにくくなっています。

Pure.cssを使うには、CDN (Contents Delivery Network)を介してPure.cssのCSSをインポートする。

<link rel="stylesheet"
  href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"
  integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47"
  crossorigin="anonymous">

レスポンシブにするために、ビューポートも指定する。

<meta name="viewport" content="width=device-width, initial-scale=1">

Blockquote

<blockquote>
A set of small, responsive CSS modules that you can use in every web project.
</blockquote>

A set of small, responsive CSS modules that you can use in every web project.

Menu

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

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

Horizontal Menu

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