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

1. Comparing Various Ways to Hide Things in CSS | CSS-Trickshttps://css-tricks.com/comparing-various-ways-to-hide-things-in-css/

CSSによって要素を隠すいろいろな方法とそれらの比較です。

以下の4つの項目を踏まえて比較しています。

1. アクセシビリティ：非表示の要素はスクリーンリーダーで読み取られるか
2. ドキュメントフロー：非表示の要素はレイアウトに影響を与えるか
3. レンダリング：非表示の要素のボックスモデルはレンダリングされるか
4. イベントトリガー：非表示の要素はクリックやフォーカスを検出するか

方法としては以下の5種類と，おまけ的にtext-indentプロパティを使った方法を解説していました。

1. displayプロパティを使った方法
2. visibilityプロパティを使った方法
3. opacityプロパティを使った方法
4. positionプロパティを使った方法
5. visually hiddenクラスを使った方法

2. Practical Guide to Color Theory for UI designershttps://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/

色のセオリーとUIデザインに用いるカラーパレットに関する実用的なガイドです。

6つの主要なカラーカテゴリを紹介しています。UIに使う色は，1つのカラーカテゴリとニュートラル＆シェードを組み合わせると良いと解説していました。

1. ジュエルトーン
2. パステル
3. アースカラー
4. ニュートラル
5. 蛍光灯／ネオン
6. シェード

3. Website Footer Best Practices & Examples to Learn From in 2020 - Noupe Online Magazinehttps://www.noupe.com/design/website-footer.html

ウェブサイトにおける良いフッターデザインの作り方と，学ぶべき実例を紹介した記事です。

フッターに必要なもの

• 利用規約
• プライバシーポリシー
• コピーライト表記

フッターにあると良いもの

• お問い合わせ
• サイトマップ
• わたしたちについて
• ソーシャルメディアへのリンク

4. Free Mockups, Templates & Icons for Your Next Design Project | Dribbble Design Bloghttps://dribbble.com/stories/2020/10/29/free-design-mockups-templates-icons

無料で配布されているモックアップ，テンプレート，アイコンをまとめています。

ビジュアルでどういうものかわかるものばかりなので，まずは画像だけをまとめてレイアウトするという記事の見せ方が新鮮でした。

5. Minimal CSS Frameworks — dailydevlinkshttps://dailydevlinks.com/minimal-css-frameworks/

ミニマルなCSSフレームワークを9つ紹介しています。

最近流行の，HTMLタグへのclass指定なしでそれなりの見た目に調整する，「⁠クラスレス」なフレームワークもいくつかありました。

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

• IEで互換性のないWebサイトにアクセスした場合，Edgeにリダイレクト | マイナビニュース
  これまでは切り替えを促すメッセージを出していたのが，自動でリダイレクトするように変更されたそうです
• YouTubeアプリ，上にスワイプで全画面など，複数のUI改善 - ITmedia NEWS
  TikTokなど別のアプリの影響も受けつつUIが変わったようです
• Zoomが待望の無料ミーティングのためのエンドツーエンド暗号化を開始するが機能制限多数 | TechCrunch Japan
  エンドツーエンドの暗号化を利用する場合は，クラウド録音など使えない機能があり，ブラウザ版では参加できないとのことです

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

PatternPad - Editorhttps://patternpad.com/editor.html
CSS Background Patterns by MagicPatternhttps://www.magicpattern.design/tools/css-backgrounds

今回はパターンを作成するサービスを2つ紹介します。PatternPadはSVG形式を含む画像ファイル，CSS Background PatternsはCSSを生成します。

PatternPadは丸や四角，半円，三角形などの図形の組み合わせのパターンを作れます。ランダム性のあるパターンが作れて，使用する図形を指定する，色を変更・追加するなどのカスタマイズができます。SVG，JPEG，PNGでダウンロードできます。

CSS Background Patternsは，ストライプ，斜線，チェック柄などの単純な繰り返しパターンのCSSを作れます。図形の色と背景色を選べて，透明度，間隔を調整できます。「⁠鬼滅の刃」の主人公の服の市松模様も作れますね。