2019年6月第3週号 1位は、 CSSによるレイアウト技法を学び直せるサイト、気になるネタは、モジラがFirefoxの新ロゴを発表、ブラウザーだけではないことを強調

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

CSSレイアウトの技法をまとめた、CSSを使ったレイアウトを学び直すためのサイトです。

今のところ、スタック（積み重ね⁠）⁠、サイドバー、カバー（表紙）の3つが公開されており、最終的には8種類のレイアウト技法が見られるようです。

ブレイクポイントやマジックナンバー（特定の条件でだけうまくいく数値⁠）⁠、その他のハックを使わずに、どんな条件でも使えるレイアウトコンポーネントを作っています。一貫性があり、コードが簡潔で、多くのユーザー、デバイスに対応できるとのことでした。

いろいろなウェブデザインのコンポーネントを発表してきた、CodyHouseが提供するフロントエンドフレームワークです。

軽量、既存のCSSルールを上書きしなくていい、モバイルファースト、カスタマイズできる、学びやすいといった特徴があります。コンポーネントは現在87個もあり、シンプルながらセンスのあるものが揃っています。

Global Editorsというツールを使って、色、タイポグラフィ、ボタン、フォームなどのデザインを簡単にカスタマイズできるようになっています。

アプリ紹介のウェブサイトを作る方法を順を追ってまとめた記事です。

Web Share APIの使い方を解説した記事です。Web Share APIを使うと、ウェブページ上のボタンなどから、OS標準の共有メニューを起動できます。

たとえばiPhoneアプリの共有ボタンを押すと画面下部に現れるおなじみの共有メニューが、ウェブページ上から起動できるのです。

サポートしているブラウザは、デスクトップではSafariだけですが、モバイルではSafari、Chromeが対応しています。

この記事では、Web Share APIに対応していないブラウザの場合は、代わりのシェアボタンを出すことのできるコーディング例を紹介しています。

レスポンシブな表組を軽量のCSSで作る方法を紹介しています。

ウィンドウ幅が狭い場合、値の上に項目名を表示させて、行ごとに1かたまりとして表示しています。

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

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

CoderTrickは、XMLをJSONに変換するなど、コードのフォーマット変換がリアルタイムでできるサービスです。JSONからほかのフォーマットへの変換を中心に26種類の変換ができます。

JSONファイルはURLを入力して取り込むことや、ファイルを読み込むことも可能です。変換したテキストをコピーするためのボタンも用意されています。

個人的にはマークダウンをHTMLに変換する機能がうれしいところです。マークダウンエディタには、HTMLに変換する機能がなかったり、あっても面倒だったりするものもあります。リアルタイムに変換できてコピーするだけなので、気軽に使えて便利だと思います。

Firefoxのロゴが新しくなりました。Firefoxブランド全体のロゴが登場し、そのロゴからはキツネの姿がなくなりました。ブラウザのロゴはかなり簡略化されたキツネが残っています。

ブラウザ以外に、ファイル共有サービスの「Send⁠」⁠、セキュリティツールの「Firefox Monitor⁠」⁠、パスワードマネージャーの「Lockwise」のロゴも登場して、統一したブランド感を出していますね。

Firefoxブラウザの有料版をリリースする計画もあるそうです。無料版は続けつつ、VPNとクラウドストレージが使えるなど機能強化した有料版を提供することを模索しているとのことでした。