Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Mic King @iPullRank Ok, let's get this party started! A couple weeks ago I said I was publishing the most important thing I ever wrote. I was wrong. Documentation related to the Google Search algorithm leaked and I spent the weekend tearing it apart. ipullrank.com/google-algo-le… ✌🏾 2024-05-28 11:10:19 数週間前、私はこれまで書いた中で最も重要なものを発表すると言いました。それは間違いだった。 Google検索のアルゴリズムに関するドキュメントが漏洩したため、私は週末をかけてそれを徹底的に調
デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Adobeツールの乗り換えを検討し始めたけど、 「どこで見つければいいの？」「どんなツールを選べば後悔しない？」「代替ツールのいいところって何だろう？」「乗り換えのタイミング今なのか？」「費用の違いはどのくらい？」 普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリストとなっています。 Adobe Creative Cloudソフトから乗り換えたいと考えているひとへ どんな代替ツールがあるか知りたいひと いろいろツールを見たけどピンとこないひと 自分にあったツールが知りたいひと 代替ツールへの乗り換えで失敗したくないひと 目次Photoshopの代替ソフトIllustratorの代替ソフトPremiere Proの代替ソフトAfter Effectsの代替ソフトAdobe Creative Cloudの代替ツール Photoshopの代替ソフト 1. A
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、主要クラウド/PaaS編（2024年版）
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、主要クラウド/PaaS編（2024年版） いくつかのクラウドサービスでは、新規ユーザーに対する1年程度の無料トライアルや一定額のクーポンなどの提供だけでなく、期限の制約なくずっと無料で提供される、いわゆる「Free Tier」や「Always Free」と呼ばれるサービスが提供されています。 こうしたサービスは評価や一時的なテスト環境、あるいはホビー用途などに適しています。 本記事では期限の制約なく無料で提供されている主なクラウドサービスを、2024年版としてまとめました。（有料サービスの追加機能として無料で提供されているものは除外しています）。 ただしこれらの無料のサービスは、提供側の都合により一時的に申し込みや利用が制限されたり、提供が終了することがあります。提供側の都合に留意しつつ、良心的な範囲でご利用いただ
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため）
AIUI.me - Screenshot to code
Transform any screenshot into a fully functional, reusable component with just a single click.
こんにちは！株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「生成AI」はほぼ初めて！というWEBデザイナーの方が、業務で使える活用術をご紹介します。 まずは基本的な使い方の習得を目指しましょう！ 今回は主にChatGPTを使った業務の効率化方法をお伝えします。 私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね！ 1. 生成AIを使うリスクとは？はじめに、生成AIを使う上での注意点をお伝えします。 漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。 主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。 1. データの
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトークンの署名検証をして、IDトークンの改ざんが無いか確認する - Http Only属性：JSによるCookieへのアクセスを防ぐため - Secure属性：流出防止のため - SameSite=strict：CSRF対策のため 結論から言えば、「どちらでもよい」となります。しかし、恐らく話は
Our world-class embeddings for search, RAG, agent systems.
[レベル: 初級] パソコン用 Googlebot によるクロールとインデックスを 2024 年 7 月 5 日以降 Google は完全に終了します。 検索セントラルブログでアナウンスがありました。 ウェブサイトをクロールするのは スマートフォン用 Googlebot だけ 2023 年 10 月末に、モバイル ファースト インデックスへの移行が完了したことを Google は宣言していました。 しかし実際には、モバイル ファースト インデックスに対応できていないごく一部のサイトについては、パソコン用 Googlebot によるクロールを継続していました。 ですが、2024 年 7 月 5 日以降は、モバイル ファースト インデックスに対応していないこうしたサイトのクロールもスマートフォン用 Googlebot で実行します。 もし、スマートフォン用サイトのコンテンツを省略していたり、あ
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
ヒアリングに行くのではない。最初から価値を与えること。これは、プロジェクトの初期対応でデザイナーが取るべき基本的な態度です。 今回のテーマは、デザインの初期対応。その効果的な動き方を紹介します。 デザインプロジェクトのスタートは、他者から依頼を受ける場合と、デザイナー側から提案を始める場合の２つのパターンがありますが、今回はそのうちの「デザイナーが依頼を受けるパターン」について。 初期対応の時点で、デザインの成果の半分は決まってしまいます。それくらい重要なものですが、なせかデザインの世界ではあまり論点化されていません。自分の経験が何かの役に立てばとの期待を込めて。どうぞ。 ヒアリングじゃない。ディスカッションだ。依頼や問い合わせを受けてデザイナーが初期対応すること。これをヒアリングと呼ぶこともありますが、それには注意が必要です。 最初に関係性が固定されるヒアリングに行く。情報を聴きに行く。
[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
cronはUnix系オペレーティングシステムのジョブ管理ツールで、タスクをスケジュール指定して定期的に実行させることが可能ですが、スケジュール指定の際に使用するcron式をすぐに読み取るのは難しいものです。「Cron job editor」はcron式を人間が読み取りやすいカレンダー形式に可視化してくれるサイトとのことなので、実際にどんな感じで使えるのか確かめてみました。 Cron job editor: multiple cron jobs, calendar view, AWS & Vercel cron support | CronTool https://tool.crontap.com/cronjob-debugger サイトにアクセスすると下図の画面になりました。左上にはUNIX系OSの「crontab」の仕様と、秒・年・ワイルドカードなどを加えた「拡張cron式」の仕様のどち
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回のテーマは「GPT4oを活用したウェブサイトづくり」です。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は先日OpenAIが発表した新たなAIモデル「GPT-4o」を使ってウェブサイト（LP）を作成してみました。GPT-4oのパフォーマンスを知ること、そしてデザイナーが生成AIとどう関わっていくべきかを探るきっかけにすることが、今回の目的です。 前提として「GPT-4o」がゼロベースでウェブページを作成することに向いているツールではないと思いますが、チュートリアルの要素と今後の可能性を知るためにあえて取り組んでみました。 GPT-4o
こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか
www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ
2日でファン限定支援サイトを作った話
はじめまして。新時代IP創出事業を手掛けるsaipと申します。 普段は社員3人のスタートアップ株式会社TrippyでCCO兼CTOを務め、生成I受託事業の傍ら、AIキャラクターとのゲーミフィケーションされたコミュニケーションが楽しめるアプリ「Oz-オズ-」を開発・運営しています。 最近、「Oz-オズ-」のキャラクターのプロモーションのためにXで発信し始めた漫画の後日譚的コンテンツがメンバーシップ制で楽しめる「Oz Fanz」というWebサイトを思い立って2日で公開しました。 この記事では、どのような技術スタックを用いてそのような高速開発が可能になったかを公開し、皆様からのご鞭撻をもとに、粗いシステムを改善していこうという魂胆です。私のWeb開発歴は1～2年くらいなので、かなり考慮漏れが存在しています。テストを一切書いていないなど…。 選定の方針 あまり資金に余裕がないので、コストを極力抑え
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
Instrument | Digital marketing, branding and product experiences | Instrument
ネットの飽きやすい人を惹きつけるコンテンツ作り解体新書（前編） | Moz - SEOとインバウンドマーケティングの実践情報
読みたくなるコンテンツにするための原則 1 ケンカを売る私は2019年、長文のFacebook広告コピーについてCopyhackersに書いたブログ記事が、その年のマーケティング記事トップ45に入ったというメッセージをLinkedInで受け取った。 サラ、こんにちは！ このたび、2019年のデジタルマーケティング記事トップ45という記事を公開しました。 あなたのブログ記事、「画像は不要： Facebook広告では長い広告文でも効く（Forget the Images: Long Copy for Facebook Ads Works）」がランクインしました。おめでとうございます。 あなたのブログを取り上げた記事はこちらです。 ニコラス 私はこれを読んで、まず次のように思った： ありがたい、どのようにして選ばれたのかはわからないが、自分の記事がランクインしたことをソーシャルメディアで自慢して
こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 ChatGPTの新モデルで「ブラウジング機能（インターネットから最新情報を取得して提供する機能）」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTにヒューリスティック診断してもらうことができるのでは…？と思って試した結果や実際に使用したプロンプトをご紹介したいと思います！ ※ヒューリスティック診断：ウェブサイトやアプリのUI・UXを特定の評価基準に基づいて分析し、潜在的な問題点や改善点を特定するもの ChatGPTのヒューリスティック診断結果実際にChatGPTで行ったヒューリスティック診断結果がこちら！ 今回はアジケのサイトで診断をしてみましたが、きちんとウェブサイト上の情報を参照した結果が
タブUIをアクセシブルにする
どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
Googleの検索アルゴリズムの内部資料が漏洩か？「SEO業界で長年疑われていたものが明らかに」
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
【乗り換え】Adobeソフトに代わるベストな代替ツールはこれ【早見表つき】
ウェブサイト制作では、游ゴシックはおすすめしない理由
無料で商用にも使える日本の郵便番号APIをリリースしました
WEBデザイナー向け！はじめての「ChatGPT」で業務効率化をするヒント｜toto｜Rabee.inc
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトーク
Reader API
Google、パソコン用 Googlebot によるクロールを完全に終了。 2024年7月5日以降
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
ヒアリングを超えていく、デザインの初期対応｜大﨑 優｜CONCENT
無料でcronの設定を簡単に作成しカレンダーで可視化できる「Cron job editor」 - GIGAZINE
UIUXデザイナーが「GPT4o」を活用してウェブサイトをつくってみた
ページに抑揚をつける「背景切り替え」のデザインアイデア｜nanami
静的ウェブサイト作成ガイドは個人サイト再興に資するか - YAMDAS現更新履歴
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
codefolio | Webコーディングの参考になるパーツ集・ギャラリーサイト
https://searchengineland.com/google-search-document-leak-ranking-442617
ChatGPTにヒューリスティック診断させてみた｜Dods｜UIUX改善支援