はてなブックマーク

前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！　リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基本となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載

ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？　今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ

メディアクエリとして知られる@mediaやCSSアニメーションで使われる@keyframesなど、CSSには@から始まるさまざまなルールがあります。その中にある@propertyというルールはご存知でしょうか？ CSS変数の定義をより細かく設定できるものですが、実はアニメーションにも活用できる意外な隠し能力があります。今回は@propertyについてと、そのアニメーションへの応用方法について解説します。 サンプルを別ウインドウで開く コードを確認する @propertyとは？ @propertyはCSS変数の定義を宣言できるルールです。その変数の型や初期値、継承の有無などを設定できます。次のコードは--custom-colorという変数の定義です。 @property --custom-color { syntax: "<color>"; inherits: false; initial-

ウェブサイトやアプリなどでアニメーションするイラストを目にすることがよくあります。クリックしたらアニメーションする「いいね」アイコン、ローディング画面など、最近はインタラクティブでリッチなアニメーションを取り入れたものが多いです。 このようなアニメーションを作るツールとしてLottieが有名ですが、Riveというツールがあるのをご存知でしょうか？ Lottieもとても便利なツールですが、RiveにはLottieにはない魅力があります。今回はこのRiveのメリットやデメリット、実際にRiveで作ったデモをご紹介します！ Riveとは？ Riveはアニメーションを作成できるデザインツールと、それを多様なプラットフォームで実行できるランタイムです。最大の特徴はインタラクションをツール上で作れることです。オンラインエディター、またはダウンロードページからダウンロードしたデスクトップアプリがあります

ウェブサイトに欠かせない画像コンテンツ。Adobe Photoshopなどで加工し書き出すことも多いですが、SVGフィルターを使用すると同じように複雑な効果を表現できます。 本記事では、SVGフィルターを使っていろいろな雰囲気の画像加工の作例を紹介します。数値を変えると雰囲気もガラリと変わりますのでコピペして色々とお試しいただき、ぜひ取り入れてみてください。 SVGフィルター実装方法の概要 作例紹介の前に、今回の実装方法について概説したいと思います。SVGフィルターの適用にはCSSのfilter: url()を使用します。 コードで画像加工を行う簡易的な方法として、CSSのfilterプロパティを使う方法が挙げられます。filterプロパティに指定できるCSS関数はいくつか用意されており、blur()関数でぼかしたり、contrast()でコントラストを強めたりと簡単な加工が行えます。 こ

Vue.jsのフレームワークであるNuxtには便利なプラグインがたくさんあります。静的サイトを作成するNuxt Contentはその中のひとつとしてよく用いられています。 読者の中には「NuxtってVue.jsのフレームワークでしょ？　私はReact派だし興味ないかな…。」という人も多くいると思います。 しかし、Nuxtの強みとして、コミュニティ主導で質の高いモジュールが管理されていることが挙げられます。NuxtコミュニティではNuxt Modulesという名前でライブラリが管理、提供されています。Nuxt Contentもそのひとつです。 Nuxt Modulesに追加されるライブラリについてはコミュニティ内で実装ガイドラインが定められており、Nuxtチームのレビューを受けて追加されるため品質が担保されています。また、Nuxtで使いやすい形になっているため導入が容易で最小限のカスタマイズ

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ

CSSで特定の形に切り抜く（マスキングする）にはmask-imageプロパティが便利です。マスク用の画像をmask-imageプロパティを使って要素に適用すれば、その画像の不透過部分のみにマスキングできます。mask-imageプロパティに関連して2024年から使用可能になったmask-compositeプロパティを使うと、マスクの合成方法を指定でき、より幅広いマスク表現ができるようになりました。この記事ではmask-compositeプロパティについて解説します。 サンプルを別ウインドウで開く コードを確認する mask-compositeプロパティの値とそのマスク結果の違い mask-compositeプロパティは、複数のマスク画像をどのように合成するかの方法を指定するためのプロパティです。実はmask-imageプロパティは複数画像の指定にも対応しています。複数画像からマスク領域を生

チェックボックスは、HTML・CSSで独自にデザインすると手間のかかる要素です。ほとんどの場合は、<input type="checkbox" />を利用することになりますが、以下の課題があります。 標準のinputタグはブラウザごとに見た目が異なり、利用できるCSSプロパティにばらつきがある。 実装方法が複数存在し、どの方法が適しているか判断しにくい。 チェックボックスには複数の状態が存在し、用意すべき見た目がわかりにくい。 慣れていない方にとっては、判断に迷いやすい要素です。この記事では、独自にデザインされたチェックボックスの作り方を4つのポイントに分けて紹介します。 本記事で紹介すること チェックボックスの独自のデザインを、シンプルなHTML構造で実装する方法 標準のinputタグの利点を落とさず、独自のデザインを適用する方法 コピペで使えるチェックボックスの作例 シンプルなチェック

前回の記事『ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識』では、Googleが開発した機械学習用JavaScriptライブラリ「TensorFlow.js」が提供する、顔認識モデルをご紹介しました。そしてウェブカメラを使用してリアルタイムで顔認識を行い、好きなスタンプ画像を選んで顔に貼り付けるデモを作成しました。 今回の記事では、TensorFlow.jsを利用し、ポーズに合わせた画像が出現するデモを作成します。 ▲ ポーズに合わせた画像が出現するデモ。詳細は後述します。 TensorFlow.jsとは TensorFlow.jsは、Pythonで広く利用されている機械学習ライブラリ「TensorFlow」のJavaScript版です。TensorFlow.jsを利用すると、以下のようなことをブラウザ上で実現できます。 オリジナルの機械学習モデル

アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

プログラミングにおいて、ユニットテストを書いてコードが正しく動くか検証することはとても重要です。ユニットテストを導入する目的といえば品質の向上ですが、それ以外にもメリットがたくさんあります。 この記事ではユニットテストを書くとどんなメリットがあるのか、またユニットテストを書くときのちょっとしたコツを紹介します。 ユニットテストを書くメリット 「TODOアプリ」を作っていると仮定して、実際にコードとテストコードを確認しながらメリットを考えてみましょう。 この記事で紹介するテストコードは以下から確認できます。実際に手元で動かせるのでぜひ試してみてください。 コードを確認する ※上記のテストコードはテストフレームワークのVitestを使用して書かれていますが、記事の内容自体はフレームワークによらない普遍的な考え方をもとにしています。 メリット①書いたコードが意図したとおりに動くかすぐ確認できる

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／

コンテナークエリーは、要素の幅を条件にする機能だけでなく、CSS変数を条件にスタイルを適用する、コンテナースタイルクエリーという機能があります。活用することで、ひとつのクラスに異なるバリエーションのスタイルを定義できます。 前回の記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』では、コンテナークエリーの基本的な使い方を紹介しました。本記事では、コンテナースタイルクエリーの使い方を紹介します。 ※本記事のデモは、ChromeまたはEdgeでご覧ください。ブラウザのサポート状況は、後述する「対応ブラウザ」を参照ください。 コンテナースタイルクエリーの使い方 @containerの条件をstyle()関数で定義することで、コンテナースタイルクエリーを利用できます。関数の引数には、条件とするCSS変数と値を設定します。CSS変数は、親要素に定義された値を参照します。 また、前

顔認識技術を利用したアプリケーションは身近なところにあります。たとえば、カメラで映した顔に猫耳やリボンなどのスタンプを自由に追加できる加工アプリ「SNOW」や、ビデオ会議ツール「Zoom」、「Microsoft Teams」で使用できるフィルター機能などがあります。これらの機能は、フェイストラッキング技術を利用しています。 この技術はアプリだけでなく、ウェブブラウザ上でも実現できます。今回は、Googleが開発した機械学習用JavaScriptライブラリ「TensorFlow.js」を使って、ウェブカメラでリアルタイムに顔が認識されるデモを作成してみました。 TensorFlow.jsとは TensorFlow.jsは、Pythonで広く利用されている機械学習ライブラリ「TensorFlow」をJavaScript用にラップしたもので、ブラウザ上で機械学習モデルを手軽に利用できるようにする

「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？　一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。

コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con

前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実

アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると

数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値をカンマ区切りにしたり、日付データを特定のフォーマットに変換したりといったことはみなさんも経験があるのではないでしょうか？ そのような数字や日付を変換するのに便利なのが、JavaScriptのtoLocaleString()メソッドです。このメソッドを使うことで、数値や日付をさまざまな形式に変換できます。この記事では、toLocaleString()メソッドの使い方と、その応用例を紹介します。 サンプルを別ウインドウで開く コードを確認する toLocaleString()メソ

ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるWeb Player（lottie-player、dotlottie-player）を使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTML