週刊Webテク通信

2013年12月第4週号1位は、CSSが難しい言語な5つの理由、気になるネタは、三省堂国語辞典に「w」「笑うことをあらわす文字」して掲載

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

1. 5 Reasons Why CSS Could Be The Hardest Language Of Allhttp://www.hongkiat.com/blog/css-is-the-hardest-language/

CSSが難しい言語な理由を5つ挙げています。

  1. エラーレポートが出ない
  2. 変数がない
  3. ブラウザ毎の互換性が悪い
  4. CSSの特殊性
  5. CSS vs あなたのクライアント

4はCSSの優先順位についてですが、CSSのCのCascading(階段状、段階的)な部分であり、たしかに混乱しがちですがメリットもあるのだと思います。

2や3、5については、LESSやSassなどのCSSプリプロセッサを利用することで、ある程度改良できることですね。

図1 CSSが難しい言語な5つの理由
図1 CSSが難しい言語な5つの理由

2. Why negative is positive in web design | Webdesigner Depothttp://www.webdesignerdepot.com/2013/12/why-negative-is-positive-in-web-design/

Webデザインにおいてのネガティブスペース(ホワイトスペース)の重要性を説明した記事です。

小さな要素の周りの余白のことを「Micro negative space⁠⁠、ヘッダやフッタのような大きな要素の間の余白のことを「Macro negative space」と呼んで、それぞれについて解説しています。

図2 Webデザインにおいてのネガティブスペースの重要性
図2 Webデザインにおいてのネガティブスペースの重要性

3. 25 CSS3 Tutorials for Web Designers in 2013 - Bloom Web Designhttp://bloomwebdesign.net/2013/12/best-css3-tutorials-web-designers-2013/

2013年に公開されたCSSのチュートリアルを多数紹介した記事です。

CSS3を利用した、ちょっとした動きのあるインターフェイスの作り方などが掲載されています。

図3 2013年に公開されたCSSのチュートリアル
図3 2013年に公開されたCSSのチュートリアル

4. 50 Best Portfolio Websites of 2013http://www.9kdesigns.com/inspiration/50-best-portfolio-websites-2013

2013年の優れたポートフォリオサイトを紹介しています。

大きな画像、大きなタイポグラフィ、フラットデザインなど、最近のトレンドが詰まっている感じですね。

図4 2013年の優れたポートフォリオサイトいろいろ
図4 2013年の優れたポートフォリオサイトいろいろ

5. 30 Grey & Silver Website Layouts for Design Inspiration | SpyreStudioshttp://spyrestudios.com/30-grey-silver-website-layouts/

グレーやシルバーベースのWebデザインを多数紹介しています。

堅さや強さを感じさせるというグレーやシルバーですが、取り上げられているサイトは洗練された印象を与えるものばかりでした。

図5 グレーやシルバーベースのWebデザインのギャラリー
図5 グレーやシルバーベースのWebデザインのギャラリー

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

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

10 Image Compressors For Speeding Up Your Websitehttp://templatesledger.com/10-image-compressors-speeding-website/

今回は、画像圧縮のための便利なサービス、ツールが取り上げられた記事を紹介します。

実用性重視なのかあっさりしたサイトが多いですが、JPEGminiはデザインやインターフェイスが作り込まれています。有料のサービスでデスクトップアプリもあるので、本気度が違うのでしょう。

画質の劣化はあるもののなるべくキレイに圧縮するものと、画質の劣化なく圧縮するタイプのものとがあります。画像のリサイズも同時に行えるものもありました。

ちなみに、Smush.itというサービスは、米Yahoo!が提供しているツールでした。

図6 画像圧縮のための便利なサービスやツール
図6 画像圧縮のための便利なサービスやツール

おすすめ記事

記事・ニュース一覧