2018年11月第3週号 1位は、効果的なレスポンシブサイト／アプリを作る8つのルール、気になるネタは、新型「iPad Pro」はロッカーや冷蔵庫にくっつきます

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

効果的なレスポンシブウェブサイト／アプリを作る8つのルールを紹介しています。

ウェブデザインにソーシャルメディア要素を統合するユニークな方法を紹介しています。

CSSの「calc()」を使って、メインイメージ領域の高さを調整する方法を解説した記事です。

ブラウザウィンドウの横幅を元に、計算式によってフォントサイズや領域の高さをコントロールしたサンプルを紹介しています。

ウェブデザインプロセスのチェックリストを13個用意しています。

各ソーシャルメディア用の画像サイズやフォーマット、ファイル容量などのチェック項目があり、この通りに作業を進めればミスを防げるということでしょう。

縦横比は守りつつ、領域に合わせてサイズが可変するコンテンツを作れるスクリプトです。

領域一杯に広がらない場合、縦方向、横方向のセンター揃えになります。

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

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

各ソーシャルメディア用のプレビューとメタタグの生成／編集ができるサービスです。Facebook、Twitter、LinkedIn、Pinterest、Slackで記事をシェアしたときのプレビューが見られるのが特に便利です。

URLを入力すると、メタタグとプレビューを確認できます。元ページに「meta description」が入っていれば、Facebook、Twitter用のOGPタグを生成できます。サムネイル用の画像をアップロードできますが、あくまでもこのサービス上でプレビューするためのものなので注意が必要です。

メタタグの生成より、各種ソーシャルメディアでシェアしたときの見た目を確認する用途の方がニーズが高そうです。なお、このサービスはWordPressの「Meta Tags」というプラグインのPRのためのもので、このプラグインを使えば同じことをWordPress上でできるというわけです。

ついにiPad Proが出荷され、一般の人のレビューも目にするようになっています。中でもiPad Proをロッカーや冷蔵庫にくっつけた写真や動画はインパクトがありました。

iPad ProにはApple PencilやSmart Keyboardをくっつけるためなどに、102個のマグネットが搭載されています。そのマグネットがかなり強力で、磁気カードなど磁石で異常をきたす恐れのあるものを近づけるのは避けた方がいいようです。

ちなみに、SDカードは磁気の影響を受けそうな印象がありますが、大丈夫とのこと。iPad Proユーザーは、磁気に対して影響のあるものとそうでないものの知識を持っておいた方がよさそうですね。