Intro

最近私はPico CSSをよく使っているので紹介したいと思います。

セマンティックな構文を優先し、すべてのHTML要素をデフォルトでレスポンシブかつエレガントにする、ミニマルで軽量なスターターキットです。
HTMLを書き、Pico CSSを追加して、出来上がり！

例えば最近流行りのユーティリティファーストなCSSでFormを書くとこんな感じで、

<div class="container display-flex my-md mx-sm">
  <form class="form shadow-md my-md mx-sm align-center">
    <div class="input-wrapper border-radius-sm">
      <input type="text" class="input text-color-gray placeholder-color-light-gray focus-outline-blue">
    </div>
    <div class="button-wrapper border-radius-sm">
      <button type="submit" class="button bg-color-blue text-color-white focus-light-blue hover-light-blue">
        Action
      </button>
    </div>
  </form>
</div>

ひたすらdiv要素とクラスの羅列が続きます。
何がどうなっているのかは注視すれば分かりますが、散らかっているように感じますね。

Pico CSSを使えばこう！！

<form>
  <input type="text">
  <button type="submit">Action</button>
</form>

div要素もクラスの羅列もありません。
すごいですね。

クラスライトとセマンティック
Pico CSSはシンプルさを追求し、HTMLタグに直接スタイルを設定します。また、ワイルドなHTMLピュアリストのためのクラスレスバージョンもあります。

クラスライトなミニマルCSSフレームワークですが、Water.cssのようなクラスレスCSSフレームワークとしても使うことができます。

https://watercss.kognise.dev/

私は今までWater.cssを使っていたのですが、クラスレスCSSフレームワークだと似たりよったりのデザインになってしまうので、Pico CSS使い始めるようになりました。

https://picocss.com/docs/mission

使い方は非常に簡単ですので紹介するまでもないのですが、今回は何ができるのか、どういった使い方ができるのか少し発展した内容を紹介していきたいと思います。

Getting started

まずはindex.htmlファイルを1つ用意します。

Quick start

https://picocss.com/docs

依存関係のないセットアップにはpico.cssを手動またはCDN経由でリンクし、高度な使用にはnpmまたはComposerを使用します。

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>

必要なコードはこれだけです。
簡単ですね！

もちろんjsDelivrのようなCDNを使わずにローカルから取得することもできます。
pico.min.cssで名前を付けて保存したらcssディレクトリ内に置いてコードを1行変えるだけです。

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <link rel="stylesheet" href="css/pico.min.css">

Pico CSSはSassで書かれたものをコンパイルしているので、Sassで@use "pico";から呼び出すこともできますし、npmやyarnようなパッケージマネージャーからインストールすることもできますし、なんとPHPのパッケージマネージャーComposerからインストールすることもできます。

Version picker

https://picocss.com/docs/version-picker

プロジェクトのニーズに合わせて、理想的なPico CSSバージョンのバリエーションを簡単に選択できます。

Pico CSSでは20種類のカラーテーマが用意されており、公式ドキュメントにあるVersion pickerから簡単に選択することができます。

["red", "pink", "fuchsia", "purple", "violet", "indigo", "blue", "azure", "cyan", "jade", "green", "lime", "yellow", "amber", "pumpkin", "orange", "sand", "grey", "zinc", "slate"]

pico.min.cssのように色の名前がついていないCSSファイルではデフォルトのazureが使用されます。

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.violet.min.css">

こうすれば紫になりますし、

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.violet.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.orange.min.css">

紫が合わない時はオレンジにすることもできます。
すべてのカラーテーマはjsDelivrのようなCDNから個別に取得できるだけではなく、ローカルから個別に取得することもできます。

https://picocss.com/docs/color-schemes

ライトモードとダークモードを切り替えることもできますし、380色すべてクラスから呼び出すことができるpico.colors.min.cssも配布していますし、カラーパレットをJSONファイルでダウンロードすることもできます。

https://picocss.com/docs/colors

Memo

