週刊Webテク通信

2014年4月第4週号1位は、CSSのあまり知られていない事実、気になるネタは、Apple TVに対抗する99ドルのストリーミングデバイスAmazon Fire TV

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

1. 12 Little-Known CSS Factshttp://www.sitepoint.com/12-little-known-css-facts/

CSSに関してあまり知られていない事実をまとめています。

  1. colorはテキストのためだけじゃない
  2. visibilityの値にcollapseが使える
  3. backgroundのショートハンドの書き方に追加されたものがある
  4. clipはAbsolutelyで配置されている要素にしか効かない
  5. 垂直方法の%指定は、領域の高さではなく幅に影響を受ける
  6. borderの値一つ一つがショートハンドで記述できる
  7. text-decorationもショートハンドで記述できる
  8. border-widthの値はキーワードでも記述できる
  9. border-imageは誰も使わない
  10. empty-cellsというプロパティがある
  11. font-styleにobliqueと指定できる
  12. word-wrapはoverflow-wrapと同じ

知らなくても困らない内容が多い気もしますが、なるほどと思わされるものばかりでした。

図1 CSSのあまり知られていない事実

※指定画像がありません※

2. 6 Reasons to Go for Responsive Web Design in 2014 | TheNeoDesign.comhttp://theneodesign.com/responsive-web-design-tips/

レスポンシブWebデザインを使う理由を、デザイン以外の観点から解説しています。

  • Googleが強く勧めている
  • アクセシビリティがよい
  • SEO的に望ましい
  • 直帰率を最小にできる
  • メンテナンスが楽
  • ビジネスを後押しする

ちょっと都合のいいことばかりな気もしますが、フラットデザインを推奨したい場合の理由付けに使えそうです。

図2 レスポンシブWebデザインを使う理由

※指定画像がありません※

3. 15 Awesome Examples of Flat Mobile UI Designs | OmahPSDhttp://omahpsd.com/2014/04/flat-mobile-ui-designs-inspiration/

モバイルアプリでのフラットなUIデザインの実例をまとめています。

この記事で掲載されている作品のリンクから見つけたのですが、App Design ServedというBehanceが運営するアプリのデザインだけを集めたギャラリーサイトがあるんですね。

図3 モバイルアプリでのフラットなUIデザイン集

※指定画像がありません※

4. Creative One Page Website Designs | Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2014/04/18/creative-one-page-website-designs.html

クリエイティブな1ページ完結型サイトを多数紹介しています。

A visual history of computers」というコンピューターの歴史を年代毎に振り返るサイトが、ネタ的になかなか面白かったです。

図4 クリエイティブな1ページ完結型サイトいろいろ

※指定画像がありません※

5. Fullscreen New Trend in Web Design Industry | Website Designing | Design Bloghttp://blog.karachicorner.com/2014/04/fullscreen-new-trend-in-web-design-industry/

フルスクリーンのWebデザインのギャラリーです。

4で取り上げた記事と同様、1ページ完結型のサイトがほとんどでした。

図5 フルスクリーンのWebデザインのギャラリー

※指定画像がありません※

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

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

After Editorially: The Search For Alternative Collaborative Online Writing Tools | Smashing Magazinehttp://www.smashingmagazine.com/2014/04/17/after-editorially-alternative-collaborative-online-writing-tools/

今回は、オンラインでコラボレーションできる文章編集ツールをまとめた記事を紹介します。

文章編集ツールとして以下の要素を考慮しつつ、いくつかのツールを紹介しています。

  • 気を散らせる要素がない
  • マークダウンに対応
  • 注釈機能とディスカッション機能
  • 履歴管理やドキュメント管理
  • 読み込みと書き出し

個人的に非常に気になる分野で、いいものがあれば実際に使いたいのですが、インターフェイスを含め完全に日本語化していないと他の人とコラボレーションして使うのは難しいと感じています。

ちなみにわたしはここで紹介されている「DRAFT」を使っていて、そのシンプルさと履歴管理機能が気に入っています。

図6 オンラインでコラボレーションできる文章編集ツール

※指定画像がありません※

おすすめ記事

記事・ニュース一覧