ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。

今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。

ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore WebVitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。

Contribute to Crayfisher-zari/digital-agency-design-system development by creating an account on GitHub.

CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。

ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにら��っこしながら確認するのも大変です。

Simple Scroll Trigger はGSAPのScrollTriggerライクな判定指定ができる、シンプルで軽量なスクロール判定ライブラリです。. Latest version: 3.0.1, last published: a year ago. Start using simple-scroll-trigger in your project by running `npm i...

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。

『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。

タイトルの元ネタになっている『BLEACH』は読んだことありません。悩ましいz-index問題CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるの…

株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ICSMEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。

CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。

『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio LiveShare』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。

コーディングで使える小ネタ集

requestAnimationFrame()というとCanvasAPIなどを使ったクリエイティブコーディングでよく使われる手法ですが、クリエイティブコーディングに限ったものではなく、一般的なウェブサイトのアニメーション表現にも役立ちます。

この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。文字数とは？要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を…

プログラミングスクールなどを結果から除外した検索です

ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。

...

z-index完全に理解した（ステッカー）の購入ページです。crayfisher_zariがつくったステッカー。色やサイズも選択可能です。お得なクーポンも配布中！

普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。

2023年に使えるようになったCSSでレイアウトや表現について紹介します。

モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。

2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。

CSS アニメーションを使えば、文書やアプリを構成する要素に、驚くようなことができるようになります。しかし、当たり前のようで当たり前でないことや、すぐには思いつかないような賢い方法があるかもしれません。この記事では、止まってしまったアニメーションを再び動かす方法など、作業を楽にするために見つけたヒントをまとめています。

Vue.jsのコンポーザブル関数からコンポーネントを返して、見た目とロジックを分離するお話です。

Is font available detect the font is available for the browser with local installed fonts. It is useful for the web fonts, using from server or local file and reducing network traffic.. Latest...

フロントエンドの仕事においてエラーや上手くいかないことをググるのは常ですが、検索結果に出てくるサイトで個人的に安心して良く閲覧するサイトをまとめました。 基本的にそれらのサイト内で調べるのではなく、Googleの検索結果に出てきたもので優先的に見ていく、というような使い方です。また多くの場合において求める答えにたどり着き正しいですが、必ずしも正確な情報とは限らないことは頭の片隅に置いておいた...

Vue 3.4から正式版になったdefineModelを使ったコンポーネントv-modelについての紹介です

CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか。あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。

ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。