pico.orange.min.cssで使われているオレンジ色の変数と、pico.colors.min.cssで使われているオレンジ色の変数を見比べるとこんな感じ。

--pico-primary-hover: #942d0d;
--pico-color-orange-650: #942d0d;
--pico-primary: #bd3c13;
--pico-primary-hover-background: #bd3c13;
--pico-color-orange-550: #bd3c13;

--pico-primary-background: #d24317;
--pico-color-orange-500: #d24317;
--pico-color-orange: #d24317;

--pico-primary-hover-background: #e74b1a;
--pico-color-orange-450: #e74b1a;
--pico-primary: #f56b3d;
--pico-color-orange-350: #f56b3d;
--pico-primary-hover: #f8a283;
--pico-color-orange-250: #f8a283;

Version pickerのConfigurationを全マシするとこんな感じ。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.conditional.orange.min.css"
>

@use "pico" with (
  $theme-color: "orange",
  $enable-semantic-container: true,
  $enable-viewport: false,
  $enable-classes: false,
  $parent-selector: ".pico"
);

Class-less version

https://picocss.com/docs/classless

Pico CSSの.classlessバージョンでミニマリズムを取り入れましょう。これは、シンプルなアプローチを好むワイルドなHTMLピュアリストのためのセマンティックなオプションです。

pico.min.cssをpico.classless.min.cssにするとクラスレスCSSフレームワークとして使うことができます。

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.orange.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.orange.min.css">

したがって、以下の2つは同じ動作をします。

<!-- With pico.min.css -->
<body>
  <main class="container">
    <h1>Hello, world!</h1>
  </main>
</body>

<!-- With pico.classless.min.css -->
<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>

containerクラスがないことが分かります。
もしcontainerクラスではなく、container-fluidクラスをmainをはじめとした各要素で使いたい場合はpico.fluid.classless.min.cssを使いましょう。

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.orange.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.orange.min.css">

この2つのクラスは後で紹介します。

クラスを全く書かなくて良くなる一方、以降紹介するクラスを書かなければ動かない機能は使えなくなるため注意しましょう。
ただHTML要素を少し便利にした機能はクラスレスでも使うことができます。クラスを使っていないので。

なんだかたくさんCSSファイルを紹介してしまったのでまとめておきます。

pico.css
pico.orange.css
pico.orange.min.css
pico.classless.orange.min.css
pico.fluid.classless.orange.min.css
pico.conditional.orange.min.css
pico.classless.conditional.orange.min.css
pico.fluid.classless.conditional.orange.min.css
pico.colors.min.css

Conditionalはpicoクラスを追加するものです。

https://picocss.com/docs/conditional

Layout

それではPico CSSの各機能を紹介します。
ただ難しく考える必要はなく、Layout, Content, Forms, Componentsの4種類を覚えればいいだけです。
Layoutさえマスターすれば後は使いたい要素やクラスごとに覚えればいいだけなので、今日はLayoutだけでも覚えていってください。

Container

https://picocss.com/docs/container

中央寄せのビューポートには.containerを、全幅レイアウトには.container-fluidを使用してください。

Getting startedから全く触れずにやってきましたが、このcontainerクラスとcontainer-fluidクラスを使うだけでいい感じにレスポンシブデザインを作ることができます。
クラスレスバージョンでも紹介したように、唯一クラスレスで使うことができるクラスです。クラスを使用せずに（？？？）

containerクラスはブレイクポイントごとに固定幅で表示することができ、container-fluidクラスは幅100%で表示することができます。

クラスとして個別に設定することで、以下のようにheader要素やfooter要素、main要素で固定幅と幅100%を分けて設定することができます（クラスレスではできない）

<body>
  <header class="container">
    ...
  </header>
  <main class="container">
    ...
  </main>
  <footer class="container">
    ...
  </footer>
</body>

header container

<body>
  <header class="container-fluid">
    ...
  </header>
  <main class="container">
    ...
  </main>
  <footer class="container-fluid">
    ...
  </footer>
