WEB 次世代型画像形式と言われるAVIFを使ってみる
「AVIF」というのは「AV1 Image File Format」の略で、映像コーデックのAV1を静止画用にしたもの…だそうです。
この画像形式の利点は、可逆・不可逆圧縮のどちらも使え、アルファチャンネルが使え、アニメーションにも対応し、...
HTML
WEB 
JavaScript/jQuery WebP画像をVegas2でスライド表示する
Vegas2で画像のスライド表示を実装しているサイトのお話。
今回のヘルプ要請は、PageSpeed Insightsで「次世代フォーマットでの画像の配信をせよ」と注意されてるんだけどなんで！？という内容。
WordPressで構築したサイ...
CSS ブラウザによって変わるプレースホルダの色指定を統一する
ホームページでお問い合わせフォームを作っていて気付いたのですが、ブラウザによってプレースホルダの文字色に違いがありました。
プレースホルダというのは、こういうヤツ。
枠の中に文字が入っていない状態では、グレー色で表示されていて、何か文字を...
CSS [CSS] 動くグラデーションのライン
ちょっと目立たせたい部分に使用したり、さりげなく動かしたいときに便利な、動くグラデーションライン。
GIFアニメなどで作ってもいいのですが、CSSだけでお手軽に再現できましたので、ソースをメモメモ。
サンプルソース
HTML
<div c...
CSS [CSS] ブラウザによって縮小画像の画質が違う
Webサイトを作成していたときのこと。
サイズが250×180pxの画像を、画像ファイル側で縮小せずに、CSSで幅180pxに縮小して表示させてみたところ、非常にぼやけた画像になってしまいました。
しかし、別のPCで確認すると、ぼやけずには...
CSS [CSS] 枠線と文字をグラデーションに
とあるサイトで、ボタンのデザインに「枠線も文字もグラデーション」を指定されたのですが、初めての経験だったので手間取ってしまったため、忘れないようにメモメモ。
実現できるものの、ちょっと面倒でした。
まずは出来上がりから
ということで、枠線...
JavaScript/jQuery ポップアップを「CSSだけ」「jQueryも併用」の2パターン作ってみた
画像の拡大や、詳細情報を表示させるため、など、サイト上でポップアップ表示を使うことはよくあると思います。
ただ表示・非表示するだけなら簡単ですが、徐々にふわっと表示（フェードイン）させたり非表示（フェードアウト）させたり、となると、少し工夫...
WEB A-FRAMEを使ってVRコンテンツを自分のサイトに埋め込む
少し前に、GoogleVRの「VR View」を使って自分のサイトにVRコンテンツを掲載する方法をメモメモしましたが、今回はA-FRAMEというツールを使ってVRコンテンツを掲載する方法をメモメモしてみます。
このA-FRAMEというツー...
WEB GoogleVRを使ってVRコンテンツ（360度全天球画像）を自分のサイトに埋め込む
RICOHのTHETA（シータ）などの360度カメラで撮影した全天球画像や動画を、VRコンテンツとして自分のサイト（ホームページ）に埋め込むためには、GoogleVRの「VR View」を使うことができます。
無料で使え、実装も楽なので、コ...
WordPress WordPressでWebPを使うための設定
WebP（ウェッピー）というのは、Googleから提供されている静止画像のフォーマットで、拡張子は.webp。JPEGやPNGよりもファイルサイズを小さくできるメリットがある画像形式です。
Webサイトの読み込み速度を改善させるための一番の...