CSSフレームワーク inuit.css を紹介

inuit.cssという単語を耳にするようになって、まだそんなに時間は経っていないかもしれませんが、今回は「それが何なのか」「それで何が出来るのか」「誰の役に立つのか」「誰が使うべきなのか」などと言うことをここでまとめてみようかと思います。 inuit.cssはCSSのフレームワークです。けれどinuit.cssの場合はその一言では収まらない気がします。グリッドシステムでもないし、boilerplateでもありません。ましてやスタートポイントでもありません。inuit.cssはフル装備で守備範囲の広いフレームワークなのです。面倒な手作業の90%をカバーするようデザインされているため、WEB立ち上げの際にやらねばならない退屈な作業はinuit.cssに任せて、我々は楽しい部分に集中していればいいのです! この記事は、http://csswizardry.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 拡張性 inuit.cssはプラグインを持つ数少ないフレームワークです。そしてこのプラグインのことをinuit.cssではigloosと呼んでいます。 igloosは、もう既に充分機能的なフレームワークに、更に機能を追加拡張してくれます。例えばパンくずリストや、IE6のサポート、ドロップダウンメニューといった様々な機能の追加が可能です。 精力的なアップデート inuit.cssは、今の執筆時点(2011年6月)ではまだ御年たったの2か月です。なのに既にバージョンは1.0から2.5まで進化しています。フレームワークを改善、洗練、更に機能的にする為のアップデートが20回も行われています。 多くのフレームワークが停滞したりないがしろにされていく中で、inuit.cssは人々のニーズに対応すべく向上拡張する為に、コミュニティからのフィードバックを常に大切にしています。 プラグマティック(実用主義) inuit.cssは革新的な膨張システムを備えている、非常に実用主義なフレームワークです。万人受けするようにではなく、その環境に適用するパフォーマンスを優先しています。例えばIE7でもきちんと動作しますが、Firefox 4ならば尚更よく動作します。と言ったような・・・。inuit.cssはWEB開発に賢明なアプローチを取っています。 いつでもディベロッパーの心の友に! inuit.cssはディベロッパーが費やす時間、労力、メモリーの節約を念頭に置いています。フレームワークのほんの小さな側面が、ディベロッパーの作業を軽減することを唯一の目的として追加されました。.endクラスの呪縛からの解放(.endクラスを使ってグリッド行の最後のカラムからマージンを削除する方法)や.gridクラスの省略などは全てエンドユーザーの使い勝手を考慮して追加されました。 誰が使うべき? 素敵なデザインはあるけれど、あんまりメモ帳は好きではない方 素晴らしいアプリを作れるけれど、定められた時間内にその場で適当なCSSを得られないプログラマー ブラウザーテストの大半をお任せしたい人(inuit.cssはIE7以上と他の全てのブラウザでの動作を確認済みで、IE6をサポートするiglooもあります。) 速やかにラウンドプロジェクトを実行する必要があるけれど、品質に妥協はしたくない代理店の方(inuit.cssは色んな巧み技を持ってますよ。) CSS入門者で、真っ当なスタートポイントを求めている方 レスポンシブサイトの考え方が好きで、でもリサーチ用のリソースをまだ持っていない方 もしくは実装している方々 WEBサイト制作者ならどなたでも! もしinuit.cssを見て下さった方。もしくは既に使ってくださっている方!みなさんからいただくフィードバックは、今後の改善向上の為に非常に貴重なご意見となります。どうぞお気軽にTweetやコメントを残してくださいね。

WEB UI/ワイヤーフレーム50のお役立ちツール

