HTMLを愛する人のためのUIライブラリ、シンプルなHTMLでさまざまなレイアウトやUIコンポーネントを実装 -Kelp
Post on:2025年9月4日
sponsorsr
シンプルなHTMLとモダンCSSを使用して、レイアウトやUIコンポーネントを実装するHTMLを愛する人のためのUIライブラリを紹介します。
手軽に実装できるように、classレスのHTMLにユーティリティとコンポーネント用のclassを組み合わせており、ブラウザネイティブのコンポーネントを使用して段階的にUIを強化します。
Kelpとは
KelpはモダンCSSとWebコンポーネントを搭載した、HTMLを愛する人のためのUIライブラリです。簡単にカスタマイズができ、ビルドなどは不要です。
Kelpの主な特徴は、下記の通り。
- 軽量のCSS
- classレスのHTMLとセマンティックユーティリティおよびコンポーネント用のCSSを組み合わせています。
- Webコンポーネント
- ブラウザネイティブのWebコンポーネントでUIを段階的に拡張しています。
- ビルドステップは不要
- CSS変数、カスケードレイヤー、HTML属性で自由にカスタマイズできます。
ライセンスはFair-codeで、オープンソースに似ていますが実用的になっています。個人や社内または非営利プロジェクトで無料で利用できます。収益が目的の場合はプロライセンスが必要となります。詳しくはライセンスページをご覧ください。
Kelpのデモ
Kelpでどんな感じに実装できるかは、デモページをご覧ください。
デモは、CodePenで公開されています。
See the Pen
Kelp Demo by coliss (@coliss)
onCodePen.
Kelpの使い方
Kelpは、ビルドの手順なしで動作します。
CSSの外部ファイルをHTMLに記述するだけでOKです。
1 | <linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/kelpui@0/css/kelp.css"> |
CDNはもっとも速く簡単な方法ですが、kelp.cssをGitHubからダウンロードして使用することもできます。
1 | <linkrel="stylesheet"href="./css/kelp.css"> |
Kelp はセマンティックバージョニングを採用しています。CDNから@1.2.3という構文でメジャーバージョン、マイナーバージョン、パッチバージョンを取得できます。利用可能なバージョンはGitHubで確認できます。
基本となるHTMLは、下記の通りです。
いたってシンプルなHTMLです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPEhtml> <htmllang="en-us"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Kelp</title> <metaname="description"content="The HTML-first UI library"> <linkrel="stylesheet"href="./css/kelp.css"> </head> <body> <mainclass="container"> <h1>Hi,Universe!</h1> </main> </body> <scripttype="module"src="./js/kelp.js"></script> </html> |
Kelpの詳しい実装方法は、ドキュメントが用意されています。
たとえばレイアウトのコンテナでは、.container-*クラスはコンテンツをページの中央に配置し、最大幅にします。いずれも幅は86vwで、自然なパディングが確保されています。-xs,-s,-m,-l,-xl,-2xlで最大幅を変更できます。
コンポーネントも豊富に用意されています。
タブをはじめ、アバター、バッジ、ダイアログ、見出しアンカー、モーダル、スケルトン、オフキャンバスのドロワーなど、コピペで実装できます。
便利なユーティリティも豊富です。.align-*クラスはCSS GridまたはFlexboxで使用でき、align-itemsプロパティを追加あるいは変更できます。ほかにもあらゆる要素の背景色を満たす.fill、リストのliなど子要素間に区切り線を与える.dividedなど、実用的なものばかりです。
sponsors
Related Posts
Recnet Entry
- 2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: カスタマイズ可能な新しいコンポーネント編
- Kindle本のクリスマスセールが開催！ 人気のデザイン書、タイポグラフィ、絵師さん向けのイラスト書などがお買い得です
- デザインにおいてクライアントからのヒアリングに注目した、これまでになかった実践的な解説書 -デザインはヒアリングからはじまる
- 2025年、日本語の新作フリーフォントのまとめ！ 今年も新しいフリーフォントがたくさんリリースされました
- ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
- モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック
- 2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイト「クラウド ダンサー」、HTMLのコードは「#F0EEE9」
- 色の美しい世界にときめいて、色の知識も深まる、かわいくて小さな極上本 -誰も知らない色の物語
Pickup Entry
- 2025年用、日本語のフリーフォント767種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
- ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
- 商用利用無料、国内のフリーイラスト素材の総まとめ
- 商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
- フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
- いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
- 2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」
- 色々な色の名前、伝統色の名前が分かるサイトのまとめ
- VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
- 最近の実装に合わせたHTMLテンプレート
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexbox の各プロパティの使い方を詳しく解説
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
- CSSの中央揃えで、最も万能で信頼できる実装テクニック
- 2025年、現在の環境に適したリセットCSSのまとめ
- 2024年版、CSSフレームワークのまとめ
- Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
- Font Awesome アイコンの使い方と便利な機能のまとめ
- Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
- 2025年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
- フォントやタイポグラフィの知識・テクニックを学ぶまとめ
- レスポンシブ対応のWordPressのテーマファイルのまとめ
- プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
- 写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
- 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
- 黄金比をサイトのデザインに取り入れる簡単な３つの方法
- フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
- 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
