週刊Webテク通信

2014年7月第3週号1位は、CSS3の新しいプロパティのチュートリアル10選、気になるネタは、Google、モバイル拡張現実ゲーム「Ingress」iOSアプリをリリース

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

1. 10 CSS3 Properties Tutorials | SmashingApps.comhttp://www.smashingapps.com/2014/07/17/10-css3-properties-tutorials.html

CSS3の新しいプロパティに関するチュートリアルを10個紹介しています。

  1. :checked擬似クラスを利用したテクニック
  2. 背景画像を複数設定する方法
  3. 先頭の文字を大きくするドロップキャップを:first-child:first-letterで設定し、text-shadowで装飾するテクニック
  4. Transitionでベジェ曲線を引く方法
  5. フォントを設定する方法
  6. キーフレームアニメーションの作り方
  7. clipプロパティで画像を切り抜く方法
  8. background-clipプロパティで背景を切り抜く方法
  9. :first-of-typeセレクタの使い方と:First-Childとの違い
  10. マルチカラムレイアウトの設定の仕方
図1 CSS3の新しいプロパティのチュートリアル10選
図1 CSS3の新しいプロパティのチュートリアル10選

2. HTMLメール制作のコツや便利なサービスいろいろ | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/html-email/

HTMLメールを作るためのテクニックやサービスを紹介した記事です。

メルマガなど企業からユーザーに送られるメールでは、HTMLメールが当たり前になってきています。しかし、Web制作テクニック系の記事でも、HTMLメールに関するものはごくたまにしか見かけないので、この記事は貴重だと思います。

わたしは最近HTMLメールのメルマガを作る仕事もしているという事情もあって、個人的に大変役に立つ記事でした。

なお、HTMLメールは英語では「HTML email」という表記が一般的なようです。

図2 HTMLメールを作るためのテクニックやサービス
図2 HTMLメールを作るためのテクニックやサービス

3. 50 fantastic freebies for web designers, July 2014 | Webdesigner Depothttp://www.webdesignerdepot.com/2014/07/50-fantastic-freebies-for-web-designers-july-2014/

Webデザイナーのための、無料の素材やテクニックなどをまとめています。

フォントやスクリプト、実験的なテクニック、テンプレートやモックアップなどが掲載されていました。

図3 Webデザイナーのための無料の素材やテクニックいろいろ
図3 Webデザイナーのための無料の素材やテクニックいろいろ

4. 100+ Free Social Media Icon Sets For Designers | free social media icons | Graphic Design Inspirationhttp://www.graphicdesignsinspiration.com/100-free-social-media-icon-sets-for-designers/

ソーシャルメディア用のアイコンセットを大量に紹介した記事です。

最近のアイコンデザインのトレンドはシンプルでフラットなものですが、シンプルなものから昔風の質感のあるボタンまで、様々なデザインのアイコンが掲載されていました。

図4 ソーシャルメディア用アイコンを大量に紹介
図4 ソーシャルメディア用アイコンを大量に紹介

5. Find Guidelines - The fastest way to brand assets.http://findguidelin.es/

各種Webサービスのロゴなどを使用する際の、ブランドガイドラインへのリンク集です。

FacebookやTwitterなどWebサービスのロゴを使いたいという場合、だいたいどのサービスもロゴをダウンロードできるように用意してあり、規約などを掲載しています。

しかし、そういったページは探しにくいところにあることが多いので、こういったまとめサイトがあると便利ですね。

図5 各種Webサービスのブランドガイドラインへのリンク集
図5 各種Webサービスのブランドガイドラインへのリンク集

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

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

Logoshi - Sketch a Logohttps://www.logoshi.com/draw

ロゴを作るためのWebサービスです。ロゴ制作のジェネレーターはいろいろありますが、このLogoshiはWebページ上のドローツールで描いた絵をベースにロゴを作ってくれるところが新しいです。

ドローツールで描いたものがマークになり、入力した会社名などの文字とセットでロゴが作られます。描いた絵とはかなり違った感じのマークが生成されますが、それはそれで面白いです。

マークが気に入らない場合は「Change Mark⁠⁠、フォントが気に入らない場合は「Change Font」ボタンを押すと、別なものに変更されます。

気に入ったロゴが完成したら、ロゴのセットをダウンロードすることができます。ロゴと文字とが横並び/縦並びの2パターンで、それぞれ黒/白/カラーの3種類の画像がセットになっています。あくまでもビットマップ画像だけなのですが、小さなサイズのものは無料で、大きなサイズは有料で入手できるようになっています。

図6 Logoshiでロゴを作ってみた例
図6 Logoshiでロゴを作ってみた例

おすすめ記事

記事・ニュース一覧