• ログインログイン
  • 新規登録新規登録

MENU

Google App Engineで遊んでみよう! 第10回

連載Google App Engineで遊んでみよう!

GoogleAppEngineを使った開発レシピです。AWSやさくらインターネットのVPSやレンタルサーバなどの他の有名なクラウド環境と比べると少しクセがあるものの、慣れると非常に楽に開発やローンチができます。一定の範囲内まで無料で活用できるようになっているので、これを機会にぜひ活用してみましょう。

前回までのプログラミング学習コラムに続き10回目の勉強内容です。

こんにちは、ぴかしです。早いもので、最終回となりました。前回で、Kay Frameworkに関する解説がひと通り終わりました。今回は、Webデザインを簡単にするためのツールをいくつか紹介しようと思います。これらを用いて、Twitterクライアントをおしゃれに仕上げましょう!

CSSフレームワーク

CSSフレームワークは、汎用性の高いスタイルがあらかじめ定義されたもので、それを利用して簡単におしゃれなレイアウトを作成することができます。

有名なものとしては、Twitter Bootstrapがあります。前回作成したTwitterクライアントでも、これを用いています。Bootstrapではグリッドレイアウトが採用されており、複数のカラムへの分割が簡単にできるのが魅力です。また、StyleBootstrap.infoを用いて簡単に配色を変更することができたり、LightboxBootboxなどのjQueryプラグインを用いてBootstrapに便利な機能を追加することができます。

Twitter BootStrapは完成度の高いフレームワークなのでおすすめですが、定番すぎることもあり、「ああ、またBootstrapか…」と思われがちです。なので、Bootstrapを利用する場合は、多少アレンジして利用することをおすすめします。また、Bootstrap以外にも多くのCSSフレームワークがあるので、ぜひ自分のお気に入りを見つけて下さい。

Scss+Compass

Scssは、CSSのメタ言語です。Scssを利用すると、CSSで書くとどうしても冗長になりがちな部分をコンパクトに書くことができます。

例えば、以下のような(冗長だけどどうしようもない)CSSを、

.A .a {
 background:#ccc;
 color:#aaa;
}
.A .b {
 background:#ccc;
 color:#bbb;
}

ネストすることで、以下のようにとてもコンパクトに記述できます!

.A {
 background:#ccc;
 .a {
   color:#aaa;
 }
 .b {
   color:#bbb;
  }
}

これ以外にも、変数やミックスインが利用できたりと、Scssには多くのメリットがあります。 また、Compassは、Scss上のCSSフレームワークです。詳しい説明は省略しますが、ベンダープレフィックスのサポートをはじめとする、さらにCSSを低コストで記述するための多くの機能を提供しています。慣れるととても楽にCSSを書くことができるようになるので、ぜひ1度試してみて下さい。

配色

最後に、配色についてです。Webデザインを行う時に、配色で悩むことは多いと思います。配色1つでWebページのイメージが大きく変わりますし、センスがかなり問われる部分でもあります。

配色で悩んだ時は、Palettaを利用してみて下さい。以下のように、同系統で調和のとれた色を教えてくれ、配色選びを助けてくれます。

以上です!これらのツールを用いてWebデザインを楽しんで下さい。
今回で本コラムは終了です。これまで読んでいただいた方、ありがとうございました。本コラムを通して、GAEを用いて何かおもしろいものを作ってみよう!と少しでも感じていただければ光栄です。何か作ってみたよ!という方がいれば、ぜひぴかしまで教えて下さい。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top