週刊Webテク通信

2016年2月第3週号1位は、Web開発者のためのツールと情報源、気になるネタは、iPhoneの日付を1970年に設定すると壊れる理由(と自分で直す方法)判明

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

1. 100+ Awesome Web Development Tools and Resourceshttps://www.keycdn.com/blog/web-development-tools/

Web開発者のためのツールや情報源を大量にまとめた記事です。

以下のカテゴリに分けて紹介されています。

  • JavaScriptライブラリ
  • フロントエンドフレームワーク
  • Webアプリケーションフレームワーク
  • タスクランナー/パッケージマネージャ
  • 言語/プラットホーム
  • データベース
  • CSSプリプロセッサ
  • テキストエディタ/コードエディタ
  • マークダウンエディタ
  • アイコン
  • Gitクライアント/サービス
  • ローカル開発環境
  • 差分チェッカー
  • コード共有/テスト
  • コラボレーションツール
  • インスピレーション
  • Webサイトのスピードテストツール
  • Web開発者のコミュニティ
  • Web開発者向けメルマガ
図1 Web開発者のためのツールと情報源
図1 Web開発者のためのツールと情報源

2. Flexbox Patternshttp://www.flexboxpatterns.com/home

Flexboxを使ったユーザーインターフェイスのCSSコーディングの実例を、多数用意したサイトです。

タブ、メニュー、サイドバーなどの動作サンプルとSCSS、HTMLのコードが提供されています。

図2 Flexboxを使ったUIパターンを多数紹介
図2 Flexboxを使ったUIパターンを多数紹介

3. Are WordPress Themes Killing Web Design?http://www.sitepoint.com/are-wordpress-themes-killing-web-design/

WordPressのテーマがあれば、Web制作者は不要なのかというテーマの記事です。

Webデザイナーがクライアントに提供できる価値について、詳細にまとめてありました。自分のスキルの価値を確認する上でも、クライアントに価値を認めてもらうための参考としても役に立ちそうです。

図3 WordPressのテーマがあればWeb制作者は不要なのか?
図3 WordPressのテーマがあればWeb制作者は不要なのか?

4. The Typekit Blog | Choosing and pairing typefaces for cookbookshttp://blog.typekit.com/2016/02/12/choosing-and-pairing-typefaces-for-cookbooks/

フォントの選び方、組み合わせ方について説明した記事です。

以下の3つの書体をどうやって選んでいくかが解説されています。

  1. 本文などに使われるメインの書体
  2. サイドバーや索引などで使うサブの書体
  3. ヘッダや章のタイトルなどにつかう三番目の書体
図4 フォントの選び方、組み合わせ方についての解説
図4 フォントの選び方、組み合わせ方についての解説

5. 10 High Quality Apple Device Mockup PSDs | SmashingApps.comhttp://www.smashingapps.com/2016/02/09/10-high-quality-apple-device-mockup-psds.html

Apple端末のモックアップのPSDファイルをまとめた記事です。

はめ込み合成用の素材として使える、iPhoneやMacBookなどの写真が多数紹介されています。

図5 Apple端末のモックアップのPSDファイルいろいろ
図5 Apple端末のモックアップのPSDファイルいろいろ

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

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

CSS Flexbox Toolbox - Learning Guides, Tools & Frameworkshttp://speckyboy.com/2016/02/10/css-flexbox-toolbox/

Flexboxについて学べる情報源と、ツール、フレームワークを紹介した記事から、Flexboxを使ったCSSコーディングの手助けとなるWebサービスを紹介します。

「Web Based Flexbox Tools」として9つのサービスが掲載されています。どれもオンライン上で、FlexboxによるCSSの設定をレイアウトを確認しながら行えます。

Flexboxの基本が分かっていないと、意外と設定の違いがわからないものも多いように感じます。Flexplorerは、シンプルで使いやすく、CSSコードも併記されるので分かりやすいと思いました。

図6 Flexboxを使う手助けとなるツールや情報源をまとめた記事
図6 Flexboxを使う手助けとなるツールや情報源をまとめた記事

おすすめ記事

記事・ニュース一覧