今回は絶対に気に入っていただける、便利でしかも無料のWeb UIとワイヤーフレームを50個もご紹介したいと思います。Webデザイナーは、Webサイトであろうとソフトウエアであろうとユーザーインターフェースモデルを生成する為に、常にいくつかの基本的なユーザーインターフェイス用を必要としています。その為に、ユーザーインターフェースを複製するのに便利なワイヤーフレームやUIデザインキットも必要としています。 こちらのアーティクルではプロジェクトのLo-Fiイラストを作成する際に役立つであろう、Web用または携帯用のユーザーインターフェースキットを集めています。このコンパイルが気に入っていただけるとよいのですが・・・。何かご意見ご要望があれば是非お聞かせくださいね。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 【無料】Web UI+ワイヤーフレームキットまとめ Black UI Kit Alex PatrascuによってデザインされたPSD UIキットで勿論無料です。ファイルは完璧にレイヤー化されており、非常に使い勝手よく出来ています。Webサイトやアプリを作る際に必要な共通要素をうまく押さえています。 Lion UI Kit Lion UI Kitは最新OS Xの編集可能で完璧にレイヤー化されている要素を含んだ、手軽なPSDモックアップツールで、。 Small Blue UI Kit ブルーをポイント色に使ったコンパクトなUIキットで、リミットセレクター、トグル、ボタン、ローディングバーなどを備えています。 Simple To-Do List こちらの無料のPSDダウンロードは、とてもクリーンなデザインで編集も可能なシンプルTO-DOリストです。 Blaubarry UI Kit Blaubarry UI Kitはとても便利なボタン、スライダー、スクロールバーやフォーム要素を含んだUIキットです。シェイプレイヤーのサイズ変更や編集も容易に出来ます。 Minimalistic UI kit the color Google+ Google Plusはお好きですか?そのサービスが?それともインターフェースが?いや、ひょっとしたらそれ以外の何かでしょうか・・・。 Flex 3 Stencil こちらのステンシルセットはFlex3のスタイルガイドからパネル、データグリッド、ボタン、フィールド、リンク、トグル、データピッカー、ツールチップ、エラー、メニュー、スクロール、アコーディオン、タブ、リストなど全てのFlexコンポーネントを含んでいます。 Sleek UI Elements Webサイトを作るにせよ携帯アプリを作るにせよ、よくデザインされたUIエレメントはユーザーエクスペリエンスへの重要なカギとなります。こちらのPSDは近代的で洗練されたスタイルの有用なエレメントが多数含まれています。 GMUI SlixUI Slix UI controlsはWebデザイナーやアプリデザイナーの負担を軽減する為に作られたセットです。全体的にアプリ中心に作られていますが、勿論Web用に使っても支障をきたしません。インターフェースを構築する際に必要な項目の大部分を、きっと解決してくれると思いますよ。 Solid UI Kit こちらのキットはSixbaseのAlvin Thongさんによって作成された斬新なデザインです。ダウンロードにはよく整理され簡単に編集可能なPSDファイルが含まれています。 TRAK オープンソースのTRAK enterprise architecture frameworkを使用することにより生産される、アーキテクチャ記述のViewを有効化する定型のシェイプとコネクターを提供しています。 Simple UI element pack とてもシンプルなキットで、勿論無料です。是非ご利用ください♪ Eclipse GUI Design EclipseとMac OS X用のウィジェットです。 Interactive Sketching Notation 1.1 こちらのInteractive Sketching NotationはOmniGraffle用の最新のステンシルです。手書き風なのが特徴です。 Watchguard こちらは「.gstencil」に変換可能なVisioステンシルで、いくつかのウォッチガード、セキュリティアプライアンス/ファイアウォールオブジェクトが含まれています。 Web Sketch Cursors CSS3に準拠した、Web UXデザインのモックアップ用の手書き風カーソルです。デフォルト、クロスヘア、ポインタ、移動、テキスト、待ち時間、ヘルプ、動作中、不許可、垂直テキストや矢印等を含みます。 Wireframe Magnets こちらの「自分で作ろう♪」型マグネットテンプレートは、Konigi wireframe stencilsを基にしており、ホワイトボードのプロトタイプに適していそうな3枚の要素から成り立ちます。単純にダウンロードしてPDFファイルをマグネットシートに印刷し、切り取ってお使いください。もし水性マーカーなどを使用する場合は必要に応じてラミネート加工を施してください。 iOS Design Stencils for OmniGraffle iOS Design Stencilsは現在Githubで管理されているので、必要に応じてブックマークやリンクを更新してiPhone4用など最新バージョンをチェックしてみてください。 [adrotate block=”3″] Facebook Applications Facebookに関連した膨大なコレクションは、Facebookアプリケーションのワイヤーフレームを作成する際に役立つこと間違いなしです。 […]

