週刊Webテク通信

2019年6月第2週号 1位は， 4ピクセルベースライングリッドの考え方と使い方，気になるネタは，iTunesは廃止へ，機能は3つのアプリに分割--アップル，macOS Catalinaを発表

Webテク, Webデザイン, Web広告, Mac, CSS

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

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

1. The 4px baseline grid — the present – UX Collectivehttps://uxdesign.cc/the-4px-baseline-grid-89485012dea6

4ピクセルベースライングリッドの考え方と使い方を解説しています。

縦の間隔を4ピクセル単位のグリッドに合わせるのですが，文字をバウンディングボックスではなく，実際の文字の高さをベースに揃えるという考え方が特徴です。

Sketchでのレイアウト方法を紹介していますが，コーディングの際には再現するのが大変そうだと思いました。

図1　4ピクセルベースライングリッドの考え方と使い方

図1　4ピクセルベースライングリッドの考え方と使い方

2. CSS Grid: No Nonsense Layouts | TestDriven.iohttps://testdriven.io/blog/css-grid/

実用的な例をもとに，CSSグリッドを使ったレイアウト手法を学べる記事です。

CSSグリッドの例として，テレビのテストパターン，座席表，基本的なWebアプリケーションと3つのレスポンシブなレイアウトをCodePenを使って紹介しています。

図2　CSSグリッドレイアウトの手法を紹介

図2　CSSグリッドレイアウトの手法を紹介

3. 3 Essential Design Trends, June 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/06/3-essential-design-trends-june-2019/

2019年6月のウェブデザインのトレンドを3つ取り上げています。

  1. カラーの背景の上の白い文字のナビゲーション
  2. 円
  3. 完全なグリッド

円をデザインに使うことの流行りは繰り返しており，ほかのトレンドに依存しないところが利点とのことでした。

図3　今月のウェブデザインのトレンド3つ

図3　今月のウェブデザインのトレンド3つ

4. Prevent Page Scrolling When a Modal is Open | CSS-Trickshttps://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

モーダルウィンドウが開いているときに，ページがスクロールされるのを防ぐ方法を解説しています。

フレームワークで用意されているハンバーガーメニューでも，ページがスクロールされてしまうものも多く，このテクニックを活用したいところです。

図4　モーダルウィンドウが開いているときにページがスクロールされるのを防ぐ方法

図4　モーダルウィンドウが開いているときにページがスクロールされるのを防ぐ方法

5. CSS Calendar Examples From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-calendars/

CSSによるカレンダーのコーディング例をまとめた記事です。

JavaScriptで自動生成するカレンダーや，カレンダーアプリを想定したUIのものなど，バリエーション豊かなカレンダーを紹介しています。

図5　CSSによるカレンダーのコーディング例いろいろ

図5　CSSによるカレンダーのコーディング例いろいろ

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

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

LandingPagr is a Free Editing Tool to Write your Landing Page Copy On - LandingPagr.comhttps://www.landingpagr.com/

ランディングページのモックアップを簡単に作れるサービスです。あらかじめ用意されたテンプレートのテキスト部分を変更していくことでランディングページが作れます。

17種類のブロックが用意されており，その中から使うブロックを決めて文字部分を書き換えます。できることは文字を変更することだけで，レイアウトの変更や並び替えはできませんし，ダミーの枠線だけのイメージを，手持ちの画像と差し替えることもできません。

ランディングページのコピーライティングを考えるためだけのサービスなのですが，フォーマットが決まっていて，お手本となるコピーが入っているので，文面を考えやすくなる可能性は高いでしょう。どこかを編集するとその時点でURLが生成され，ほかの人に見てもらうことができます。

図6　ランディングページのモックアップを簡単に作れるサービス

図6　ランディングページのモックアップを簡単に作れるサービス

今週の気になるWebネタ

iTunesは廃止へ，機能は3つのアプリに分割--アップル，macOS Catalinaを発表 - CNET Japanhttps://japan.cnet.com/article/35137930/

Macの次期OS「macOS Catalina」で，iTunesアプリはなくなり，Apple Music，Podcast，Apple TVの3つのアプリがその機能を受け継ぐということです。iPhone，iPadでは既にこの3つのアプリがあるので，同じになってわかりやすいと思います。

iTunesには，iPhone，iPadのバックアップ，リストア，音楽，動画などの同期を管理する役割もあったのですが，それはファインダーが受け継ぐそうです。iPodからの歴史を知ってる人には違和感ないですが，なぜ音楽用アプリが携帯電話のデータのバックアップに使われるのかという不自然さがなくなりますね。

なお，Windows版のiTunesは存続されます。iTunes Storeという名前はそのままで，MacではApple Musicアプリから使えるようになるので，iTunesという名前は残り続けるということです。

Webテク, Webデザイン, Web広告, Mac, CSS

著者プロフィール

芦之由（あしのよし）

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

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

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

バックナンバー

週刊Webテク通信

バックナンバー一覧