</body>

main container

<body>
  <header class="container-fluid">
    ...
  </header>
  <main class="container-fluid">
    ...
  </main>
  <footer class="container-fluid">
    ...
  </footer>
</body>

header main fluid

どこかで見たことありますね。
そうですTailwind CSSやBootstrapと同じものです。
ただブレイクポイントが若干異なります。

Section

セマンティックなランドマークやセクションでページを構成することで、アクセシビリティを向上させ、間隔を空けることができます。

section要素を使うと自動的にmargin-bottom: 1rem;が追加されます。

Grid

https://picocss.com/docs/grid

.gridを使用して、自動レイアウトのカラムを有効にし、最小限のレスポンシブレイアウトを作成します。

本当に必要最低限の機能しかありません。
768px以下であれば縦に並んで、より大きい場合は横に並ぶと考えましょう。

Pico CSSはネイティブのHTML要素に重点を置いているため、このグリッドシステムは最小限にとどめました。
フレックスボックスの完全なグリッドシステムは、すべての順序付け、オフセット、ブレークポイントのユーティリティを含むと、Pico CSSライブラリの総サイズよりも重くなります。Picoの精神に反するのです。

Overflow auto

https://picocss.com/docs/overflow-auto

.overflow-autoは、要素のコンテンツがその限界を超えて拡張された場合、要素に自動スクロールバーを有効にします。

overflow-autoクラスを使えばtableのような横長の要素に横スクロールを追加できます。
これでスマホでテーブルを表示したときの残念な縦長表示を防止することができます。

メチャ便利。

Content

ContentではLayout上に表示するメインコンテンツについて紹介しています。

Typography

https://picocss.com/docs/typography

すべてのタイポグラフィ要素はレスポンシブで、デバイスやビューポートを問わず優雅に拡大縮小します。

見出しをはじめとした様々な要素もしっかりとスタイリングしてくれます。
Markdownとの相性もバッチリです。

Link

https://picocss.com/docs/link

リンクには.secondaryと.contrastのスタイルがあります。

クラスのないa要素はテーマカラーごとのPrimaryカラーが付与されますが、secondaryクラスとcontrastクラスを使うことによってSecondaryカラー、Contrastカラーを付与することができます。

Button

https://picocss.com/docs/button

ボタンはネイティブの<button>タグを使用し、デフォルトのスタイルには.classesを使用していません。

こちらのbutton要素もテーマカラーごとのPrimaryカラーが付与されますが、secondaryクラスでSecondaryカラー、contrastクラスでContrastカラーを付与することができます。
またoutlineクラスもあわせて追加することによって、アウトラインボタンを作ることもできます。

Table

https://picocss.com/docs/table

<table>のためのクリーンで最小限のスタイルで、一貫した間隔と最小限のボーダーのない外観を提供します。

table要素できれいなテーブルを表示できます。
stripedクラスを使うことで控えめな二色のストライプ表示にできます。

Forms

Pico CSSを使えば何もしていないのにFormが美しくなります。

Overview

https://picocss.com/docs/forms

すべてのフォーム要素は、ピュアセマンティックHTMLによる完全なレスポンシブ対応で、デバイスやビューポートを問わず、フォームを優雅に拡大縮小することができます。

先ほど紹介したbutton要素やinput要素を使いつつ、いつも通りFormを書くだけです。
Groupコンポーネントで紹介しているrole="group"やrole="search"のようなWAI-ARIAロールを使えばより美しくなります。

https://picocss.com/docs/group

特に紹介することもないのでFormなどで使われているPico CSSのSVGアイコンでも紹介しておきます。

icon

すべてCSSのurl()関数で埋め込んでいます。やべ～。

右端のCみたいなやつはLoadingコンポーネントで紹介しているスピナー用のアニメーションアイコンです。

https://picocss.com/docs/loading

WAI-ARIAを活用しており、aria-busy="true"で使うことができます。

Components

