超高速な静的Webページを作ろう！ - Qiita
PageSpeed Insights 計測結果 モバイル/パソコン 共に100点 速度という点に絞ると信用できるものではないかもしれませんが、100点という数字は単純にうれしい:) それでは！以下が私のやったことです リクエスト数を極限まで減らす CSSはstyle属性やstyleタグで設定 複数箇所で使う場合はstyleタグに、要素固有のスタイルはstyle属性で設定してしまいましょう。 style属性で設定する場合はセレクタでの捜索が発生しないので、ごく僅かながら速くなると思います。 画像はbase64で埋め込む こことかでデータURIスキームに変換してhtmlに埋め込みます。 base64エンコードすると容量が1.3倍くらいに増加するため大きな画像には向かない方法ですが、小さなアイコン程度ならリクエスト数減らすほうが効果的な場面があります。 複数箇所に使う画像の場合はCSS変数でba
[CSS]デザイナーには透明に見えてしまう背景を実装するスタイルシートのテクニック
.bg-img-transparent { width: 500px; height: 500px; margin: 0; background-position: 0px 0px, 8px 8px; background-size: 16px 16px; background-image: -webkit-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),-webkit-linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #eee 100%); background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, tran
![[CSS]デザイナーには透明に見えてしまう背景を実装するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/dee0f77c87217279cf90145ae78c50c927a91ef0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017061201.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
