デザインがときめくPico CSSの魔法
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フレームワークとしても使うことができます。
私は今までWater.cssを使っていたのですが、クラスレスCSSフレームワークだと似たりよったりのデザインになってしまうので、Pico CSS使い始めるようになりました。
使い方は非常に簡単ですので紹介するまでもないのですが、今回は何ができるのか、どういった使い方ができるのか少し発展した内容を紹介していきたいと思います。
Getting started
まずはindex.htmlファイルを1つ用意します。
Quick start
依存関係のないセットアップにはpico.cssを手動またはCDN経由でリンクし、高度な使用にはnpmまたはComposerを使用します。
<!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
プロジェクトのニーズに合わせて、理想的な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から個別に取得できるだけではなく、ローカルから個別に取得することもできます。
ライトモードとダークモードを切り替えることもできますし、380色すべてクラスから呼び出すことができるpico.colors.min.cssも配布していますし、カラーパレットをJSONファイルでダウンロードすることもできます。
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
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クラスを追加するものです。
Layout
それではPico CSSの各機能を紹介します。
ただ難しく考える必要はなく、Layout, Content, Forms, Componentsの4種類を覚えればいいだけです。
Layoutさえマスターすれば後は使いたい要素やクラスごとに覚えればいいだけなので、今日はLayoutだけでも覚えていってください。
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>
<body>
<header class="container-fluid">
...
</header>
<main class="container">
...
</main>
<footer class="container-fluid">
...
</footer>
</body>
<body>
<header class="container-fluid">
...
</header>
<main class="container-fluid">
...
</main>
<footer class="container-fluid">
...
</footer>
</body>
どこかで見たことありますね。
そうですTailwind CSSやBootstrapと同じものです。
ただブレイクポイントが若干異なります。
Section
セマンティックなランドマークやセクションでページを構成することで、アクセシビリティを向上させ、間隔を空けることができます。
section要素を使うと自動的にmargin-bottom: 1rem;が追加されます。
Grid
.gridを使用して、自動レイアウトのカラムを有効にし、最小限のレスポンシブレイアウトを作成します。
本当に必要最低限の機能しかありません。
768px以下であれば縦に並んで、より大きい場合は横に並ぶと考えましょう。
Pico CSSはネイティブのHTML要素に重点を置いているため、このグリッドシステムは最小限にとどめました。
フレックスボックスの完全なグリッドシステムは、すべての順序付け、オフセット、ブレークポイントのユーティリティを含むと、Pico CSSライブラリの総サイズよりも重くなります。Picoの精神に反するのです。
Overflow auto
.overflow-autoは、要素のコンテンツがその限界を超えて拡張された場合、要素に自動スクロールバーを有効にします。
overflow-autoクラスを使えばtableのような横長の要素に横スクロールを追加できます。
これでスマホでテーブルを表示したときの残念な縦長表示を防止することができます。
メチャ便利。
Content
ContentではLayout上に表示するメインコンテンツについて紹介しています。
Typography
すべてのタイポグラフィ要素はレスポンシブで、デバイスやビューポートを問わず優雅に拡大縮小します。
見出しをはじめとした様々な要素もしっかりとスタイリングしてくれます。
Markdownとの相性もバッチリです。
Link
リンクには.secondaryと.contrastのスタイルがあります。
クラスのないa要素はテーマカラーごとのPrimaryカラーが付与されますが、secondaryクラスとcontrastクラスを使うことによってSecondaryカラー、Contrastカラーを付与することができます。
Button
ボタンはネイティブの<button>タグを使用し、デフォルトのスタイルには.classesを使用していません。
こちらのbutton要素もテーマカラーごとのPrimaryカラーが付与されますが、secondaryクラスでSecondaryカラー、contrastクラスでContrastカラーを付与することができます。
またoutlineクラスもあわせて追加することによって、アウトラインボタンを作ることもできます。
Table
<table>のためのクリーンで最小限のスタイルで、一貫した間隔と最小限のボーダーのない外観を提供します。
table要素できれいなテーブルを表示できます。
stripedクラスを使うことで控えめな二色のストライプ表示にできます。
Forms
Pico CSSを使えば何もしていないのにFormが美しくなります。
Overview
すべてのフォーム要素は、ピュアセマンティックHTMLによる完全なレスポンシブ対応で、デバイスやビューポートを問わず、フォームを優雅に拡大縮小することができます。
先ほど紹介したbutton要素やinput要素を使いつつ、いつも通りFormを書くだけです。
Groupコンポーネントで紹介しているrole="group"やrole="search"のようなWAI-ARIAロールを使えばより美しくなります。
特に紹介することもないのでFormなどで使われているPico CSSのSVGアイコンでも紹介しておきます。
すべてCSSのurl()関数で埋め込んでいます。やべ～。
右端のCみたいなやつはLoadingコンポーネントで紹介しているスピナー用のアニメーションアイコンです。
WAI-ARIAを活用しており、aria-busy="true"で使うことができます。
Components
先行していくつか紹介しましたが、Pico CSSのComponentを使えばJavaScriptを使わずに、HTMLとCSSだけで様々な機能を作ることができます。
ほー いいじゃないか
こういうのでいいんだよ
こういうので
Accordion
JavaScriptを使わず、最小限のセマンティックなマークアップを使用して、純粋なHTMLでコンテンツのセクションを切り替えます。
文章が長くなった時に便利です。details要素とsummary要素を使用しています。
WAI-ARIAロールのrole="button"を使うことでボタンのように表示することができ、Buttonでも紹介したテーマカラーごとのPrimaryカラー、secondaryクラスのSecondaryカラー、contrastクラスのContrastカラー、outlineクラスのアウトラインボタンで表示するやつもできます。
さらに！ details要素にdropdownクラスを追加することによって！
Dropdownメニューを作ることもできるのだ～。
JavaScriptを使わずに、最小限のセマンティックなHTMLでドロップダウンメニューやカスタムセレクトを作成できます。
Dropdownメニューの何が嬉しいかというと、select要素ではできないようなラジオボタンやチェックボックスも作れたりするわけです。
JavaScriptを使っていないということはJavaScriptフレームワークも使っていないということなので、React, Vue.js, Angular, Preact, Svelte, Alpine.js, Solid, Qwik, HTMXと一緒に使っても問題ないということです。
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
様々なデバイスやビューポートで優雅な間隔を提供するセマンティックなマークアップで、柔軟なカードを作成しましょう。
Cardコンポーネントは至ってシンプル、article要素を使用するだけです。
Nav
純粋なセマンティックHTMLの必須ナビバーコンポーネントです。
Navコンポーネントも至ってシンプル、nav要素を使用するだけです。
縦に積みたい場合はaside要素を外側に追加しましょう。
nav要素の中にはリストを追加できますし、リンクも追加できますし、ボタンも追加できますし、WAI-ARIAのaria-label="breadcrumb"でパンくずリストにすることもできますし、Dropdownメニューを作ることもでき、できることは無限大です（Living Standardの仕様の範囲で）
Outro
以上、いくつか紹介できなかったものもありますので、気になる方は公式ドキュメントを読んだり、以下サンプルを確認してみてください。
クラスレスバージョンはこちら。
Linktreeのようなリンクページや簡単なSPAであればこれだけで十分ですし、ホームページと呼ばれるウェブサイトやFormを使った読み書きできるアプリケーションでもしっかりと使うことができます！
ここまで書いて終わろうと思いましたが、少し前にLaravel 11でCRUDやったことを思い出したので実際にPico CSSを使ってみました。
Quick startで紹介したやつをコピペして色をオレンジにしてclassをいじってFormをGroupにした程度で少し雑ですが、3分ぐらいで簡単にPico CSSのデザインを実装することができました！
ではでは！！ ときめいたらぜひPico CSSを使ってみてください！
Happy Magic!
Ref
Discussion