SE学院

Pure.cssの使い方

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

Pure.css
ItemDescription
URL https://purecss.io/
License Yahoo BSD
Pure.css v1.0.1
ModuleSize
pure-min.css 16.8KB
grids-responsive-min 7.84KB

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.

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>

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>