マジセミドライブ

ウェビナー関連のニュースやITサービス&ツールの最新情報を随時配信します。

OSS情報

2020.01.01

【OSS情報アーカイブ】Pure

【OSS情報アーカイブ】Pure

※当記事に記載されている情報は、古くなっている場合があります。オフィシャルサイトで最新情報をご確認ください。

「Pure」とは

「Pure」基本情報

■概要

Pure(ピュア)とは、超軽量CSSフレームワークです。さまざまなWebプロジェクトで使用できる一連のCSSモジュールを提供します。

■基本説明

Pureは、Yahoo!が開発した軽量級CSSフレームワークで、汎用的に使用できるCSS設定をまとめてあるWeb開発用モジュール群です。

「軽量」「高速」「JavaScript不使用」「少ないCSS記述量」「既存サイトへ適用性が高い」などの特徴があります。

■ユースケース

Pureは、次のようなサイトに向いています。
・アクセスが激しい大規模サイト
・販促用サテライトサイト
・初動のレンダリング速度を重視したいサイト など

主な特徴

■簡単インストール

Pure.cssは簡単に導入できます。

同様のCSSフレームワーク「Bootstrap」などでは、「ファイル一式ダウンロード」→「index.html作成」→「CSSへのリンク行を記述」などの作業が必要です。

Pureの場合、作成しているHTMLファイルのヘッダエリアにlink属性として1行記述するだけで利用できます。

■UIコンポーネントスタイル

Pureでは、ネイティブHTML要素に加えて、一般的なUIコンポーネントのレイアウトとスタイルを利用できます。

デザイン上の細かい設定は各Webサイト開発者が行う前提となっており、最低限の設定のみ提供されています。

Pure由来のクラスは明確に区別されているため、他ツールや独自設定との組み合わせの管理を行いやすいメリットがあります。

■レスポンシブレイアウト

Pureは、Bootstrapと同様なレスポンシブレイアウト機能を提供します。

「グリッド」「メニュー」などを使用することで、すべての画面サイズに対して美しいレスポンスレイアウトを作成できます。

■スタイルオーバーライド

Pureは最小のスタイルのみを提供するため、簡単にオーバーライドして利用できます。

■スモールフットプリント

Pureの最小限フットプリントサイズは「4KB程度」しかありません。

モバイルデバイスでも軽快に動作できます。

■対応ブラウザ

Pureがサポートするブラウザは以下の通りです。
・IE 8+
・Firefox
・Chrome
・Safari
・iOS
・Android

外部連携

■Bootstrap連携

Pureは、「Bootstrap」や「jQuery」を含む他のライブラリと連携できる設計になっています。

開発者は、CSSフレームワークとしてPureを使用して、アプリケーションに必要な特定の「Bootstrap」や「jQueryモジュール」を組み込むことができます。

■「Google AMP」対応

Pureは、Googleの「AMP(Accelerated Mobile Pages)」に対応しています。

→Accelerated Mobile Pages Project – AMP

補足情報

■同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品:「Bootstrap」など。

■オフィシャルサイト

オフィシャルサイト

→Pure

ライセンス情報

Pureのライセンスは「Yahoo! Inc. BSDライセンス」です。

詳細について、こちらを参照ください。
→GitHub →pure/LICENSE.md

ダウンロード

→Pure →Get Started

 

参考元サイト

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

この記事のタグ一覧

おすすめの記事

【AIツール実験室】チャットAI対抗「添削能力」選手権🏆

AIツール実験室

2023.12.27

【AIツール実験室】チャットAI対抗「添削能力」選手権🏆

各チャットAIの「添削能力」について比較確認をしています。 「ChatGPT4と同等の添削能力を発揮した無料チャットAI」にご注目ください。 また、 ChatGPTカスタマイズ機能「GPTs」を利用して作成した GPTs文章添削機能「添削師匠さん✍️」を紹介しています。 課金勢は試しに使ってみてください。

AIツール関連 記事リストポータル

AIツール

2023.10.05

AIツール関連 記事リストポータル

AI 関連の記事をまとめたポータルページです。

【IT用語解説】「 デジタルヒューマン 」とは😊

IT用語解説

2024.01.26

【IT用語解説】「 デジタルヒューマン 」とは😊

【IT用語解説】「 デジタルヒューマン 」として、「デジタルヒューマンとは何か?」「どのようにして作成できるのか?」「私たちの世界にどのような影響を与えているのか?」などについて、まとめています。