週刊Webテク通信

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

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

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

1. Web Design: 16 Basic Types of Web Pageshttps://blog.tubikstudio.com/types-of-web-pages/

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

  1. ホームページ(トップページ)
  2. フィードページ
  3. メニューページ
  4. 検索ページ
  5. アバウトページ(わたしたちについてページ)
  6. 登録ページ
  7. 404ページ
  8. ブログページ
  9. 記事ページ
  10. ポートフォリオページ
  11. サービスページ
  12. 製品ページ
  13. カートページ
  14. 統計ページ
  15. 連絡先ページ
  16. ランディングページ

図1 Webページの16種類の基本タイプ

図1 Webページの16種類の基本タイプ

2. What does 100% mean in CSS?https://wattenberger.com/blog/css-percents

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

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

図2 CSSで%を使って配置するテクニック

図2CSSで%を使って配置するテクニック

3. More Control Over CSS Borders With background-image | CSS-Trickshttps://css-tricks.com/more-control-over-css-borders-with-background-image/

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

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

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

図3 CSSの破線ボーダージェネレーター

図3 CSSの破線ボーダージェネレーター

4. this vs that - What is the difference between ___ and ___ in the front-end development?https://thisthat.dev/

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

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

  • CSSのdisplay:noneとhidden
  • リセットCSSとノーマライズ
  • HTMLの<button>と<input type="button">
  • クラスとID

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

図4 フロントエンドの似ているもの2つの違い

図4 フロントエンドの似ているもの2つの違い

5. CSS Vocabularyhttp://apps.workflower.fi/vocabs/css/en

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

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

図5 CSSの用語がビジュアルでわかる

図5 CSSの用語がビジュアルでわかる

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

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

Get feedback from your users in different way! - helppie.mehttps://helppie.me/

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

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

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

図6 簡単にフィードバックを受け取れるフォームを設置できるサービス

図6 簡単にフィードバックを受け取れるフォームを設置できるサービス

今週の気になるWebネタ

Google,同時通訳もする無線イヤフォン「Pixel Buds」を日本で8月20日発売 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2008/04/news044.html

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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