週刊Webテク通信

2017年5月第4週号1位は、CSSメディアクエリの問題点と解決策、気になるネタは、GoogleのInstant Appsを全ての開発者が利用可能になった

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

1. The Big CSS Media Query Mistakehttps://speckyboy.com/big-css-media-query-mistake/

CSSメディアクエリの問題点を指摘し、その解決策を提案した記事です。

メディアクエリの7つの大きな問題は以下。

  1. 直感的ではない
  2. できることが限定されている
  3. 拡張できない
  4. 改造に適していない(昔のサイトを後からレスポンシブにするケースなど)
  5. コードが効率的ではない
  6. ワークフローの複雑さを増やす
  7. ファイルサイズが増えパフォーマンスを悪くする

これらを解決するために、rKitというJavaScriptを利用したCSSツールキットを作っているとのことで、そのrKitの簡単な解説も載っています。

図1 CSSメディアクエリの問題点と解決策
図1 CSSメディアクエリの問題点と解決策

2. The 5 Most Popular Frontend Frameworks of 2017 Compared — SitePointhttps://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/

フロントエンドフレームワークを比較するための情報をまとめています。

各フレームワークのリリース年、現在のバージョン、GitHubでの星の数、CSSプリプロセッサ、対応ブラウザ、アイコンセット、ドキュメントの評価などが掲載されていました。

また、良いフレームワークを選ぶためのアドバイスも紹介しています。

  • 人気があるか
  • 開発が継続中か
  • 成熟しているか
  • 良いドキュメントを提供しているか
  • 特異性が高くないか
図2 フロントエンドフレームワークの比較
図2 フロントエンドフレームワークの比較

3. 15 Useful Code Snippet Tools That Will Help You Store And Manage Your Code Libraryhttps://onextrapixel.com/15-useful-code-snippet-tools-that-will-help-you-store-and-manage-your-code-library/

コードスニペット(コードの断片)を再利用するために保存、管理するツールをまとめています。

単にコードスニペットを管理するだけではなく、オンラインでコードの実行ができるコード共有サービスやコーディングツールのエクステンションなども紹介されていました。

図3 コードスニペット用ツールいろいろ
図3 コードスニペット用ツールいろいろ

4. CSS & JS Sliders From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-js-sliders-from-codepen/

CSSとJavaScriptを使ったスライダーを、コード共有サイトのCodePenから多数紹介しています。

ただの写真スライドではなく、画像と文字を組み合わせて複雑な動きをするものが多いようです。

図4 スライダーをCodePenから多数紹介
図4 スライダーをCodePenから多数紹介

5. Folder Preview Ideas | Codropshttps://tympanus.net/codrops/2017/05/17/folder-preview-ideas/

フォルダーアイコンにカーソルを合わせた場合に、中身をプレビューしているようなアニメーション効果を与えるデモとコードです。

実用性はともかく、どの効果も良くできていて動きが気持ちいいです。

図5 フォルダーをプレビューするアニメーションのアイデア
図5 フォルダーをプレビューするアニメーションのアイデア

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

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

Stroly|ストローリーhttps://stroly.com/

Stroly(ストローリー)は、様々な地図を位置情報と連携して見ることができるサービスです。イラストマップのような実際の縮尺とは違う不正確な地図でも、GPSと連動できるところがポイントです。

イラストマップなどの画像をアップロードして、イラストマップと地図の同じ位置を見比べながら設定していきます。ランドマークを設定して、クリックするとテキストや画像が開くようにもできます。

作った地図は、公開/限定公開(URLを知っている人のみアクセスできる⁠⁠/非公開が選べます。現在は実験版となっていますが、今後に期待できそうな日本発のサービスです。

図6 ユーザー投稿の地図サイト
図6 ユーザー投稿の地図サイト

おすすめ記事

記事・ニュース一覧