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

2018年9月16日CSS, 開発

おはようございます。

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

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

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

スポンサーリンク

AdminLTE2

ダウンロードサイト

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

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

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

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

サンプル

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

サンプル1
サンプル1

header.html

 

sample.html

 

もう少し弄ってみる

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

サンプル2
サンプル2

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

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

GitHub

まとめ

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

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

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

ではでは。

 

 

スポンサーリンク


関連するコンテンツ

2018年9月16日CSS, 開発AdminLTE, Bootstrap, CSS, CSSフレームワーク

Posted by doradora