Previous slideNext slideToggle fullscreenOpen presenter view Open UIによるWeb UI標準化への アプローチ ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭＠東京 saku / @sakupi01 saku Web Frontend Engineer @Cybozu 24卒// / > 𝕏 @sakupi01 ブラウザネイティブUIの進化へ: Open UIによるWeb UI標準化への アプローチ Available in EN 1. Open UIとは Open UIの概要 W3C Community Groupの一つ 一般的なUIパターンを体系化して汎用的なUIコンポーネントやコントロールを提案、その技術を標準化する提案に取り組んでいる 独自UIを作るにはどうHTML, CS
概要 CSSでのフォントサイズ指定に使用できる単位にはいろいろなものがあります。 その中でも、先日初めてremを使用する機会があったので、学びの整理として記事にまとめたいと思います。 remとは ルート要素のフォントサイズを1とした時の相対的なサイズ指定を表します。 ルート要素についての記述は以下のとおりです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/html <html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 つまり、<html>に指定されているフォントサイズを1とした時の相対的な文字サイズを表すのがremです。 例 以下のように、<html>に10pxを指定したと
はじめに 昨今、ChatGPTといった生成AIがトレンドですよね。私たちが作っているSynergy!というCRMシステム内でもうまく活用できないかと考えていたところ、メール配信で使うHTMLメールをうまく作れないかと考えました。 今回はどこまでHTMLメールのデザインをAIがやってくれるのかを検証してみたいと思います。 使用エンジン 弊社は生成AIを全社的に推奨しており、ユーザーローカル社の企業向け生成AIプラットフォーム「ユーザーローカルChatAI」というサービスが全社員に提供されています。このサービスでは、セキュアな環境でChatGPTを使用できるため、今回はこちらを使用して作成していきます。 エンジンはChatGPT-4oを用います。 今回の設定 テンプレートを作成するにあたり、化粧品を取り扱う架空の会社という設定でChatGPTに情報を投げかけます。 商品の画像は実際の会社であれ
Greppability is an underrated code metric | Hacker News
Grepping for symbols like function names and class names feels so anemic compared to using a tool that has a syntactic understanding of the code. Just "go to definition" and "find usages" alone reduce the need for text search enormously.For the past decade-plus I have mostly only searched for user facing strings. Those have the advantage of being longer, so are more easily searched. Honestly, post
GTMにおけるCSSセレクタを使ったGA4のクリック計測設定｜Dentsu Digital Tech Blog
１．概要電通デジタル データアクティベーション第2事業部の鈴木です。 Webサイトに訪れるユーザーが何処のボタンをクリックしたのかをGoogle アナリティクス 4（GA4）で計測する際、対象の各リンクに個別でタグを実装するしかないと思われていないでしょうか。 CSSセレクタを使ってGoogle タグマネージャー（GTM）上で設定ができれば、計測対象の各リンクに個別でタグを埋める必要はありません（※1）。 この記事では、GTMにおける、CSSセレクタを使ったGA4のクリック計測設定について記載します。 ※1 Webサイトの変更によって要素名などは変更となる可能性があるため、data属性やdataLayer.pushタグの埋設による計測も併せてご検討ください。 ２．CSSセレクタとはCSS（Cascading Style Sheets）とはWebサイトの各要素のフォントやサイズ、色、レイアウ
The Two Lines of CSS That Tanked Performance (120fps to 40fps)
The Two Lines of CSS That Tanked Performance (120fps to 40fps) First published: 22/08/2024 I recently released Learn WCs. If you’ve seen it, you’ve likely noticed the animation in the background, where the coloured circles move diagonally across the screen. It looks like this: It works nicely on Chrome and Safari, but I noticed a severe drop in performance on Firefox. You might not be able to see
みなさんこんにちは！ デザイナーの ザキノンこと野崎です。 いきなりですが、わたくし、今年の5月に結婚式を挙げました。 会社のブログに書く題材としてはいささか個人的すぎる気もしたのですが、 結婚式を挙げるにあたり とにかくこだわったのが、招待状やウェルカムボードなどをはじめとした、いわゆる「結婚式DIYアイテム」。 デザイナーとしてこだわりを詰め込みまくったアイテムたちをいろんな人に見てもらいたい！！！という自己顕示欲には抗うことができず、今こうしてこの記事を書いています。 そもそも、なぜ結婚式を挙げようと思ったのか 私の場合、人から注目されるのもそんなに好きではなく、写真を撮られるのも正直あまり得意ではない。 ただ、人生で一度くらい、予算を気にせずに好きな人たちを呼んで好きな音楽を流しながら美味しいものを食べるパーティーをしてみたい。そしてそれにまつわるアイテムを全部自分でデザインしてみ
配置方法 グリッドレイアウトは2次元であるのに対し、フレキシブルレイアウトは1次元です。 配置位置や方向 グリッドレイアウトは決められた領域内であれば自由な位置に配置ができるのに対し、フレキシブルレイアウトは水平方向か垂直方向のどちらか一方の方向での配置です。 幅に応じた自動折り返し グリッドレイアウトは幅に応じてアイテムを自動的に折り返すことはありませんが、フレキシブルレイアウトは幅に応じてアイテムを自動的に折り返すことができます。 配置可能なアイテム数 グリッドレイアウトはあらかじめ決められた分割数の領域内で配置するのに対し、フレキシブルレイアウトは特に数の指定がなく無制限に並びます。ただし、グリッドレイアウトは暗黙的に列または行を分割（生成）する機能を持ち、自動的に配置しているときにアイテム数が行列数を超える場合、配置する方向にそって行や列を追加してくれます。暗黙的な分割については見
仕事内容全国の媒体社（放送局）が販売している広告枠情報に対して、各種データ、及び条件絞込み機能を組み合わせた広告枠の検索・分析サービス開発をご担当頂きます。 このサービスは広告会社様・広告主様合わせて約400社以上と幅広いユーザーに利用されており、ページ数や機能も多く、ひとつひとつの開発がお客様の売上とユーザーに大きく影響します。 エンジニアがお客様と直接折衝するケースもあり、お客様の課題ヒアリングからの要求・課題整理からの提案・要件定義などの上流工程から開発・リリース後は運用までと、システム全体を見て開発いただくことができます。 「このやり方の方が顧客体験やサービス運営としてのROIが向上する」など、より良い技術・環境の提案もお任せしていきます。 業務詳細 機能追加開発・部分改修等に関わる提案、要件定義、設計、開発、テスト、リリース まずはサービスの仕様理解、そして小規模の開発から対応い
新人ITエンジニア向け技術習得のコツ - Qiita
はじめに この記事では新人ITエンジニアがどのように技術を学習していくと良いかを 大雑把に 紹介します。 この手の記事は細かく書こうと思うと、無限に細かく書けるので、あくまでも大雑把な方針とか気をつけるべき落とし穴的なやつをざっくりと書いていきます。「具体的で細かいやつが欲しいよ」って人は他の記事を参考にしてください。 免責事項: 本記事は「技術」というスコープに絞ってまとめています。ITエンジニアにとって習得すべき重要な知識や技能は技術以外にもあることにご注意ください。 あくまでも私個人の主観です。ここに書いてあることがご自身には当てはまらない、と感じたら別の指針を探しましょう。 想定読者 次のような読者を想定しています。 IT業界の新人 業界に入ってから、あるいは入る直前からITを学び始めた 技術系のキャリアを目指している 技術習得のコツ タッチタイプを習得しよう 他と比べてかなり具体
8月31日、LogRocket Blogで「Next.js View Transitions API」と題した記事が公開された。この記事では、Next.jsでのView Transitions APIの使用方法とその利点について詳しく紹介されている。 View Transitions APIとは View Transitions APIは、特にナビゲーション中のWebアプリケーションのユーザー体験を向上させるための新しいブラウザ機能だ。このAPIを使用すると、DOM状態の変化やページ間のナビゲーションにおいてスムーズなアニメーションを実現できる。 従来、WebアプリケーションでのトランジションにはJavaScriptやCSS、さらには多くのライブラリが必要だったが、このAPIを使うことで、標準化された方法でトランジションを簡単に実装できるようになった。これにより、複雑さが削減され、アニメー
Lenisで慣性スクロールを作るメモ
Lenisで慣性スクロールを作るメモ Lenis.jsを使用したら、慣性スクロールという挙動が簡単に実装できると聞いたので、お試しにページを作るメモ 初期設定 インストール npm i lenis CSSファイル おすすめでCSSを書く。書いた場合は読み込むのを忘れないようにする html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS 目標 PandaCSSデフォルトのテーマに組み込まれているColorsトークンの値をPrimaryカラーに設定し、primary.${shade}という色合い(Shade)を持つトークンとして利用できるようにすること。 import { css } from "../styled-system/css"; const style = css({ color: "primary.600" }); import type { PropertyTypes } from "../styled-system/types/prop-type"; const shades = [50, 100, 200, 300, 400, 500, 600, 700,
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
「ホームページの必要性は理解している…しかし、ホームページ制作には時間と費用がかかる…」このようなお悩みを抱えている小規模ビジネスの経営者は多いのではないでしょうか。そんな時に役立つのが「ノーコード」ツールです。ノーコードツールを使えば、プログラミングの知識がなくても、誰でも簡単にホームページを制作することができます。 ノーコードツールを使ったホームページ制作は、小規模ビジネスオーナーにとって有力な選択肢の一つです。この記事では、ノーコードツールを使ってホームページを制作するための基本について詳しく解説していきます。 ノーコードでホームページ制作を始めるための基本 そもそもノーコードツールとは何なのか、そしてどのような機能があるのかを解説します。 ノーコードツールとは？ ノーコードツールとは、プログラミングの知識がなくても、ドラッグ＆ドロップなどの視覚的なインターフェースを使ってウェブサイ
ホームページを作成したいが、何から手を付ければよいのかわからない webアプリケーションの基本的な仕組みを学んでほしい んHTML/CSSを使用して基礎的なウェブページを作成できるようになってほしい ホームページの修正などを行えるような基礎的な知識を身に付けてほしい Webデザイン研修の概要 Webデザイン研修では、Webデザインを行うにあたって必須となる各種スキルを習得するための研修です。HTMLを始めとしてフレームワークの習得などを行うことにより、より簡易的にWebサイトの開発が可能となります。 Webデザインを学ぶメリット・目的 Webデザイン研修を企業で実施するメリットや目的は以下の通りです。研修を受講してもらうことで企業にとってもメリットが大きいことがわかります。 最新技術の習得 Webデザインの分野は常に進化しています。研修を受けることで、最新の技術やツールを学び、チームのスキ
初心者の方が自分でホームページを作るのであれば、WordPressの活用がおすすめです。 WordPressを活用することで、HTMLなどの言語知識がなくても、自分で更新ができるホームページを作ることが可能です。 当ページでは、初心者がWordPresssを利用するメリット、成果を出すための方法、ホームページの作り方、運営法、分析ツールを紹介します。 初心者がWordPressを利用するメリット 自分でホームページを制作できるツールは多くリリースされています。 その中でも、初心者の方が自分でホームページを作るのであれば、WordPressがおすすめです。 WordPressを活用することで、HTMLやCSS、JavaScriptの言語を知らなかったとしても、自分で更新ができるホームページを作ることが可能です。 さらに、自分でホームページを作っても、ユーザーのために運営を継続していれば、高い
vercelのv0(ブイゼロ)を試してみた
お疲れ様です。 Jimmyです。 Difyも今いろいろ試しているのですが、 週末v0を試してみました。 概要 v0は、プログラミングスキルがなくても、AIの力を活用してユーザーインターフェース（UI）を生成するツールです。従来のUI設計では、デザインスキルやコーディング知識が必要でしたが、v0ではそれらの障壁を取り除いています。 v0の主な特徴は以下のとおりです。 テキストのみでサイト・アプリを構築 shadcn/uiとTailwind CSSをベースにReactコードを生成 最新のNext.js・Reactに対応 Web上の最新情報を学習 プロダクトは公開可能 参考画像をもとにUIを構築可能 ↓引用 試してみた 上記参照しているものと同じものですが、電卓applicationを作成してみます。 Please create a calculator app that can perform
public beta になった v0 を試してWebサイトを作る
v0 とは v0 は vercel 社が提供する React ベース[1]の UI を作ることができる生成 AI サービスです。 こちらの指示をもとに、 shadcn/ui や tailwind を使って UI を構築することができます。 先日、public Beta 版が公開され、会話形式で UI を逐次生成できるようになりました。 これまでは、プロンプトを v0 に投げると数パターン実装例を提案してくれていましたが、 ついに会話でやりとりをしながらコンポーネントをブラッシュアップしていくことが出来るようになりました。 早速ログインして試してみます。 できることとしては下記の通りです。(2024年9月1日現在) ジェネレーティブAIを使って、shadcn/uiとTailwind CSSに基づいたコピー＆ペーストしやすいReactコードを作成します。 プロンプトを送信するか画像をアップロー
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
ユーザーが様々な端末からwebサイトにアクセスするようになり、ブラウザのサイズによってレイアウトを変化させていくレスポンシブデザインは、webサイト製作における基本的なデザイン思想として、我々web製作者の間に定着しています。 今まではPCデザインとタブレット以下のブラウザサイズのデザインでコンテンツのレイアウトを変えるという手法が一般的でしたが、最近、モバイルファーストの波を受けて、PCでもスマホと同様のレイアウトを表示する形のデザインを起用する会社も増えているようです。 今回は、PCとスマホでコンテンツのレイアウトは変えずにデザインを工夫しているサイトをご紹介します。 いざ、居酒屋。ネオイザカヤ | niko and … サイトURL：https://www.dot-st.com/cp/nikoand/neoizakaya ポイント コンテンツは中央に配置 PCの場合は左側に大きくロゴ
【GettingStarted with IRIS】チュートリアルを始めよう！その1：Full Stack チュートリアル
【GettingStarted with IRIS】チュートリアルを始めよう！その1：Full Stack チュートリアル 開発者のみなさん、こんにちは！ 2023/2/21追記 チュートリアルページが新しくなり「Developer Hub」に変わりました！ Full Stackチュートリアルの開始方法や他のチュートリアルについて詳しくは、「InterSystems Developer Hub：クリック1回で開始できるチュートリアル（4種）のご紹介」をご参照ください。 この記事では、GettingStarted ページの無料体験環境（Sandbox）で試せるチュートリアルの中から、「Full Stack Tutorial」の使い方をご紹介します。 GettingStarted ページでできることについては、こちらの記事でご紹介しています。 無料体験環境（Sandbox）の開始手続きについて
（＊価格は掲載時のものです。購入時にご確認ください。）
Microsoft 365 SharePoint で HTML を見るためのビューワーが実装されました - （）のブログ
SharePoint のドキュメントライブラリでの HTML の扱いは、ちょっと前まで直接表示することはできず HTML がダウンロードできるだけとなっていました。 しかしながら 2023 年 8 月にどうもビューワーでの表示が解禁されているみたいです。 具体的には以下を見てください。 ドキュメントライブラリに index.html を配置してみた後に、そのファイルをクリックしてみました。 すると、 PNG など写真を見るビューワーと同様の機能が立ち上がり、ブラウザのように HTML を見ることができるようになったようです。 表示はテーブルなどをサポートしており、リンクも飛べるようにはなっていました。 しかし、ビューワーの場所をもとにした相対パスとなるようで、 URL に /Forms/ が組み込まれるので注意が必要です。 例えば css を相対パスで指定している場合は本来以下のように色が
subgridが便利だった話 - Qiita
はじめに みなさん、下記のようなコンポーネントをどうやって実装しますか？ カードが３つ横並び タイトルの長さがデータによって異なる 説明の長さがデータによって異なる タイトル、説明、ポイントラベルそれぞれの上辺を揃える 結構厄介なUIなんですが、全モダンブラウザ対応になったCSSのsubgridを使うととても簡単に実装できたので、その紹介をしたいと思います！ 対象読者 subgridに興味がある subgridのユースケースを知りたい subgridの実装例が見たい 動作環境 node v18.12.1 vite v4.4.5 vue v3.3.4 前提 今回紹介するソースコードは下記リポジトリで公開しています。 実装例1: 制御しない まずはコンポーネントを作成していきましょう。 ３つのカードはsectionタグで囲って、gridを使って横並びにします。 カードはflexを使って中の要素
Avalonia UI 超入門
この記事は「Avalonia UI」を 入門する前に読む"超入門" です。 本当に触りだけなので、ちゃんとした入門は公式のマニュアルの入門を読んで下さい! 🔰 Avalonia UI ってなに？ 読み方：アヴァロニア ユーアイ UIフレームワーク .NET環境向け (C#/F#/etc...) .NET Standard2.0対応 最新の.NETでも古い.NET Frameworkでも動かせる オープンソース、無料 クロスプラットフォーム ℹ️ Avalonia UI の特徴 10年以上の歴史がある 最新はv11.1（2024年9月現在） 程よく枯れてていい感じ WPF（Windows Presentation Foundation）によく似てる 体感７割が同じ でも似てるだけで互換性はないよ WPFを知ってるととっつきやすい（ノウハウが使える） UIはOSのものを使わず独自描画 どこで
こんにちは、Webサイト分析ツール「アナトミー」開発チームの宇都宮です。 Googleのサーチコンソール内のCore Web Vitalsレポートでは、ユーザーエクスペリエンスの測定状況を確認することができます。問題があると、低速であり改善が必要とされるページが指摘されることがあります。当記事では、Core Web Vitals の中の指標の一つ、LCP（Largest Contentful Paint）に着目して、指標の概要と確認方法、改善方法を実際のページを計測した結果を例にしながら解説していきます。 SEOの基本知識についてはオンラインセミナーで解説しています。セミナーではGoogle公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください。 LCP（
概要 地図アプリを開発していますが、たくさんの地図画像（PNG）が必要になりました。 「Python 用ライブラリの staticmap を使って OpenStreetMap の画像を取得する」方法を使っていましたが、Leaflet地図のデザインが今一つ（すみません。個人の主観です）なので、別の地図画像を探していました。 Geoloniaさんの地図は、月20,000回まで無料で地図を表示できますし、開発環境なら制限を気にせず無料で使えるので、ありがたいです。デザインも素晴らしく、こちらを使わせていただくことにしました。 Geolonia 料金 最初はCanvasをtoDataUrlメソッドで取得できると考えていましたが、透明な画像しかキャプチャできず困っていました。Geoloniaの中の人に相談したら、「@geolonia/mbgl-export-control」というパッケージを紹介して
Tags: #ブログ #プログラミング #HTML #CSS #JavaScript #FreeMarker #検索 #2024年9月 Published on: 2024-09-03T11:00:00+09:00 Updated on: 2024-09-03T12:48:00+09:00 こんにちは、鈴木俊吾（すずしん）です。 あなたは、ブログに検索機能を追加したいと思ったことはありませんか？ この機能を追加することで、読者が特定のキーワードに関連する記事を探しやすくなります。 利便性が上がって、読者の満足度もきっと向上することでしょうね。 ブログのPVも増えるかもしれませんし、検索機能を追加しておくと、いざというときに便利です。 やっておいて損はないと思います。 というわけで…。 このたび、私は自作ブログをカスタマイズしてみました。 具体的には、タグ検索機能を追加しました。 キーワード
ChatGPTはAI分野で大きな注目を集めているサービスですが、WebサイトのURL読み込みに対応していないという欠点があります。しかし、実はChatGPTにWebサイトのURLを読み込ませることができる裏技があります。本記事では、ChatGPTでURLを読み込ませ、Webサイトの情報を取得する方法を詳しく解説します。具体的な操作手順に加え、URL読み込みの仕事でのユースケースもご紹介しますので、ChatGPTの機能をフル活用して、業務の効率化に繋げましょう。 目次 開く ChatGPTでURLを読み込ませる方法 方法1: URL先のテキストをコピー＆ペーストする 方法2: プラグインを活用する ChatGPT×Web検索のユースケース8選 ChatGPTでURLを読み込ませる際の注意点 情報が正しいかどうかを確認する 個人情報や機密情報の取り扱いに注意する ChatGPTとWeb機能をう
HTML＋CSS+JavaScriptの必要性を実感
は～い、IT好きなメグミンです。 勉強していて感じたことは、HTML＋CSS+JavaScript、この組み合わせは、Web関係では軽視できないものと考えています。 しばらくの間は、インターネット上の情報を見るためにはブラウザで表示できることが必須ですし、それに必要なのがHTMLやCSS、JavaScriptなのです。 ある程度のスキルを身につけておくことは決して無駄にはならないと、私は確信に近いものを感じています。 自分の思い通りのサイトが手軽に作れるようになれるまでは、勉強を続けていきます。 頑張ります。 MuuMuu Domain! 独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】 【GOM Mix】初心者でも簡単な動画編集ソフト WordPress専用クラウド型レンタルサーバー『wpX Speed』 サイトに広告を掲載してお小遣いが稼げる！【A8.net】 mixhos
★ ■ 縁土＜エン♣ド＞編 カンブリアンの章 ■ ★作者からのひとこと・・・ 昨年末（2017）からDEEP Skyの第二弾（パート2）のデジタル漫画の制作に入りました。 パート2の制作前には、企画を練り直すため 物語の構成を考えるために 絵コンテ（ストーリーボード）を制作することにしました。 しかしその後体調不良のため 本編の制作は中止し、絵コンテの制作のみを「絵コンテ脚本」として現在制作しています。今回はその作品を「週刊SHORT漫画ぷらす」として 掲載していきたいと思いました。 なお「真♠義羅＜シン・ギラ＞神話」はDEEP Skyを制作中、設定をつくる上で副産物としてうまれたスピンオフの作品と本編をひとつにしたものです（DEEP Sky STORY シリーズ）。 これは「この時代にあった新しい神話をつくる」というコンセプト（シン・神話）で「DEEP Night」「DEEP Fo
デベロッパーツールが開いたら、デベロッパーツールの左上にあるスマホとタブレットの図が描かれたアイコンをクリックしてください。 クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。 その上の青枠内には現在の解像度が表示されており、以下の画像では460✕1213での見え方になっています。 ここに表示されている数字はpoint（CSSピクセル）です。 1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。 デベロッパーツールのスマホアイコンをクリック もう一度スマホとタブレットの図が描かれたアイコンをクリックとPC表示に戻ります。 デバイスを選択して表示する大きさを変更する デベロッパーツールには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。 202
みなさんこんにちは。 入社2年目のファイナンシャル・ソリューション開発部のさらぴょんです。 4月に現在の部署に配属されて、もう半年になります。 私は初めてITの仕事に挑戦するにあたり、技術や知識がほとんどない状態で入社しました。そこから新入社員研修を受けた後、まだ不安が残る中で実際の案件に参加しました。 今回は、その過程で感じたことや取り組んできたことについてお話させていただきます。 初めて案件に配属をされて 取り組んだこと 調べてから質問をする 真似をする 手順をまとめる 最後に この記事を書いた人 初めて案件に配属をされて 初めての案件に配属されたときは、正直不安しかありませんでした。 業務についていくことができず、上司や先輩に迷惑をかけてしまわないだろうか、自分のスキルや知識が本当に十分なのか、与えられたタスクをすべてこなすことができるのかといった疑問で頭がいっぱいでした。 そんな技
Zag.js が良いかもしれない
Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内
ホームページリニューアルでSEO上やってはいけないこと・やるべきこと｜大阪のホームページ制作会社セブンデザイン
ホームページリニューアルは、慎重に行わないと、SEOに大きな悪影響を及ぼす可能性があります。 そのため、ホームページリニューアルでは、どのような対策を行えば、SEO効果が下がるのか上がるのかを理解してから取り組むことが大切です。 当ページでは、ホームページリニューアルでSEO上やってはいけないこと、やるべきことを解説します。 ホームページリニューアルでSEO上やってはいけないことを解説します。 ページ数を減らす ホームページリニュアルでページ数を極端に減らすことはSEOリスクがあります。 Google曰く、404はSEOに影響がないとのことですが、少ないページ数であれば問題がないのですが、削除したページ数が多いほど、サイト全体の関連性が低下してしまい、SEO効果が落ちてしまいます。 そのため、ホームページリニューアルでは、例えば、「過去に提供していたサービスだけどもう行っていない」などのユ
（＊価格は掲載時のものです。購入時にご確認ください。）
はじめに こんにちは！😄 Chrome129より、JavaScriptのScrollSnapに関するイベントを使用できるようになりますね！今回はこれらのイベントについてご紹介していきたいと思います。 ScrollSnapとは そもそも「ScrollSnapってなんやねん。」という方もいるかと思います。百聞は一見に如かずということで以下のような操作のことを指します。 cssプロパティscroll-snap-typeを指定することでScrollSnapが可能になります。上記の例では以下を適用させています。(詳しくはこちら) スマホやタブレットの台頭に伴って、タッチ操作でスワイプさせる場面が増えてきました。ScrollSnapを導入することでUX向上につながります。 そして、Chrome129からScrollSnapが完了したときに発生するscrollSnapChangeイベントと、Scrol
こんにちは。 この記事では、できるだけ読み物として面白いように時系列にまとめたリアルなエッセイとして、またできるだけ個人開発者の参考にもなるよう技術スタックも時折説明しながら執筆しています。 そのため、非プログラマの方は具体的な技術の話が出てきたらそこだけ読み飛ばしてもらえたらと思います。 この記事は私が個人で開発しているWebアプリ『小テストジェネレーター』と『暗記カードと辞書』（iOS版）（Android版）の開発の経緯をまとめたエッセイです。タイトルには収益を書きましたが、収益以外に手に入れたものについて、書いています。 アプリは日本全国の教員、学生の方々からフィードバックをもらいながら一緒に育てています。そのストーリーを「A面」とするなら、この記事は私ひとりの個人的なストーリーをまとめた「B面」のようなものです。 新卒時代〜塾を立ち上げるまで 私は2015年に関西学院大学国際学部を
videoタグを使って動画を埋め込む | 電脳情報局
オススメ！PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装：CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery：アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ（操作/設定）2020年10月29日 HTML 動画の埋め込み MP4の動画をサイトへ埋め込む時にvideoタグを使用すると簡単に行えます。 今回はvideoタグの使い方などの紹介をいたします。 videoタグについて video要素はHTML5で新たに登場した要素です。 HTML5ではvideo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Open UIによるWeb UI標準化へのアプローチ
フォントサイズを表すremって何者!? - Qiita
生成AIを使ってメールデザインをしてみる - TECHSCORE BLOG
もはや執念！？デザイナーが本気の結婚式DIYをしてみた話 - 意匠部
実はそれほど難しくない、CSS Grid Layoutの使い方 | 株式会社大塚ビジネスサービス
エンジニア【DX領域事業の自社サービス】 | ビデオリサーチグループ
Next.jsでView Transition APIを使おう — WebページのUXを大幅に向上させる新たなブラウザ機能
Panda CSSでPrimaryカラーにデフォルトのパレットの色を設定する - Qiita
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
ホームページ制作を自分でノーコードで！必要なツールと手順を徹底解説
Webデザイン研修【制作スキルを磨く】:社員研修のリスキル
初心者向け！WordPressで始めるホームページ作りと運営法｜大阪のホームページ制作会社セブンデザイン
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
PCもスマホも同一に！注目のWebサイトレイアウトデザイン - 株式会社FURAZOA（フラゾア）
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年9月6日)
LCPの問題とは：スコアの確認方法、改善方法を解説します | ページスピード改善 | テクニカルSEO BLOG
Geolonia Mapsを画像でダウンロードして著作権表示して使う方法 - Qiita
自作ブログの機能追加：タグ検索機能の実装方法 | スズシンラボ
【2024最新版】ChatGPTでURLを読み込む方法とは？プロンプトも合わせて解説！
『週刊SHORT漫画ぷらす 真・義羅神話＜DEEP Sky STORY＞2 第六章 vol.019』
PCでスマホ表示に切り替える方法 - Chrome Edge Firefox
IT未経験の私が、初めて案件に参加した話 - シー・エス・エス イノベーションラボ（ブログ）
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年9月3日)
【Chrome129】ScrollSnapイベントがやってくる！
ただの塾講師がプログラミングを独学して個人開発で月20万円稼ぐまでの話｜Kengo KOSAKAI