Pure.cssとはYahoo!によって開発されたWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。モバイルファーストなマイクロフレームワークでありCSSフレームワークの中でも指折りのハイパフォーマンスな動作を提供しています。この記事ではPure.cssを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説をしていきます。
Pure.cssとはYahoo!によって開発されたWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。マイクロフレームワークとして最低限の機能だけで構成されております。モバイルファーストで開発されたため、ファイルサイズを小さく保つことを最重要事項としたようです。そのファイルサイズは全てのモジュールやコンポーネントを入れても3.7KBぼどしかありません。軽量でシンプルなCSSフレームワークを好む方におすすめです。また大きくアクセスを抱える大規模サイトへの用途でも力を発揮するでしょう。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets(カスケーディング・スタイル・シート)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。
フロントエンドとはWebサービス利用者の目に触れる部分を表します。よってフロントエンドとはWebサービスの利用者が目に触れる部分のシステムを開発することです。フロントエンドの開発を行うエンジニアを『フロントエンドエンジニア』と呼びます。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアが習得するべき最低限の技術について解説している記事はこちら>>
Pure.cssの読み方は『ピュアードットシーエスエス』です。Pure.cssの名前の由来は調査をしたところ出てきませんでした。英単語としてのPure.cssの意味には「純粋」「まじりけのない」などが挙げられます。マイクロフレームワークとして余計な機能を保持しないPure.cssは純粋でまじりけのないフレームワークという意味が込められている可能性が高いです。
Pure.cssの特徴を見ていきましょう。
Pure.cssはモバイルファーストという特徴があります。モバイルファーストにおける重要事項としてページ表示スピードが挙げられます。ページ表示スピード最適化を実現するために最小限のCSSフレームワークであることを目指しまして開発されました。
Pure.cssはファイルサイズが非常に軽量という特徴があります。マイクロフレームワークとして軽量かつシンプルであることを最大の特徴とし人気を集めております。
Pure.cssはJavaScriptを不使用という特徴があります。コンポーネントはWebページで使用される一般的なUIコンポーネントをCSSのみで実装しています。Pure.cssは同じくCSSフレームワークである「Bluma」と同様にCSSファイルをWebページに組み込むだけで手軽にそして早く使えます。
JavaScriptのメリット・デメリットを解説している記事はこちら>>
Pure.css以外のCSSフレームワークを見ていきましょう。
BootstrapとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。Twitter社が2011年に開発し、フロントエンドフレームワークの中でも最も人気を集めております。BootstrapではWebページの基本機能として使用される「メニュー」「ボタン」「フォーム」などのパーツをテンプレートで用意しております。見た目を調整するCSSファイルや動きをつけるJavascriptファイルが既に作成されており、それらの定義を呼び出すだけでデザインやUIの知識がなくとも、動きのあるリッチなWebサイトを素早く簡単に制作することができます。
MaterializeとはGoogleが提唱するマテリアルデザインに基づくWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。ユーザーエクスペリエンス重視しマテリアルデザインの要素と原則を利用することで、ユーザーにより多くのフィードバックを提供するコンポーネントとアニメーションを組み込んだフレームワークを実現しております。
同じCSSフレームワークの中でも最も人気を集める「Bootstrap」と見た目も操作方法も似ているのでBootstrapの使用経験がある方は簡単に使いこなせます。デザイン性が高いだけでなくアニメーションやトランジションも兼ね備えており多くのユーザーから人気を集めております。
FoundationとはZURB社によって開発されたWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。「フロントエンドコードをより速く、より良く開発する」といった目的の元に誕生しました。数あるCSSフレームワークの中でも高い人気を集めており「Bootstrap」に次ぐほどと言われております。
人気の理由としてカスタマイズ性が高くデザインが大幅に高速化できるということが挙げられます。またどのデバイスでも見栄えのする美しい応答性の高いWebサイト、アプリ、電子メールなどを簡単に設計できます。信頼できる実績として「Facebook」「Yahoo!」などの世界的な有名企業もFoundationを利用しております。
Pure.cssを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。Pure.cssを一言で表すと『Yahoo!によって開発されたモバイルファーストなCSSマイクロフレームワーク』です。特徴として「ファイルサイズが非常に軽量」「JavaScript不使用」などが挙げられます。Pure.cssについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。