週刊Webテク通信

2020年9月第2週号1位は、CSS Flexboxを使ったヘッダーの作り方、気になるネタは、“偉い人は上座”可能? Zoom、参加者を並び替えられる新機能

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

1. Building Website Headers with CSS Flexboxhttps://ishadeed.com/article/website-headers-flexbox/

CSS Flexboxを使ったヘッダーの作り方を解説した記事です。

Flexboxを使えばロゴとナビゲーションが横並びになったヘッダーを作るのは簡単ですが、さらに別の要素が加わった場合や並び順を変えたい場合などのコーディング例も紹介しています。

この記事の作者がgithubに公開しているheaders.cssの紹介もありました。たくさんのバリエーションのシンプルでレスポンシブなヘッダーが用意されていて役立ちそうです。

図1 CSS Flexboxを使ったヘッダーの作り方
図1 CSS Flexboxを使ったヘッダーの作り方

2. Website Animation Types & Trends That Will Dominate Your Screen in 2020–2021 | by Dana Kachan | Design + Sketch | Aug, 2020 | Mediumhttps://medium.com/sketch-app-sources/website-animation-types-trends-that-will-dominate-your-screen-in-2020-2021-292cad930eed

ウェブサイトに使われるアニメーションの種類とトレンドをまとめた記事です。

  • 背景アニメーション
  • 動くロゴ
  • 液体の動き
  • 動くタイポグラフィー
  • 読み込み中のアニメーション
  • ホバー効果
  • アニメーションするギャラリー&スライドショー
図2 ウェブ上のアニメーションの種類とトレンド
図2 ウェブ上のアニメーションの種類とトレンド

3. Comparing Browsers for Responsive Design | CSS-Trickshttps://css-tricks.com/comparing-browsers-for-responsive-design/

レスポンシブデザインのための、複数画面サイズでの表示チェックツールをまとめています。

インストールして使うデスクトップアプリもありますし、ブラウザ上で動くもの、ブラウザ拡張機能もあります。

Polypaneが最もよく考慮された機能が付いているとのことです。ほかにSizzy、Bliskもおすすめのようでした。

図3 レスポンシブデザインの表示チェックツールいろいろ
図3 レスポンシブデザインの表示チェックツールいろいろ

4. Custom bullets with CSS ::markerhttps://web.dev/css-marker-pseudo-element/

リストの各項目の先頭に表示される記号「バレット」を、CSSでカスタマイズする方法を解説しています。

ulまたはolタグのバレットの色や表示するものを変えるCSSの記述例が多数あります。ただし、ブラウザによって非対応のものもありました。

図4 リストの各項目の先頭の記号をカスタマイズ
図4 リストの各項目の先頭の記号をカスタマイズ

5. 15 Amazing CSS Background Effects - 1stWebDesigner - Best of the best!https://1stwebdesigner.com/15-css-background-effects/

CSSで作られた背景効果をCodePenからまとめた記事です。

ゆっくり星が流れるもの、グラデーションがじわじわ変化するものなど15種類掲載しています。

図5 CSSで作られた背景効果いろいろ
図5 CSSで作られた背景効果いろいろ

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

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

Shape - 26000+ Icons & Illustrations to SVG, Lottie, React.https://shape.so/

Shapeはアイコンやイラストをカスタマイズしてダウンロードできるサービスです。基本有料のサービスですが、制限はありますが無料でも使えます。

アイコンはひとつのアイコンに5パターンのデザインがあり、色や線の太さを変更できます。色はあらかじめ用意された配色から変えられるのでお手軽です。イラストも同様に色や線の太さを変更でき、8パターンのデザインがあります。

無料で利用する場合は、商用利用は不可、ダウンロードできるのはPNGファイルのみです。年59ドルからのサブスクリプションで商用OK、SVGファイルでもダウンロードできます。また、有料版ではアニメーションするアイコン、イラストも利用できるようになります。

図6 カスタマイズできるアイコン・イラスト素材
図6 カスタマイズできるアイコン・イラスト素材

おすすめ記事

記事・ニュース一覧