2020年8月第2週号 1位は、Webページの16種類の基本タイプ、気になるネタは、Google、同時通訳もする無線イヤフォン「Pixel Buds」を日本で8月20日発売

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

Webページを16種類の基本タイプにわけて、デザインするためのヒントや実例を紹介しています。

CSSでサイズと位置揃えをするヒントです。親要素に対して幅と高さを50%にした領域を、水平垂直方向に中央揃えする方法を紹介しています。

親要素に絶対配置「position:absolute」を指定して、その子要素を50%の位置に配置した上で、transformを使って子要素のサイズの50%分戻すことでセンターに配置する有名なテクニックです。

CSSの破線ボーダーをカスタマイズできるジェネレーターの紹介です。

太さや色はもちろん、破線の各線分の長さや間隔などを細かくコントロールできます。

線の両端を斜めにしたり、アニメーションする破線も作れます。

フロントエンドにおける、似ているもの2つの違いについて解説した記事です。CSS、DOM、HTML、JavaScriptに分けて紹介しています。

たとえば以下のようなものの比較です。

githubで誰もが更新に参加できるようになっています。

CSSの用語（英語）が何を意味しているのかがビジュアルでわかります。右側に表示されている用語を選ぶと、左側のサンプルCSSコードの該当する部分がハイライトします。

英語での用語がわかると、英語での情報を検索して探すときに便利だと思い紹介しました。

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

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

helppieはユーザーがフィードバックを送信できる仕組みをサイトやブログに追加できるサービスです。Webサービスに機能のリクエストや不具合のレポートを送るボタンを付けることなどに使えそうです。

設置はとても簡単で、スクリプトのサイズも10KB未満と軽量です。ユーザーはボタンを押すとポップアップで開くシンプルなフォームに入力して、送信ボタンを押すだけです。

送信された内容はメールで受信できるとともに、管理画面で見ることも可能です。1ヵ月あたり25件までの送信なら無料で使用できるので、個人ブログなど無料で大丈夫なケースも結構ありそうです。

Googleのワイヤレスイヤホン「Pixel Buds」が日本でも発売されることになりました。耳にはめているときの見た目の印象はAir Podsよりスッキリしています。

スマートフォンのGoogle翻訳アプリと連動して、リアルタイム翻訳機能が使えるのが面白そうです。しかし、この機能はPixelシリーズかAndroid 6.0以降搭載のスマートフォンにしか対応していないとのこと。

Pixel BudsとGoogleアシスタントとの連携はiPhoneでもできるそうです。Air PodsはAndroidと組み合わせて使うのにはあまり向いていないので、Androidユーザーには選択肢として有力候補だと思います。