週刊Webテク通信

2011年9月第3週号1位は、LESS入門とSassとの比較、気になるネタは、GALAPAGOSは撤退しない。来年にも新モデルを発売

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年9月12日~9月18日の間に見つけた記事のベスト5です。

1. An Introduction To LESS, And Comparison To Sass - Smashing Codinghttp://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

LESSとSassとの比較と、LESSの入門記事です。

LESSもSassも、CSSを拡張するためのメタ言語と呼ばれるものです。色や値の指定に計算式が使えたり、複数個所で同じ記述を使いたい場合は変数のように定義できたりと、効率的かつ高度にCSSの記述ができるようになります。

メタ言語で書かれたものをCSSに変換する処理が必要となるのですが、LESSはJavaScriptを使ってクライアントサイドで実行されます。一方SassはRuby上で動作しサーバーサイドで処理されます。

ただし、どちらもローカルでコンパイルすることもできたり、いろいろな処理方法が用意されているようです。

この記事では、具体的なLESSの記述方法がいくつか紹介されています。コードを眺めるだけでも、どんなことが可能なのかが分かると思います。Twitterが提供するツールキット「Bootstrap」で使われたり、最近目にすることの多いLESSが気になるという人には丁度いい記事ですね。

LESSとSassの比較については、CSS拡張メタ言語「SCSS(Sass)」「LESS」の比較という記事も参考になると思います。

図1 LESS入門とSassとの比較
図1 LESS入門とSassとの比較

2. Laquu.JSでサイト制作・管理を楽に。http://laquu.com/

Laquu.JSは、HTMLコーディングの作業量を減らして、制作を楽にするためのjQueryプラグインです。

よく使われる機能をひとつにまとめることで、管理を楽にしています。

使える機能は、アコーディオン、ドロップダウン、イメージオーバー、タブ、ツールチップなど。ドキュメントなども日本語なので、安心して利用できそうです。

図2 よく使われる機能がまとまったjQueryプラグイン
図2 よく使われる機能がまとまったjQueryプラグイン

3. WordPressサイトをデザインする時に気をつけていること | Stocker.jp / diaryhttp://stocker.jp/diary/wordpress-site-design/

WordPressサイトのテーマをデザインする際に気をつけていることをまとめた記事で、WordPress関連のイベントでのセッションの内容をまとめたものだそうです。

WordPressに限らず、ブログデザイン全般においてもとても参考になる内容でした。

図3 ブログデザインの考え方と実践方法
図3 ブログデザインの考え方と実践方法

4. Illustrated Backgrounds in Web Design | Splashnologyhttp://www.splashnology.com/article/illustrated-backgrounds-in-web-design/2737/

イラストを背景に使ったWebデザインのギャラリーです。

ここに掲載されているサムネイルはページの一部だけで、実際のサイトではもっと大きなイラストだというケースも少なくありません。動きのあるページも多いので、サイトに訪れて見た方が楽しいですね。

図4 イラストを背景に使ったWebデザインのギャラリー
図4 イラストを背景に使ったWebデザインのギャラリー

5. 35 Inspiring Grid Based Web Design | AcrisDesignhttp://acrisdesign.com/2011/09/35-inspiring-grid-based-web-design/

グリッドベースのWebデザインのギャラリーです。グリッドを利用しているサイトは多いでしょうが、特にグリッドが目立つページが取り上げられているようです。

シンプルでミニマムな印象を与えるページが多いですね。

図5 グリッドベースのWebデザインのギャラリー
図5 グリッドベースのWebデザインのギャラリー

そのほか、先週の記事の中から、気になるサービスを紹介します。

先週の気になるWebサービス

snag.gy - paste images!http://snag.gy/

snag.gyは、ブラウザ上でペーストするだけで画像を共有できるサービスです。

ペースとした画像は、トリミングしたり、フリーハンドで何か書き加えたり、四角形や文字を追加することもできます。

たとえば、スクリーンキャプチャーを撮った後「このサイトにペースト→手書きで矢印を書き加える→テキストで解説文を追加→オンライン上で共有」といった流れがこのサービス中で完結してしまいます。

ローカルに一旦保存してアップロードする必要がないというところが、新しいですね。ファイルの扱いに不慣れでどこに保存したのか分からなくなるパソコン初心者が多いので、そういう人にも使いやすいサービスだと言えるでしょう。

図6 ペーストするだけの画像共有サービス
図6 ペーストするだけの画像共有サービス

おすすめ記事

記事・ニュース一覧