週刊Webテク通信

2019年7月第3週号 1位は, よくある問題のあるポップアップの使い方と解決方法,気になるネタは,Apple,MacBook Air 2017と12インチMacBookを販売終了 Retina化とThunderbolt 3搭載完了

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

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

1. Popups: 10 Problematic Trends and Alternativeshttps://www.nngroup.com/articles/popups/

よくある問題のあるポップアップの使い方と解決方法を解説しています。

  1. メインのページコンテンツが読み込まれる前にポップアップを表示する
  2. ユーザーがログインした直後にポップアップを表示する
  3. やり取りする前にEメールアドレスを尋ねる
  4. ユーザーが意味のあることをする前にフィードバックを求める
  5. 重要な作業中にユーザーにフィードバックを求めない
  6. 複数のポップアップを次々に表示する
  7. ユーザーがサブドメインまたは外部サイトに移動する前にモーダルオーバーレイを表示する
  8. モーダルオーバーレイの表示によってコンテンツへのアクセスを中断する
  9. GDPRやCookieの通知にモーダルオーバーレイ表示を使用する
  10. 具体的な利点を伝えずにモーダルオーバーレイによりサイトからアプリへ誘導する

図1 よくある問題のあるポップアップの使い方と解決方法

図1 よくある問題のあるポップアップの使い方と解決方法

2. Fun places to learn CSS Layout – Part 2: Grid Layout, by Stéphanie Walterhttps://stephaniewalter.design/blog/fun-places-to-learn-css-layout-part-2-grid-layout/

CSSグリッドを楽しく学べるサービスやサイトをまとめた記事です。

以下の項目に分けて紹介しています。

  • ゲーム
  • 見ながら確認できるツール,ジェネレーター
  • チートシート
  • 面白いデモ
  • 動画で学べる
  • その他の情報源

図2 CSSグリッドを楽しく学べるサービスやサイト

図2 CSSグリッドを楽しく学べるサービスやサイト

3. 33 Amazing Sites with Beautiful Free Icon Setshttps://blog.usepastel.com/post/33-beautiful-free-icon-sets

フリーのアイコンセットを33種類まとめています。

モノクロ/カラー,アウトライン/ソリッドといろいろなアイコンが揃っています。

図3 フリーのアイコンセットいろいろ

図3 フリーのアイコンセットいろいろ

4. CSS Lists, Markers, And Counters — Smashing Magazinehttps://www.smashingmagazine.com/2019/07/css-lists-markers-counters/

CSSでリストをスタイリングするための新しい方法を紹介しています。なお,この記事で解説している::marker擬似要素は,Firefoxだけで使える実験的な機能です。

CSSの::marker擬似要素を使うと,リスト項目の箇条書き記号部分のフォントや色を指定できます。また,contentプロパティを使って記号に絵文字を使ったり,番号付きリストでStep1,Step2のように数字だけでなく任意の文字を入れる例などが掲載されています。

図4 CSSでリストをスタイリングするための新しい方法

図4 CSSでリストをスタイリングするための新しい方法

5. Pixel - Bootstrap 4 UI Kithttps://themesberg.com/preview/pixel-lite/

Bootstrap 4用のUI Kitです。いろいろなコンポーネントがあり,シンプルできれいにまとまっています。

ライト版は無料で100コンポーネントあり,有料のプロ版は1000以上のコンポーネントがあるようです。

図5 Bootstrap 4用のUI Kit

図5 Bootstrap 4用のUI Kit

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

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

ImportDochttps://importdoc.com/

ImportDocは,Googleドキュメントをウェブサイトに簡単に埋め込めるサービスです。埋め込めるのはドキュメントだけで,スプレッドシート,スライドは埋め込めません。

Googleアカウントと連携して,Google ドキュメントを選択すると,埋め込み用のHTMLコードが生成されます。そのコードをHTML内の任意の場所に貼り付けるだけで,Google ドキュメントが表示されます。

埋め込んだ場所の幅に合わせて表示されますし,iframeで埋め込んでいるわけではないので,CSSで見た目を調整することも可能です。もちろん,Google ドキュメントを変更すると,埋め込まれた部分も更新されます。

図6 Googleドキュメントをウェブサイトに埋め込めるサービス

図6 Googleドキュメントをウェブサイトに埋め込めるサービス

今週の気になるWebネタ

Apple,MacBook Air 2017と12インチMacBookを販売終了 Retina化とThunderbolt 3搭載完了 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1907/09/news139.html

アップルがMacBookのラインナップを変更し,MacBook AirはすべてがRetinaディスプレイモデルとなり12インチMacBookは販売終了となりました。

わたしは初代の12インチMacBookを持ち運び用に今でも使っています。パワー不足と言われることも多い12インチMacBookですが,コーディング,ウェブ向けのグラフィック処理,ウェブブラウズに関しては,大きな不満はありません。

12インチMacBookはUSB-Cポートを初めて搭載したMacでしたが,今のMacBookはすべてThunderbolt 3ポート搭載となっています。端子の形状は同じなんですが,いつの間にか12インチMacBookだけが取り残されていたようです。

著者プロフィール

芦之由(あしのよし)

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

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

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