WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート
フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(Responsive Font Size)のデモ RFS(Responsive Font Size)の使い方 RFS(Responsive Font Size)の特徴 RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。 フォントのサイズは、スクリーンやデバイスごとに最適化されます。 フォントのサイズには下限と上限があ
![[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/c13b00bec5c3cf292b23f5973259735b60a70032/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019021601.png)
Google Chrome Labsが公開したWebPにも対応する画像圧縮Webアプリ「Squoosh」を使ってみた
Google Chrome Labsが、オープンソースで誰でも利用が可能な画像圧縮Webアプリ「Squoosh」を公開しました。Googleが開発した静止画フォーマット「WebP」に対応して高い圧縮率を実現しているというSquooshでどのぐらい画像ファイルの容量を小さくすることができるのか、実際にやってみました。 ?? https://t.co/sCMU33lR1G - make images smaller using best-in-class codecs, right in the browser.— Jake Archibald (@jaffathecake) Squooshの使い方は極めて簡単で、以下のリンク先にブラウザからアクセスするだけ。ホーム画面に画像をドラッグ＆ドロップで読み込ませるか、「Select an Image」をクリックして画像ファイルを指定すれば、ファイル
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
imagemin-app – ドロップして画像ファイルを最小化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトやアプリで多くの画像リソースを使うことが増えています。どんどん数が増えていくと、それだけWebサイトの表示やアプリの肥大化につながっていくでしょう。小さければ小さいほどベターです。 画像を小さくするコマンドもありますが、エンジニアでないと使い勝手が悪いでしょう。そこで使ってみたいのがimagemin-appです。 imagemin-appの使い方 imagemin-appはとてもシンプルなアプリケーションで、起動するとウィンドウが一つ表示されるだけです。 そこに画像ファイルをドロップすると自動的に最適化されます。専用のフォルダが作られるので、オリジナルが上書きされる訳ではありません。 実際に適用したところ。25KBが10KBまで減っています。 imagemin-appは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