CSSツール・ジェネレーター お役立ちツール

WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。 CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSツールとジェネレーター

ライトボックスで写真ギャラリーを表示させる

最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。 ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。 そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。 1. 必要なファイルをダウンロード なにはともあれ、必要なファイルをダウンロードしましょう。 うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。 FancyBox http://fancybox.net 2. 必要なファイルをページにリンクさせる 自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。 私と同じファイルの配置であれば、index.phpは以下の様にしてください。ファイルの配置を変えた場合は、自分のフィアルの配置に合わせて、リンクのパス(道)は変更してください。 3.一個のイメージだけをライトボックスで表示 最初に画像ファイルへのリンクを作り、a tag に class 若しくは id を指定する。 そして、以下の様にしてその a tag を fancybox で表示する様に指定するコードをhead内に入れる。 もっと写真のでかたなどをコントロールしたい場合は、オプションを指定してください。 4.アルバムのイメージをライトボックスで表示 アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、a tag の中に rel=”” 内にアルバム名を指定するだけです。 複数のアルバムがある場合でも、アルバム名を変えるだけになります。 もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。 5.インラインコンテンツをライトボックスで表示 インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、divなどの中にいれて、display:none を指定して、ページが表示されても見えないようにします。fancybox でリンク先をそのdivに指定しますと、fancyboxが勝手にdisplayを変更し、ライトボックスの中に表示してくれます。 これは、とっても簡単にできるにも関わらず、いろいろな所で使えるので便利です。User Experienceの向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。 6.ajaxコンテンツ をライトボックスで表示させる Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。 7.iFrameで別のサイトコンテンツ をライトボックスで表示させる iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe 是非、あなたの今のサイトに導入してみてください。

Zen Coding(ゼンコーディング)を使ってコードを3倍早く書く

HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。 ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。 これだけ聞いてもパッとこないと思いますので、早速見てましょうか。 1. ZEN Codingのインストール まずZEN Codingは、Google Codecよりダウンロードできますが、使っているエディタによっては、他のサイトよりダウンロードする必要があります。現在Zen Codingがサポートされているエディターとダウウロード先は以下をご覧ください。 私は、Codaを使ってますので、Tea for Coda をダウンロードして、ダブルクリックすると、CodaのPlugin のメニューにZen Coding が表示されます。 ショートカットが使いにかったので、System Preference -> KeyBoard -> Application Shortcuts を選んでから、Coda用のショートカットを少し変更しました。これで、Command + ; で展開されます。 オフィシャルにサポートしているエディタ 以下のエディタ用に作られたプラグインは、Zen Codingのチームメンバーによって作られていますので、最新の機能が使えることを保証しています。 Aptana/Eclipse (Mac/Windows) Zen Coding を Aptana/Eclipseへのインストール方法 TextMate (Mac). Text Mate用のZen Codingをダウンロード Coda (Mac) — 私はこのCodaを使っています。今回インストールする方法は、 TEA for Coda を使います。 Coda 用のZen Coding をダウンロード Espresso (Mac) — Espresso 用のZen Coding をダウンロード Komodo Edit/IDE (Mac / Windows) — Komodo 用のZen Coding をダウンロード Notepad++ (Windows). Notepad++ 用のZen Coding をダウンロード PSPad (Windows). Scripts > Zen Coding menu item PSPad 用のZen Coding をダウンロード アンオフィシャル プラグイン Zen Codingチーム以外の方々が作られています。すべて機能がサポートされていると言う保証はございません。 Dreamweaver (Windows, Mac) Dreamweaver 用のZen Coding をダウンロード Sublime Text (Windows) Sublime 用のZen Coding をダウンロード UltraEdit (Windows) UltraEdit 用のZen […]