[今日の作業] 2012.11.13 iPhoneアプリの紹介ページを作りたい:Sassについて

iPhoneアプリの紹介ページを作りたい

WordPressをカスタマイズして作るか、Facebookのページで作成できたらいいな。
Twitterアカウントではアプリの紹介をするところではない。ユーザーサポートに使うのはOKぽいけど。

Lingrで話していたら、@machidaさんから出てきたSassというキーワードが気になったので調べてみました。

出てきたキーワード:

  • Sass:syntactically awesome stylesheets. extension of CSS3. Sassはnew main syntax(SCSS)と(oldな)the indented syntaxからなる。Sassで書くと、コマンドラインツールやweb-framework pluginでwell-formattedな標準CSSを吐き出したりできる。
  • SCSS:Sassy CSS. CSS3 syntaxの上位集合。validなCSS3 stylesheetはvalidなSCSSである。
  • Compass:CSS Authoring framework
  • Sinatra:Rubyの軽量framework
  • WordPress:ブログシステム
  • Lokka:CMS/Blog。Heroku上で動く。Sass+Compassが組み込まれている

Facebookのページについて

  • デザイン的には自由度が低くてつまらないかもしれない
  • FBのページはCSSは埋め込み
  • ユーザーサポートもできそう
  • likeしてもらうことでpromoteできるし、wallに書けばNotificationも表示されるっぽい

SassのGUIツール

Sassで書いて、CSSを出力し、wordpressなどの標準でCSSしかサポートしていない環境で使えるようにできる。

  • SCOUT
  • Fire.app
  • CodeKit

その他の役に立つ資料

sassとは何から、sassのsyntaxの解説+CodeKitの簡単な紹介。簡潔で分かりやすい:

An Introduction to Sassy CSS
https://speakerdeck.com/irishstu/an-introduction-to-sassy-css

Heroku + Lokkaの資料。これも実用的で分かりやすい:

Heroku-ja Meetup #1でLokkaのLTをさせていただきました
http://fjord.jp/love/841.html

明日以降

技術的な方向に走り過ぎそうなので、ちょっと落ち着いてまねしたいサイトを見つけて、デザインをしてみる。それでSassでCSSを作ってみてサイトに適用するという方法を辿ってみたい。

Advertisements

One thought on “[今日の作業] 2012.11.13 iPhoneアプリの紹介ページを作りたい:Sassについて

  1. Pingback: デザイン修行:インターンブログデザイン仮を公開する(未達) | Web Design Internship at fjörd.jp

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s