ブログBLOG

【応用編】IntersectionObserverをつかおう｜実務から演出系まで、使い方を広げる実装例まとめ【コピペOK】

基礎編では、IntersectionObserverの基本的な仕組みと、「要素が画面に入ったら何かする」というシンプルな使い方を紹介しました。 応用編では、基礎編では触れなかったオプションや機能を活用して、実際の制作でそのまま使えるUI実装をいくつか紹介していきます。 扱う内容は大きく2 ...

動画が表示されない？コーデック（AV1／H.265）による注意点まとめ

ウェブページのコーディングを行う中で、 特定のスマートフォン環境において、動画（mp4）が表示されない現象が発生しました。 原因を調査したところ、動画ファイル自体の仕様が影響していることが分かりました。 そのため本記事では、動画を埋め込む際にご用意いただくデータの注意点として、今回の事 ...

【基礎編】IntersectionObserverをつかおう｜スクロールイベント不要で“ふわっと表示”【コピペOK】

スクロールイベントって、実装が複雑だったり、パフォーマンスが気になったりしませんか？ そんなスクロールイベントを置き換えられるかもしれないAPIが、IntersectionObserverです。 IntersectionObserverを使えば、 よく見る“ふわっと表示”をはじめ、 ...

【Swiper】奥行き感のあるパララックス風スライダー実装解説【デモ付】

Webサイトのメインビジュアルやコンテンツ紹介で、ひときわ目を引くスライダー表現を取り入れたいと感じたことはありませんか。 本記事では、センターのスライドが大きく表示され、前後にいくにつれてスライドが小さくなっていく、奥行き感のあるパララックス風スライダーをご紹介します。 視覚的な立体感 ...

【Webツール紹介！】リキッドレイアウト対応の図形を出力するCSSジェネレーター

自社で作成したツール「Liquid Layout CSS Generator」の紹介です。 グラデーションを表現したり、綺麗な模様を描いたり、アニメーションを実装したりと、少し難しいCSS表現を簡単に出力してくれる「CSSジェネレーター」は、Web制作に携わっている方であれば何度かお世 ...

font-familyの指定の仕方を解説！Androidで明朝体を表示させたい時の方法も紹介

みなさん、font-familyは正しく設定できていますか？ font-familyはサイトに表示されるフォントを予め決めておくことができるCSSプロパティのことです。 いつも同じものを使っているためフォントを変更する際に指定を間違えてしまったり、テンプレートをそのまま使っているのでよく ...

ReactとNext.jsでウェブサイトを作る

本記事ではウェブサイトの作り方に悩んでいる人に向けて、ReactとNext.jsでウェブサイトを作る方法を紹介します。 ReactとNext.jsはプログラムの道具箱のようなもので、ウェブサイトを作るときに必要な部品が揃っています。 そのため、ウェブサイトをより効率的に開発することが ...

【HTMLとCSS】円グラフを自作する【デモ付き】

ウェブサイトにグラフやチャートを導入したいとき、様々な方法があります。 画像で配置したり、HTMLとCSSを使用したり、またはjsのプラグインでグラフを作成することができます。 ですが、画像で配置した場合はアニメーションを付けることはできませんし、jsのプラグインでグラフを作成する場合はデザ ...

Web制作現場でよく見るスペルミス・読み間違いの多い英単語

Webサイトを制作するときに英単語のスペルミス・読み間違いをしてしまったことがあると思います。 制作途中で気づければまだよいですが、公開するまで誰も気が付かないと後からの修正が必要になってしまいます。 手間も追加の費用も掛かってしまうので、なるべくそれは避けたいですよね… どういっ ...

【WCAG】ウェブアクセシビリティとは？対応方法を徹底解説！

ウェブアクセシビリティという言葉はご存知でしょうか？ 「アクセシビリティ」という単語自体の意味は、「近づきやすさ」や「アクセスできるようにすること」です。 ウェブアクセシビリティにおいての「アクセシビリティ」の意味は、「利用できるようにすること」という意味になります。 つまり、「どのような人で ...