CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。特に、Flexboxではつくるのが難しい、縦軸・横軸がある格子状のレイアウトに向いています。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくりながらGrid Layoutの基礎を学ぶ 次のようなヘッダー・メイ

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。

はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 Vue.jsにおいて、Webページのある一部分を構成する実装単位を「コンポーネント」と呼びます。これまでの連載記事では、Webページ全体に対応するコンポーネント（App.vueファイル）を単体で利用してきましたが、より表示が複雑な実際の開発では、1つのWebページを複数のコンポーネントに分割して開発するのが一般的です。そこで本記事では、複数のコンポーネントを利用してWebページを作成する方法を説明します。 対象読者 これからVue.jsに入門したい方 新しいトレンドを常に取り入れたい方 比較的複雑なWebページをV

はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ

富本ディレクター／フロントエンドエンジニア（ビジネス・アーキテクツ）地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。 2021年5月に障害者差別解消法が改正され、2024年4月に施行されることを知っていますか？ 改正法施行後は、民間企業に対しても「合理的配慮の提供」が義務化されます。また、その合理的配慮を的確に行うための「環境の整備」が努力義務となっています。ウェブサイトにおいては、この環境の整備がアクセシビリティを確保することとされています。そのため多くの企業でもさまざまな取り組みがすすめられています。 本記事では、アクセシビリティ確保の指標となる

本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実

TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様

CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ

Web Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える※当サイトにはプロモーションが含まれています。 1. Chrome のローカルオーバーライド機能とは？Chrome の ローカルオーバーライド (Local Overrides) 機能を使うと、Webサイトの一部のファイルをローカルのファイルに置き換えることができます。 これは、すでに公開しているWebサイトを修正する時にとても便利です。ローカルに同じWebサーバー環境を用意しなくても CSS ファイル（やその他のファイル）を調整することができるからです。 2. 使い方1. この機能で使用するローカル側のフォルダーを指定します(1) Chrome を起動した状態で、Ctrl + Shift + I キーを押し、開発者ツールを開きます。 (2) [Sources] タブ – [Ov

最近とあることに気づいた。UXデザイナーポジションへの応募が多いが、そのバックグラウンドがかなり多種多様なのである。 元々Webデザイナーをしていた人もいるし、マーケター出身の人もいる。デザインとは関係のない学部や職種出身の人もいるし、前職がスタバのバリスタのケースもあった。 UXデザイナーの肩書きがインフレ気味最近では多くのデザイナーがUXデザイナーになりたがっている。 どうしてそうなってしまったのだろうか？おそらく、その裏には我々デザイナーの悲しい存在価値がある。 企業におけるデザイナーの存在は、テクノロジーやマーケティングなど、「動くか動かないか」や「数字」で判断される分野とは異なり、デザインは常に数値化が困難な分野。その不透明さゆえに、ビジネスのフィールドにおいて我々の仕事はあまり真剣に捉えてくれない壁があった。 そこで出てきたのがデザインとビジネスを融合させ、結果に繋がるデザイン

CATEGORY GA4 2020年に正式リリースされた「Google Analytics 4（GA4）」。これまでのメインで使われてきたユニバーサルアナリティクス（UA）との違いや、GA4の機能の特徴、GA4の使い方、分析方法などの記事を掲載しています。

ウェブにおけるユーザー体験の向上を目的とした取り組みをグーグルが始めた。「Web Vitals（ウェブ バイタル）」と名付けている。 「バイタル」とは「重要なもの・本質的なもの」という意味で、ウェブ バイタルは「ユーザー体験を良くしていくのに必須の指標に関する総合的なアドバイス情報」として提供していく。 そのウェブ バイタルのなかでも特に重要なものとして、次の 3つの指標を「Core Web Vitals（コア ウェブ バイタル）」として設定している（具体的な基準となる数値は後述する）。 LCP（Largest Contentful Paint） 「最大コンテンツの描画」の意味で、ユーザーの認識としてのページ表示速度を測る指標。 ブラウザの表示範囲内で、最も大きなコンテンツ（画像・動画の初期表示画像・背景画像のある要素・テキストを含むブロックレベル要素など、そのページでメインとなるコンテン

Googleが、Google Chromeで「サードパーティークッキー（3rd Party Cookie）」のサポートを2022年までに段階的に廃止する予定であると発表した。Appleは、Safariで既にサードパーティークッキーを禁止（ブロック）している。他のWebブラウザもおおむねサードパーティークッキーを禁止する方向にあるようだ。そもそも、この「サードパーティークッキー」とは何なのか、何が問題なのかについて解説していこう。 そもそもサードパーティークッキーとは サードパーティークッキーを理解するには、「クッキー（Cookie）」について知っておく必要がある。 クッキーは、Webサイト側からWebブラウザへ渡す小さな「データ片」のことだ。以後のやりとりでは、必ずそのデータをWebブラウザ側からWebサイト側へ戻してもらうようにすることで、Webページを遷移したり、時間を空けて再び訪れた

米Google（グーグル）が数年にわたって開発を進めてきた万能AI（人工知能）、「Pathways」の実力が明らかになった。Pathwaysは1つの機械学習モデルが最大数百万種類のタスクに対応できるという「万能」もしくは「汎用」のAIだ。従来のAIが1モデル1タスクの専用品であるにもかかわらず、タスクを処理する性能は汎用であるPathwaysが上回った。驚くべき威力だ。 グーグルは2022年4月4日（米国時間）、自然言語処理に関する複数種類のタスクを処理できる「Pathways Language Model（PaLM）」を発表した。自然言語による質問応答や文章生成などができる言語モデルと呼ばれるAIをPathwaysによって実装した。言語モデルは近年、BERTやGPT-3などがめざましい成果をあげたことで注目されている。 1モデル1タスクの専用品である従来の言語モデルで別のタスクを処理させ

[レベル: 中級] ユニバーサル アナリティクスのサポートを2023 年 7 月 1 日をもって終了することを Google は公式ブログでアナウンスしました。 アナリティクスのヘルプ記事でも通達が出ています。 ユニバーサル アナリティクスのサポート終了にともない、Google アナリティクス 4 (GA4) への早期の移行を促しています。 今後の流れ ユニバーサル アナリティクスのサポート終了の流れは、大まかに次のとおりです。 2023 年 7 月 1 日までは、ユニバーサル アナリティクス プロパティで引き続き、新しいデータの使用および収集が可能 2023 年 7 月 1 日以降は、ユニバーサル アナリティクス プロパティでのデータ収集が停止 2023 年 7 月 1 日よりも前にユニバーサル アナリティクス プロパティで処理されたデータには少なくとも 6 か月間はアクセス可能 UA

クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data

現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。 パフォーマンスの向上 Nitro engine Composition API Vite Vue 3 Webpack 5 Nuxt CLI TypeScript のネイティブサポート ESM サポート Nuxt devtool(まだ) and more... 上記以外にも新たに追加された機能はどれも興味深いものばかりで今すぐにも使いたいものが揃っています。Nuxt3 で追加された新機能を体験してみましょう！ インストール Nuxt3 からは create-nuxt-app の代わりに新しく Nuxt CLI を使用してプロジェクトを作成します。

Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert