gihyo.jpサイトのロゴ

週刊Webテク通信

2016年4月第2週号1位は、Flexboxを使わずにFlexbox同様のレイアウトを実現するCSSテクニック、気になるネタは、FacebookとMessengerで、ビジネスがもっとみつかりやすく

2016-04-14

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

1. Almost complete guide to flexbox (without flexbox) | Kenan Yusufhttp://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

CSS3のFlexboxで設定できるレイアウトを、Flexboxを使わずに実現する方法をまとめています。

以下のFlexboxのプロパティなどについて、同じようなレイアウトを行うCSSのテクニックが紹介されています。

  • flex-direction（子要素の配置方向）
  • flex-wrap（子要素の折り返し設定）
  • justify-content（水平方向の揃え方）
  • align-items（垂直方向の揃え方）
  • align-content（行の揃え方）
  • flex items（Flexアイテムに指定できるflex-grow、flex-shrink、align-self）

Flexboxを使う／使わないの両面において、CSSでセンター揃えや均等配置などを設定するための参考になります。

図1　Flexboxを使わずにFlexbox同様のレイアウトを実現するテクニック
図1　Flexboxを使わずにFlexbox同様のレイアウトを実現するテクニック

2. Effeckt.csshttp://h5bp.github.io/Effeckt.css/

トランジション＆アニメーションを簡単に実装できるCSSファイルを配布しており、デモを見ることができます。

モーダルウィンドウ、ボタン、画像のキャプション、タブ切り替えなどにアニメーションを与えるための豊富な設定が用意されています。

図2　トランジション＆アニメーションを簡単に実装できるCSS
図2　トランジション＆アニメーションを簡単に実装できるCSS

3. 12 Amazing Text Effects Created With CSS | SmashingApps.comhttp://www.smashingapps.com/2016/04/06/12-amazing-text-effects-created-with-css.html

テキストに効果を与えるCSSを使ったテクニックを多数紹介しています。動きのある効果も、JavaScriptを使わずにCSSで実現しているものばかりです。

テキストに影や立体感を与えたり、アニメーションさせるためのコードをリンク先で参照できます。

図3　テキストに効果を与えるCSSテクニック
図3　テキストに効果を与えるCSSテクニック

4. The Truth About Web Designhttps://speckyboy.com/2016/04/08/truth-about-web-design/

「Webデザインの真実」といったタイトルで、Webデザインの考え方を解説しています。

Webサイトのデザインについて気にしているのはWebデザイナーくらいで、ユーザーはサイトで何ができるかを気にかけており、サイトの目的をサポートするのが優れたデザインとのことでした。

図4　Webデザインの真実について
図4　Webデザインの真実について

5. The Best New Portfolio Sites, April 2016 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/04/the-best-new-portfolio-sites-april-2016/

優れたポートフォリオサイトを大量にまとめた記事です。デザイナーやデザインスタジオの作品紹介サイトが多数掲載されています。

思わず真似したくなるような、いろいろなアイデアが参考になります。

図5　優れたポートフォリオサイトいろいろ
図5　優れたポートフォリオサイトいろいろ

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

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

Good Copy • Email copy from great companieshttp://www.goodemailcopy.com/

Good Copyは企業やサービスがユーザーに送るメールの文面を検索できるサービスです。ここでの「Copy」はコピーライターの「コピー」ですね。

優れた宣伝文のデータベースといったところですが、売り込みというよりもユーザーとのコミュニケーションのための文面が揃っているようです。

「Welcome」「⁠Thank you」といったシーンごとに、どういう文面が使われているのかを調べたり、サービス（たとえばSlack）で絞り込んで使われている文面を見たりできます。

英語版のサービスを運用している日本人にはとても役に立ちそうなサービスです。日本語版のこういったサービスもあればいいですね。

図6　メールの「コピー」を検索できるサービス
図6　メールの「コピー」を検索できるサービス

おすすめ記事

記事・ニュース一覧