週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, アプリ, Web Share API, JSON, Firefox

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

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

1. Relearn CSS layout: Every Layouthttps://every-layout.dev/

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

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

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

図1　CSSによるレイアウト技法を学び直せるサイト

図1　CSSによるレイアウト技法を学び直せるサイト

2. CodyHouse Framework 2.0 | CodyHousehttps://codyhouse.co/blog/post/codyhouse-framework-2-0

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

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

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

図2　CodyHouseが提供するフロントエンドフレームワーク

図2　CodyHouseが提供するフロントエンドフレームワーク

3. How to Build Websites for Apps: Your 2019 Step-by-Step Guide - Designmodohttps://designmodo.com/build-websites-apps-guide/

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

  1. 魅惑的なカラーパレットを選ぶ
  2. 鮮明な製品写真を表示する
  3. アプリをどう操作するのかを見せる
  4. 空白を利用する
  5. 目立つようにボタンを配置する

図3　アプリ紹介のウェブサイトを作る方法

図3　アプリ紹介のウェブサイトを作る方法

4. How to Use the Web Share API | CSS-Trickshttps://css-tricks.com/how-to-use-the-web-share-api/

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

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

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

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

図4　Web Share APIの使い方

図4　Web Share APIの使い方

5. Making Tables Responsive With Minimal CSS · Bradley Taunthttps://bradleytaunt.com/2019/06/11/responsive-tables/

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

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

図5　レスポンシブな表組のCSSコーディング例

図5　レスポンシブな表組のCSSコーディング例

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

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

CoderTrick | Convert Your Code Into Your Desired Format.https://codertrick.com/

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

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

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

図6　コードをフォーマット変換するサービス

図6　コードをフォーマット変換するサービス

今週の気になるWebネタ

モジラがFirefoxの新ロゴを発表，ブラウザーだけではないことを強調 | TechCrunch Japanhttps://jp.techcrunch.com/2019/06/12/2019-06-11-mozilla-gives-firefox-a-new-logo-as-it-looks-beyond-the-browser/

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

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

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

Webテク, Webデザイン, Web広告, CSS, アプリ, Web Share API, JSON, Firefox

著者プロフィール

芦之由（あしのよし）

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

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

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