こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
タブやフォーム、ボタンなど、各種コンポーネントのスタイルも用意されているレスポンシブWebデザイン対応のフレームワークのご紹介。SASSを使って構築しているそうです。レイアウトも数種用意済みです。 SASSで作られたフレームワークです。ほんと、この手のは沢山出てきますね。選択肢があるのはありがたいです。
デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応で柔軟性に富んだ可変グリッドのレイアウトをつくるのに便利なフレームワークを紹介します。 各エレメントのツラや高さの異なるパネルも簡単に揃えることができます。 Extra Strength Responsive Grids Extra Strength Responsive Grids -GitHub Extra Strength Responsive Gridsの特徴 Extra Strength Responsive Gridsのデモ Extra Strength Responsive Gridsの特徴 %ベースの可変グリッド デスクトップ・タブレット・スマフォなどのレスポンシブ対応 各エレメントのツラ揃えも簡単 グリッドのネストにも対応 使いやすいclass名 Sass対応 不揃いの高さも揃えます Extra Strengt
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
iPad, iPhoneのiOS6, iOS5、AndroidのJelly Bean, Ice Cream Sandwichなど、最新のスマートフォンやタブレットデバイスに対応したUI用のフレームワークを紹介します。 ChocolateChip-UI ver2.0 ChocolateChip-UI -GitHub ChocolateChip-UIはWAMLと呼ばれるマークアップ言語を使い、簡単にさまざまなUIエレメントを実装できます。 制作時は、Webkit系ブラウザ(Chrome, Safari)などのデスクトップ環境でもテストできます。 下記に、ChocolateChip-UIのデフォルトで用意されているUIエレメントをいくつか紹介します。 もちろん、デザインはカスタマイズできます。
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
この記事は賞味期限切れです。(更新から1年が経過しています) PHPでTwitterのAPIを利用する方法は何度かPEARのServices_Twitterと絡めて記事にした事がありましたが、 今回はもっと手軽に導入できるOpauthとtmhOAuthを紹介してみます。 認証はOpauthで Opauth – Multi-provider authentication framework for PHP Opauthは、様々なOAuth認証を一手に引き受けてくれる認証フレームワークです。 執筆時に公式に紹介されていた利用可能なサービスは、Twitter・Facebookなどを含め11件。 これらのサービスへの認証機能は「ストラテジー」という形で外部モジュールとして提供されます。 所謂ストラテジーパターンと呼ばれる物ですね。 その使い方は、認証のみにフォーカスしているライブラリなだけあって恐
Montageはモトローラ社製のHTML5 Webアプリケーションフレームワークです。 Webサイトに比べるとWebアプリケーションで求められる素養は多少異なります。アプリケーションゆえに予め決められたコンポーネントを組み合わせて作る方が一般的です。そこで紹介したいのはMontage、モトローラ社製のHTML5 Webアプリケーションフレームワークです。 デモのKitchen Sinkです。 ボタンです。デザインはすっきりとして見やすいです。 こちらは時刻を表示するデモ。 クリックで削除するタグのデモ。 Todoアプリのデモ。 Fiddleを使って試す事もできます。 画像からカラーピッカーするデモ。 計算機のデモ。 Montageには多数のコンポーネントが用意され、それらを埋め込む形で配置してけば画面が出来上がります。カレンダーやレンジ入力、トグルボタンなど様々な入力コンポーネントが用意さ
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy [ad#ad-2] Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。 Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iPhone (Retina) Droid (Charge/Original) iPad あらかじめセットされているMedia Queriesのブレイクポイントは6つで
大変お待たせしました。FuelPHP の入門書 『はじめてのフレームワークとしての FuelPHP』 がついに7月2日に発売されることになりました。待った甲斐があったと思われるような完成度の高い書籍に仕上がりました。 この本は、以下のようなことが当てはまる人に自信を持ってお薦めします。 FuelPHP に興味があるが、Web の情報は断片的で、しかも正確なものかどうかもよくわからなくて困る FuelPHP の全体像や考え方を手っ取り早く知りたい また、以下のようなことが当てはまる人にも是非お読みいただきたいです。 PHP は使ってるけど、フレームワークって何?Smarty とどう違うの?まだ使ったことがないので知りたい PHP 使ってるけど、どうにもレガシーでこの会社大丈夫か?と疑問を感じる 使ってるフレームワークがオレオレフレームワークでしかも実装がイケてない。あと、他人がメンテできず困
個人的に、Rails界隈でよくチェックしているサイトをまとめておきます。 プラグイン The Ruby Toolbox プラグインの情報を探す時は、大概ココから入ります。プラグインに関するドキュメント、スクリーンキャスト、ブログエントリー等を、皆でプラグインに紐付けられるようになっているので便利です。また、そのプラグインがどのくらい人気があるのか視覚的に分かるようになっているので、最近急に人気が出ているプラグインとか発見出来たりします。単純にブラブラと徘徊していても楽しいサイトです。 技術情報/チュートリアル Ruby5 海外の有名な企業Envy Labsが情報を掲載しているサイトです。主に、RubyやRails界隈の最新情報、トピックス等を1週間置きくらいに更新しています。 Coding Edge @ITで取り上げられているカテゴリ。情報量は少なめです。 Ruby on Rails Tu
1. Herokuで作るDevise 認証サイト 2012.5.29 【第2回】渋谷Railsだったり勉強会 @iR3 iRubySystems 福井修 2. 福井修 自己紹介 Twitter:iR3 Facebook:fukui.osamu Ruby大好き中年です。 1977/4より日立大みか工場で、鉄鋼向けプラント制御 システム構築に従事。以後様々なシステム構築36年。 2001/5 初RubyはRuby1.4 2002/11 より関西でRubyの集まりを立上→ Ruby@関西 2009/4 iRubySystems設立。 販売管理、在庫管理システ ムなど構築中。http://irubysystems.com 最近は sendagaya.rb に出没中。 2
Meteorとは? Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境(MacOS Xを含む)でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています(公式サイトには、「1日か2日でプロトタイプを、2~3週間で製品レベルのアプリを構築できるようにする」とあります)。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
シンプルでベーシックなレスポンシブ Webデザイン対応のCSSフレームワーク をご紹介。シンプルなのでフレーム ワークとしてとても使いやすいイメージ でした。これはこれで覚えておくと いいかも。 シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。 2~4カラムのグリッドや、2カラム構成のベーシックなレイアウトで、メインカラム内での4カラムにも対応しています。 CSSはリセットが1KB、Media Queriesと一般レイアウト用CSSの3KB。ブレークポイントは480pxと940pxが用意されています。 スクリーンショット iPhoneでのスクショです。 ChromeエクステンションのIETabでIE7の表示を確認しましたが問題はありませんでした。 とにかくシンプルなのが気に入りました。多少の手入れは必要ですが、細かい部分は個人によって好みが分かれますのでフレームワークと
こんにちわ。エンジニアの坂本 一樹(@splhack)です。 ユニティとグリーの関係性をアピール ― 「Unity at GREE」が示すソーシャルゲームの未来 「ユニティ アジア・ブートキャンプ・ツアー:東京」でもグリーは12日、講演「Unity at GREE」を行い、蜜月ぶりをアピールしました。(略) このうち後者2つについてはオープンソースで公開予定とされ、会場から拍手を浴びていました。 というわけで、前回に続きまして、セッションでの予告通り、Unity用ソフトウェアコンポーネントをオープンソースライセンスにて公開させていただきます! https://github.com/gree/unity-webview このunity-webviewは、高橋啓治郎さんのunity-webview-integrationを元に作成しています(github上でforkしてない理由は、ほぼ跡形ない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く