週刊Webテク通信

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

ネットで見かけた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 簡単にフィードバックを受け取れるフォームを設置できるサービス

おすすめ記事

記事・ニュース一覧