週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 メールの「コピー」を検索できるサービス

今週の気になるWebネタ

FacebookとMessengerで,ビジネスがもっとみつかりやすく | Facebook for Businesshttps://www.facebook.com/business/news/JA-find-and-contact-businesses-on-messenger

Facebookは,Messengerで個人アカウントとFacebookページとがやりとりしやすくするために,Messengerリンク,Messengerコードなどの新機能を搭載しました。

Messengerリンクは「m.me/username」という短縮URLを,MessengerコードはQRコードのような画像を生成します。これらをサイトやメールに掲載したり,広告などに載せることで,すぐにFacebookページ宛てにメッセージを送れるということですね。

今回発表の機能は,基本的にFacebookページ向けのものですが,Messengerリンクは個人アカウントのユーザーネームでも動作していました。このリリースを伝えるニュース記事では,Facebookページ向けの機能かどうかがあいまいなものが多く,Facebookによるリリース記事が一番分かりやすかったです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入