Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？　コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです

高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので 2024年8月20日最新のバージョンはのAstro4.14.2です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astroですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発が行われています。 本文書では公開当初は

さまざまなページでユーザー体験を改善するために使えるテクニックとしてレイジーロード（lazyload）とスムーススクロール（smoothscroll）があります。

Web技術の急速な発展により、インターネットを通じて様々な情報を得たり、多くの業務をこなしています。 私たちが普段利用しているWebサイトやWebサービスは、インターネットの向こうにあるWebサーバから配信され、ブラウザ上に表示されます。Webサイト／サービスにとって、Webサーバーは 必要不可欠な存在なのです。 今回の記事では、Webサーバーの概要をはじめ、Webサーバーの仕組みやシェア率、サーバーごとの特徴についてわかりやすく解説していきます。現在、主流となっているWebサーバーの種類と特徴を理解して、適切なWebサーバーを選ぶことが重要です。 Webサーバーとは？ インターネットが普及し、誰でも簡単にWebサイトを持てる時代になりました。また、ほとんどの企業は、自社HPや自社メディアを運営するためにWebサイトを構築し運用することが一般的になってきています。 本章では、Webサーバー

ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b

Web Almanac HTTP Archiveの年次報告書 ウェブの状態レポート 私たちの使命は、HTTP Archiveの生の統計やトレンドを、ウェブコミュニティの専門知識と組み合わせることです。Web Almanacは、実際のデータと信頼できるウェブの専門家に裏付けられた、ウェブの状態に関する包括的なレポートです。2022年版は、ページコンテンツ、ユーザー体験、パブリッシング、配布などの側面を網羅した23の章で構成されています。 探索を開始 注目の章 SEO ページのHTMLにおける構造化データの実装は増加の一途をたどっています。2021年には、デスクトップページの41.8%、モバイルページの42.5%が構造化データを使用していました。2022年には、HTML内に構造化データを持つデスクトップページの44%、モバイルページの45.1%に上昇しています。

概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

こんにちは。Gaji-Labo 横田です。今日は、Tailwind CSS を採用しない方がいいかもしれないユースケースを考えてみました。 併用するオリジナル CSS や他のフレームワークが存在するたとえば Shopify のような SaaS の場合、テーマごとに独自の CSS が含まれています。また運用中のサイトやサービスであれば、オリジナルの CSS や、採用済みの CSS フレームワークや設計、ルールが存在します。このようなベースとなる別の CSS ありきに Tailwind CSS を後から導入する場合、 class 名に接頭辞をつけるなどの工夫で既存の CSS と区別しながら併用することはもちろん可能ですが、以下のような開発コスト・運用コストを同時に考慮する必要があると思います。 @tailwind base; を読み込むと既存のリセット系スタイルに影響を及ぼすケースがある。結果

目次 こんにちは、CADDi でフロントエンド エンジニアをやっている桐生です。この記事は CADDi Advent Calendar 2020 の7日目の記事になります。 昨日の記事はモリさんの あえてケイスケ・ホンダのようなデザイナーになるには でした！まだご覧になっていない方はぜひ目を通してみてください！ 本日は、最近触っている tailwindcss についてお話できればと思います。 [toc] tailwindcss とは tailwindcss は数あるCSSフレームワークの1つですが、Utility first というアプローチでスタイルを組み上げていく点がユニークで、OOCSS, BEM, SMACSS など、これまでのCSS設計アプローチとは考え方が大きく異なります。 tailwindcss では p-6, max-w-sm などの CSS class を utility

Tailwind CSSの設計思想を業務に活かす 前編 Tailwind CSSとそのCSS設計思想とは 前編後編の2回に分けて、CSSフレームワークのTailwind CSSとそのCSS設計思想を参考にしたCSS設計を話し合います。前編はTailwind CSSの設計思想とその特徴を語ります。 はじめに 最近話題に上がることも多いCSSフレームワークのTailwind CSSを取り上げ、CSS設計の課題やその解決方法の糸口を探っていく座談会です。 座談会はゲストとして、Tailwind CSSの作者のブログを翻訳した安田 祐平さんをお招きして行われました。 参加者は次のとおりです。 安田 祐平さん（株式会社シフトブレイン：フロントエンド・エンジニア） 中村 享介（株式会社ピクセルグリッド：Jamstackエンジニア） 高津戸 壮（株式会社ピクセルグリッド：フロントエンド・エンジニア） 坂

Noto Emoji is an open source font that has you covered for all your emoji needs, including support for the latest Unicode emoji specification. It has multiple w