[Webサンプルテンプレート] 管理画面サンプル # 汎用的デザイン

2023年5月15日

CSS HTML Javascript テンプレート

eyecatch サンプルシリーズの管理画面編です。 いろいろなシステム構築をする機会も多いので、管理画面をコピペで作れるように、githubにアップしてみました。 雛形として作っておくと、後々便利に使えることでしょう。 今後デザインパターンなども増やしていく予定なので、今回はかなり汎用的に使えるスタンダードデザインパターンを作ってみました。 もちろん、レスポンシブ対応です。

機能説明

ヘッダエリアのメニューとサイドメニューの2種類が表示できる、標準的な管理画面が構築できます。

Responsive機能

次のブレイクポイントで作成しています。
- 1000px以上 : PC画ビュー - 500px ~ 1000px : ミドルビュー(tablet) - 500px以下 : スマホビュー

Badge機能

リストやアイコンなどの要素エリアに、data-badge='数値'を属性挿入すると、その項目の左上に赤丸のバッジが表示されます。 ※数値はバッジナンバーに反映されます。

メニュー機能

ヘッダメニュー : アイコン表示のみ サイドメニュー : アイコン + 文字表示

ハンバーガーメニュー機能

スマホビューのサイドメニューが、左からスライドインします。

フッタ機能

サイドメニューまたは、画面最下部に表示されます。

githubリンク

https://github.com/yugeta/admin_panel_designs 対象ブランチ : 001 このブランチのみcloneするコマンド $ git clone https://github.com/yugeta/admin_panel_designs.git -b 001

あとがき

今回の管理画面ソースは、MITです。 お好きなだけコピーして改良して、思う存分使ってくださいませ。 「こんなんあったらいいな」も合わせて募集していますので、お気軽にお問い合わせください。 随時、機能追加やデザイン改修を行っていく予定なので、Githubでのアップデートを確認してみてください。 プルリクもお待ちしています。 別デザインの追加も予定しているので、その場合はこのブログでお知らせしたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。