管理画面について考えてみた

いままでウェブページの管理画面を作る際は横幅1000pxくらいの枠の中に収まる程度で情報を表示するようにしてましたが、最近になってリキッドレイアウトで管理画面を作るようになってきました。

途中からの仕様変更でどうしても横幅1000pxでは収まらないページも出てくる場合もあるので、左カラムは200px固定で右カラムは可変にしておいた方がいろいろ捗るなぁと今更にして思ってきたわけで。

(´・ω・`)

オープンソースの管理画面テンプレートのメモ

管理画面用テンプレートはとりあえず目をつけてメモしておく。
それが自分のジャスティス。

Bootstrapベースの管理画面用テンプレート「Charisma」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ
http://www.moongift.jp/2013/08/20130806-3/

Free HTML5 Bootstrap Admin Template
http://usman.it/themes/charisma/

WEB制作頻出用語辞典(デザイナー編)が面白い

これ見て、いくつかは

「あぁあぁ、あるある・・・・・・・

死ねっ!
(思い当たるフシ有り)

そしてっ、死ねっ!
(こないだも言われた気がして)」

ってなりました(´・ω・`)

特に勘弁いただきたいのが
「なんか違うんだよなぁ。」のワードです。

「ここが違う」なら全く問題無いです。
直します。

指示側の伝達ミスでも、作り手側の聞き取りミスでもどちらでも気にしません。
直します。

だが「なんか違う」、テメーは駄目だ。

私の周りだけかもしれませんが、「なんか違う」の後に「どこどこのサイトを良く見て、それと近い雰囲気を出せ。参考元の良い所だけ抽出してよ。」とよく続きます。

参考元、良く見たよ!
むしろ参考にしたところを「これは違う」で片付けないで!

人と人とは感性が違うんだから、具体的な要望出してYO!

・゚・(つД`)・゚・

ってなります。
さっぱり分からない場合はレイアウトを手書きで書いてもらったりしてます。

display:tableとdisplay:table-cell、確かに便利

スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利! | Kana-Lier カナリエ
http://kana-lier.com/css/smartphone_css/

http://kana-lier.com/css/smartphone_css/

こんなものがあったのかー、と思って試しにdisplay:tableを使ってみたら
思いの外便利でワロタ。

今まではjQueryMobileで横並びのメニューを作ってたけど、こっちの方が楽でいいですね。
もっと早く知っておきたかった。

spin.jsをいじってみた。

spin.js
http://fgnass.github.com/spin.js/

画像も外部CSSも不要で、その上jQueryに依存せずにローディングアニメーションを表示することができるspin.jsというのもをいじってみました。

ギャラリーサイトにこのspin.jsを設置してほしい」と言われ「え?普通にgif画像じゃあかんのですのん?」と思いつついじる流れになっただけですので、個人的にはやはりgif画像でローディングを表示してもいいのでは、と思ったり。

とはいえ、色とかサイズとか細かい設定をスクリプト上ですぐ変更できるというのは楽でいいですね。

以下、設置したソースのメモ。
 

続きを読む

CSSの背景グラデーションを簡単に作れるサイトがあったんですね

CSS Gradient Background Maker
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

CSS Gradient Background Maker

ドメインがmicrosoft.comだからIEのある程度のバージョンもカバーできるようなコードなんかなぁ。
そこまで細かく確認はしてないけど、グラデーションが簡単に作れるのはとりあえず便利ですね。