先行していくつか紹介しましたが、Pico CSSのComponentを使えばJavaScriptを使わずに、HTMLとCSSだけで様々な機能を作ることができます。

ほーいいじゃないか
こういうのでいいんだよ
こういうので

Accordion

https://picocss.com/docs/accordion

JavaScriptを使わず、最小限のセマンティックなマークアップを使用して、純粋なHTMLでコンテンツのセクションを切り替えます。

文章が長くなった時に便利です。details要素とsummary要素を使用しています。
WAI-ARIAロールのrole="button"を使うことでボタンのように表示することができ、Buttonでも紹介したテーマカラーごとのPrimaryカラー、secondaryクラスのSecondaryカラー、contrastクラスのContrastカラー、outlineクラスのアウトラインボタンで表示するやつもできます。

さらに！ details要素にdropdownクラスを追加することによって！
Dropdownメニューを作ることもできるのだ～。

https://picocss.com/docs/dropdown

JavaScriptを使わずに、最小限のセマンティックなHTMLでドロップダウンメニューやカスタムセレクトを作成できます。

Dropdownメニューの何が嬉しいかというと、select要素ではできないようなラジオボタンやチェックボックスも作れたりするわけです。

JavaScriptを使っていないということはJavaScriptフレームワークも使っていないということなので、React, Vue.js, Angular, Preact, Svelte, Alpine.js, Solid, Qwik, HTMXと一緒に使っても問題ないということです。

https://picocss.com/docs/modal

セマンティックな HTML タグ <dialog> を使用し、デバイスやビューポートをまたいだ間隔を優雅に保つ、クラシックなモーダルコンポーネントです。

HTMLの中では新しめのdialog要素も便利にすることができます。
<button rel="prev">タグを使えば閉じるボタンを追加できますし、Modalコンポーネントには3つのユーティリティクラスが付属しています。

modal-is-openクラスは、モーダルの下でのスクロールやインタラクションを防ぎます。

<!doctype html>
<html class="modal-is-open">
  ...
</html>

modal-is-openingクラスは、開くアニメーションを表示します。

<!doctype html>
<html class="modal-is-open modal-is-opening">
  ...
</html>

modal-is-closingクラスは、閉じるアニメーションを表示します。

<!doctype html>
<html class="modal-is-open modal-is-closing">
  ...
</html>

JavaScriptを使わずにできちゃいます！

Card

https://picocss.com/docs/card

様々なデバイスやビューポートで優雅な間隔を提供するセマンティックなマークアップで、柔軟なカードを作成しましょう。

Cardコンポーネントは至ってシンプル、article要素を使用するだけです。

Nav

https://picocss.com/docs/nav

純粋なセマンティックHTMLの必須ナビバーコンポーネントです。

Navコンポーネントも至ってシンプル、nav要素を使用するだけです。
縦に積みたい場合はaside要素を外側に追加しましょう。

nav要素の中にはリストを追加できますし、リンクも追加できますし、ボタンも追加できますし、WAI-ARIAのaria-label="breadcrumb"でパンくずリストにすることもできますし、Dropdownメニューを作ることもでき、できることは無限大です（Living Standardの仕様の範囲で）

Outro

以上、いくつか紹介できなかったものもありますので、気になる方は公式ドキュメントを読んだり、以下サンプルを確認してみてください。

クラスレスバージョンはこちら。

Linktreeのようなリンクページや簡単なSPAであればこれだけで十分ですし、ホームページと呼ばれるウェブサイトやFormを使った読み書きできるアプリケーションでもしっかりと使うことができます！

ここまで書いて終わろうと思いましたが、少し前にLaravel 11でCRUDやったことを思い出したので実際にPico CSSを使ってみました。

index
create
show
edit
success

Quick startで紹介したやつをコピペして色をオレンジにしてclassをいじってFormをGroupにした程度で少し雑ですが、3分ぐらいで簡単にPico CSSのデザインを実装することができました！

ではでは！！ときめいたらぜひPico CSSを使ってみてください！
Happy Magic!

Discussion