WEB サイト上の画像が表示されないことがある、という問題を解決
とあるWebサイトを改修したので動作確認していたところ、特定のセクションの画像が表示されない、という状況に出くわした！という話。 毎回必ず表示されないなら、画像が無い、URLが間違えている、などの原因が考えられますが、表示されたりされなかっ...
HTML
WEB 
WEB 次世代型画像形式と言われるAVIFを使ってみる
「AVIF」というのは「AV1 Image File Format」の略で、映像コーデックのAV1を静止画用にしたもの…だそうです。 この画像形式の利点は、可逆・不可逆圧縮のどちらも使え、アルファチャンネルが使え、アニメーションにも対応し、...
JavaScript/jQuery WebP画像をVegas2でスライド表示する
Vegas2で画像のスライド表示を実装しているサイトのお話。 今回のヘルプ要請は、PageSpeed Insightsで「次世代フォーマットでの画像の配信をせよ」と注意されてるんだけどなんで！？という内容。 WordPressで構築したサイ...
CSS ブラウザによって変わるプレースホルダの色指定を統一する
ホームページでお問い合わせフォームを作っていて気付いたのですが、ブラウザによってプレースホルダの文字色に違いがありました。 プレースホルダというのは、こういうヤツ。 枠の中に文字が入っていない状態では、グレー色で表示されていて、何か文字を入...
CSS [CSS] 動くグラデーションのライン
ちょっと目立たせたい部分に使用したり、さりげなく動かしたいときに便利な、動くグラデーションライン。 GIFアニメなどで作ってもいいのですが、CSSだけでお手軽に再現できましたので、ソースをメモメモ。 サンプルソース HTML <div cl...
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」を使うことができます。 無料で使え、実装も楽なので、コ...