週刊Webテク通信

2020年11月第1週号1位は、CSSによって要素を隠す方法の比較、気になるネタは、Appleが簡単動画作成アプリClips 3.0発表、縦位置ビデオサポートでTikTok世代を狙う

ネットで見かけた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クラスを使った方法
図1 CSSによって要素を隠す方法の比較
図1 CSSによって要素を隠す方法の比較

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. シェード
図2 UIデザインのための色のセオリー
図2 UIデザインのための色のセオリー

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

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

フッターに必要なもの
  • 利用規約
  • プライバシーポリシー
  • コピーライト表記
フッターにあると良いもの
  • お問い合わせ
  • サイトマップ
  • わたしたちについて
  • ソーシャルメディアへのリンク
図3 良いフッターデザインの作り方と実例
図3 良いフッターデザインの作り方と実例

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

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

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

図4 フリーのモックアップ、テンプレート、アイコンいろいろ
図4 フリーのモックアップ、テンプレート、アイコンいろいろ

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

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

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

図5 ミニマルなCSSフレームワークいろいろ
図5 ミニマルなCSSフレームワークいろいろ

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

先週の気になる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を作れます。図形の色と背景色を選べて、透明度、間隔を調整できます。⁠鬼滅の刃」の主人公の服の市松模様も作れますね。

図6 図形の組み合わせでパターンを作るPatternPad
図6 図形の組み合わせでパターンを作るPatternPad
図7 CSSのパターンを作るCSS Background Patterns
図7 CSSのパターンを作るCSS Background Patterns

おすすめ記事

記事・ニュース一覧