DesignホームデザインjavascriptアーカイブRSS読み終えた書籍はこちら(知り合いの方にはお譲りすることも可能です。)来年春の引っ越しに向けて、自宅に大量にある本を整理しています。以下の本の中で、欲しいものがある“知り合いの方”は、メール、やtwitter、facebookなどを通じて連絡してください。以下に未掲載の物もまだまだたくさんあります。随時挙げていきますので楽しみにしていてください。書籍「デザインの骨格」を読んだ。Tweet山中俊治さんのデザインの骨格を読みました。SFC学生時代から、山中教授の作品はもちろん、デザインに取り組む姿を見る機会はあったけれど、ちゃんと書籍を読んでみて、自分に刺激となる言葉をたくさん見つけることができました。新しくプロダクトをデザインするときに、私は製品の構造を考えることから始めます。...工業製品に贅肉がつくことはあまりないので、製品のプロポーションはほとんど骨格で決まります。骨格という言葉に込められた意味を、この書籍の様々な所から感じることができました。骨格とデザインという言葉は、少し奇抜な組み合わせだと思ってました。骨格は英語でフレームであるということを考えると、デザインだけではなく、物事を考える上でよく使われる言葉だなと気づきました。一つ一つの出来事で骨格を意識して取り組むように心掛けようと思います。3日dribbbleのRSSを使ってサイトを作った。TweetdribbbleのRSSを使って、ギャラリーサイトを作りました。レスポンシブデザインに挑戦するのが目的だったので、様々なデバイスに合わせてレイアウトなどを変えるのが特徴です。レスポンシブデザイン2012年5月19日RECESSで煩雑なCSSを一瞬で奇麗に仕上げる。Tweetこの1週間、サイト制作のためにCSSをコーディングしていました。業務では共同作業によるCSSコーディングもあると思うので、やはり奇麗に書くという意識を持つことが大切です。一方で、期限が迫っていたり、スピードが求められてくると、最終的に煩雑なものになってしまいます。今回FIXしたCSSも、あまり人に見せたくない煩雑なものになってしまいました。奇麗なCSSとは何か?そもそも、奇麗なCSSの条件とは何か、改めて整理しなくてはいけません。Guide」(※リンク先は和訳された方のサイト)という、コーディングガイドラインがあります。そこでは、IDとクラス名にはちゃんと意味の分かる名前を使う要素の目的や役割を反映した名前を付ける。意味の分かる範囲でできるだけ短いIDとクラス名を使う。IDとクラス名にタイプセレクタは記述しない。{}可能な限りショートハンドでプロパティを書く。serif;のように、1回でまとめてプロパティを書くIDやクラス名の別々の単語はハイフンで繋ぐ。IDやクラス名には固有の接頭辞を付ける。{}すべてのプロパティ名の終端にはコロンの後にスペースを入れること。none;など、細かなコーディングのルールが定められています。奇麗なCSSとは、他のプログラミング言語と同様に、保守性の高さ・パフォーマンス・動作の正確さ・無駄な部分の排除といった要素が満たされているものみたいです。加えて、一貫したルールを持たせて記述することが大切ということも、このガイドラインから感じることができます。個人で奇麗なCSSの定義をすることもできますが、GoogleやFacebook、Twitterなどのガイドラインを見習うことがスマートだと思います。欲を言えば、そのルールがなぜそのように決められているのか理解することが大切だと思います。奇麗なCSSを書くためのルールは理解しても、それに縛られるが故にコーディングのスピードが下がってしまうと思います。Twitter社が公開しているツール『RECESS』は、作成した煩雑なCSSを奇麗なCSSに再出力してくれるツールです。コンパイル前とコンパイル後|クリックして拡大このツールを使って指定したCSSをコンパイルすると、画像のようにプロパティの順番が規則通りになったり、コードの可視性が向上します。間違っている部分を丁寧に指摘してくれるまた、命名規則やプロパティの順番が間違っている場合など(画像の場合は、#goToTopを#go_to_topにしなくてはならない)に、警告を出してくれます。最終的に瞬時にコードを整形してくれるツールがあると、スピードを落とさずに質の高いものを実現できるので大変心強いです。RECESSでは、適さない命名などのチェックもしてくれるので、チェッカーとして用いることもできます。RECESSのインストールRECESSを使うために、node.jsとnpmをインストールする必要があります。昔は、両方とも別々にターミナルでコマンドを打ってインストールしなくてはなりませんでしたが、現在はnode.jsの公式ページにインストーラがあるので、自分のOSを選択してダウンロードすれば簡単にインストールできます。npmも同時にインストールされるので、RECESSをインストールするための環境構築は一瞬でできると思います。RECESSのインストールをします。ターミナルなどで、以下を実行します。上記画像のようになれば、インストール完了です。RECESSを使ってみる早速RECESSを使って、煩雑なCSSを奇麗にしてもらいます。プロジェクトフォルダへのパスrecessコマンドと共に、コンパイルさせたいcssのパスと出力させたいcssの名前を指定します。出力cssファイルRECESSを用いてCSSをコンパイルこれで、指定したファイル名で奇麗になったCSSファイルが出力されます。出力はさせずに、CSSのチェックを行うときはシンプルに以下を実行します。チェックしたいCSSファイルRECESSを用いてCSSをチェックCSSファイル名の適さない部分を色々と指摘してくれます。最後にRECESSのgithubページを見ると、その他の使い方も記されています。RECESSは、lessのコンパイラとしての機能を持っているので、less愛好家の人は今回紹介した以外にもメリットを教授できると思います。RECESSのおかげで、なんとか人に見せても恥ずかしくないCSSが作れそうです。次の3件»HAKASHUNはこれを読んで勉強しました。書籍「デザインの骨格」を読んだ。dribbbleのRSSを使ってサイトを作った。RECESSで煩雑なCSSを一瞬で奇麗に仕上げる。lessを使ってみて[前編]社内研修を終えて。lessを使い始めました。(CSS拡張メタ言語)Heroku上にredmine(1.2.1)を構築してみた。AGESTOCK2011を見てきました。