Blogger のテーマ作成に用いる css フレームワークとして、Pico CSS を使ってみた。 軽量でミニマルな設計が魅力で Blogger との相性がよきだった。
## Pico CSS 最近の css フレームワークといえば、王者 Tailwind をはじめ、Bootstrap、Bulma、Beer...とクラスベースのものが多々ある。 細かいカスタムができ自由度も高く、イケてるサイトを作ることができる。
が、クラスが沢山あって覚えることも多く、コードも 'class =' 以降が長くて読むのが大変 (とくにTailwind)。 くわえて Blogger のテーマはフレームワークを CDN で読み込む都合上、ビルドもできないのでクラスユーティリティのものは重い！ そこで出会ったのが Pico CSS。
### リンク 公式ページ : https://picocss.com GitHub : https://github.com/picocss/pico ### 特徴 Pico CSS はセマンティックな html をベースに組み立てられた CSS フレームワーク。 クラスではなく html タグ (`<button>` や `<img>`) に対してスタイルが当てられており、タグを意味通り正しく使えば自然とイケてるデザインが出来上がる。
よって覚えるものはほとんどなく (基本的な html タグは理解しているものとする)、クラスを5個ぐらい覚えればもうマスターできる。 また、ミニマルな設計であるが故に一部分だけ凝ったことをしようとしたときにフレームワークと衝突しにくく、「なんか手書きの CSS いちいち !important 付けてるな...」となりにくい。
## 使ってみる 公式ドキュメント https://picocss.com/docs ### インポート link タグで CDN から持ってくるだけ。 ``` <link href='https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css' rel='stylesheet'/> ``` クラスレス版やアクセントカラー変更などの設定ができる(後述)。 もちろん npm からでも OK。
### タグ 先述のとおり、Pico は html タグを意味通りに配置していくとそれっぽくなる。 ...ので、Pico のことを学ぶよりは html タグのことを学ぶほうがてっとり早い。 自分の思った通りに行かないときや、ピンポイントで弄りたい部分が出てきたときに、Pico がそのタグにどんなクラスを当てているか確認すれば OK。
### クラス そうはいってもタグだけでは限界のある部分もあり、補完としていくつかクラスが用意されている。 これらのクラスが必要なく、軽くしたい場合はインポートの link タグの src をクラスレス版にするのが :+1:
#### container いろいろな CSS フレームワークにあるアレ。 画面の横幅に応じて、適宜コンテンツの横幅を絞ってくれる。 とりあえず `<main>` に当てておくのが堅い気がする。`<header>` と `<footer>` に当てるかはお好み。 クラスレス版の場合、 `<main>` `<header>` `<footer>` に自動的に当てられている。 ``` <body> <main class="container"> ... </main> </body> ```
#### grid 超シンプルな grid 機能がある。 正直 grid はもう少し頑張ってほしいところでもあるが、便利にしすぎると重くなるしごちゃつくので Pico の設計的にはこんなもんでいい気がする。 grid を使いたいならユーザーが各々普通に手書きすればいいし、どうしてもクラスでやりたいなら Tailwind とかを使えばよい。
grid クラスをつけた要素の子要素が均等に横に並ぶ (`minmax(0%, 1fr)`)。 横幅が 768px 未満なら横ではなく縦に並ぶ。 以上！シンプル！ ``` <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> ```
#### overflow-auto そのまんま `overflow: auto;` が当てられる。 以上！シンプル！ 公式ドキュメントには横長の `<table>` につけるといいよと書いてある。 ``` <div class="overflow-auto"> <table> ... </table> </div> ```
#### 色 Pico のカラーパレットを使用してテキスト等の色を変更できる。 カラーパレットのインポートをして使う。 ``` <link href='https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css' rel='stylesheet'/> ```
カラーパレット : https://picocss.com/docs/colors
``` <p class="pico-color-pink-500">Pink text</p> ```
Pink text
``` <i class="fa-brands fa-bluesky pico-color-blue-600"></i> ```#### secondary / contrast 色と似通った部分ではあるが、セカンダリカラー、コントラストカラーを利用できる。 ドキュメントの例ではリンクテキストに対して使用している。 ``` <a href="#">Primary</a> <a href="#" class="secondary">Secondary</a> <a href="#" class="contrast">Contrast</a> ```
### コンポーネント ボタンや表など、形式ができているもの。 ここらへんはドキュメントを読んだほうが早いので、割愛！
#### ボタン 色以外にも、outline クラスや、disable ステータスなどがある。 https://picocss.com/docs/button #### 表(table) striped クラスで、１行ごとに色が違うよくあるアレが作れる。 https://picocss.com/docs/table #### forms テキストのインプットやトグル系などインタラクティブな要素。 Pico にしては珍しくかなりモノが多いが、やはり Pico らしく１つ１つはシンプルなのでそこまで大変ではない。 https://picocss.com/docs/forms
## 感想 とにかくシンプルな設計で学習コストも低いが、ほかのフレームワークに全く引けを取らない素晴らしいフレームワークだった。 タグにバシバシとスタイルを当てていくので、マークダウンとの相性がいいのもよかった。 総じて、ブログやドキュメントなどテキストベースのコンテンツにマッチしたフレームワークだと感じた。
欠点としてはドキュメントがやや発展途上であること。 具体的なスタイルが載っていないので、開発者ツールや GitHub の生コードなどから読み解く必要がある。