CSSフレームワーク「AdminLTE 2」を使ってサンプル画面を作ってみた

CSS, 開発

おはようございます。

管理画面作成に特化したBootstrapベースの
CSSフレームワークとして人気がある「AdminLTE」を使って
試しに画面を作ってみたので晒します。

やってみると本当に簡単に色々な機能が組み込めるので、これはやっておいて損はないかと思いました。

それに1つでも触っておくと、
他にも色々とあるCSSフレームワークにもとっつきやすくなるかと思いますよ。

スポンサーリンク

AdminLTE2

ダウンロードサイト

公式のサンプル画面
公式のサンプル画面

公式サイトより翻訳して抜粋

AdminLTEは、管理ダッシュボードとコントロールパネル用の一般的なオープンソースWebAppテンプレートです。
これは、CSSフレームワークのBootstrap 3に基づいた応答性の高いHTMLテンプレートです。
デザイン内のすべてのブートストラップコンポーネントを使用し、多くの一般的に使用されるプラグインを再スタイルして、バックエンドアプリケーションのユーザーインターフェイスとして使用できる一貫したデザインを作成します。
AdminLTEはモジュラー設計に基づいており、簡単にカスタマイズして構築することができます。

どのサイトとは言えませんが、実際に商用で利用しているサイトも見かけたことがあります。

サンプル

とりあえず、色々とそぎ落としてみて、ヘッダーとサイドバーだけ表示。

サンプル1
サンプル1

sample.html

 

もう少し弄ってみる

コンテンツも、いくつか組み込んでみました。

サンプル2
サンプル2

チャートやデータテーブル、スクショには見えていませんがカレンダーなんかを組み込んでみました。

長くなってしまったので、プログラムが気になる方は GitHub から落として参照してください。
(これまたファイル数が大きいため固めてあげてあります)

GitHub

まとめ

簡単に管理画面が作れますし、
色々なプラグインも用意されているので普通に使えますね。

自分用にいくつかテンプレートを用意しておいて、用途によって使い分けられれば作業も捗りそうです。

気になった方はチェックしてみてください。

ではでは。

 

 

スポンサーリンク


関連するコンテンツ