2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
AstroでWordPressを爆速Headless化してみる - Qiita
最近流行りのAstroフレームワークで、WordPressの静的Headless化がかなりお手軽にできたのでまとめてみました。 開発環境 Astro 2.0 WordPress 6.1.1 Local node 18.12.1 Mac OS 13.2(Ventura) Visual Studio Code(Astroプラグイン入り） Astroとは？ Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。 (公式ドキュメントより) LocalでWordPressを構築 まずLocalを使って、ローカル環境にWordPressを構築します。 サイト名 Astro Blog（お好みで） サイトドメイン astro-blog.local WordPressの設定 WP AdminでWordPressのダッシュボードを立ち上げ、いくつかの
デスクトップでの左サイド垂直ナビゲーション： スケーラブル、レスポンシブ、流し読みしやすい
垂直ナビゲーションは幅広いIAや拡大中のIAに適しているが、水平ナビゲーションよりもスペースを取る。このナビゲーションは、左揃えにして、キーワードを先に出し、すぐ目に入るようにしておこう。 Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan by Page Laubheimer on May 16, 2021 日本語版2021年10月11日公開 UXカンファレンスの情報アーキテクチャに関するコースで幅広の階層構造について話すたびに、以下の2つの質問が出てくる： グローバルナビゲーションの最上位カテゴリーが7～9個以上あってもよいか。（ネタバレ注意：それは問題ない。ただし、そのための適切な計画を立てる必要がある） 最上位カテゴリーの数を多くすると、水平ナビゲーションバーに収まらない。
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 | BUILD Journal
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
IE11 サポート終了の歴史 | blog.jxck.io
Intro IE11 が役目を終えていく流れを記録として残す。特に MS からのアナウンスや、それに準じた各サービスの反応、特に IE サポート終了アナウンスをまとめることで、 IE11 というブラウザがどのように終了していったのかのを記録することを目的とする。 もともとは Google Docs にまとめていたものである。 日付はアナウンスの公開日 サポート終了日ではない サポート終了日も書いておけばよかったけど今からやり直す気力はない、、 赤字 は MS 関連もしくはサポート終了の影響が大きそうなアナウンス Windows における IE11 自体のサポート終了については以下を参照 https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html できればある程度の結論が出るまでこのエントリを更新していきたい 追加リクエスト 本エ
ウェブ・ユーザビリティの簡単9原則 | knowledge / baigie
ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
「別タブで開く」リンク(target="_blank")は脆弱性あり？【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりやすく解説する。 ほかにも今回は、SEOコンサルタントを採用するときのポイント、グーグル検索に有利なCMS、AMPストーリーのSEOなどなど、幅広い観点からSEOの理解を深められる情報をまとめてお届けする。 SEOコンサルタント採用時のグーグル流ベストプラクティスグーグル検索ではShopifyが優遇されている！? CMSで違いはあるのか？AMPストーリーに特化したSEOをグーグルが解説グーグル検索でニュース記事を目立たせるコツをグーグルが解説グーグルは、GAやChromeのデータを検索に使っていないグーグルSE
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
ユーザーにない知識を補わないと、UXを損なう
調査型のタスクに適した情報の提供ができていないWebサイトは多い。そうしたサイトでは、ユーザーはさまざまな情報ソースを手作業でつなぎ合わせるという不必要な手間をかけなくてはならないのだ。 Unbridged Knowledge Gaps Hurt UX by Kim Flaherty and Kate Moran on March 3, 2019 日本語版2019年10月17日公開 デジタル製品のデザインチームは、ユーザーの技術レベルや情報探索スキルを過大評価していることが多い。2016年にOECDは、中程度の複雑度のタスクを正常に完了できる成人は全体の3分の1しかいないことを明らかにした。このレベルのタスクを完了するには、ユーザーはページやアプリケーション間の移動をする必要がある。また、ステップを複数こなさなければならない上に、ツールやソフトウェアの機能（たとえば、ソート機能など）も利用
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum
意匠法が大きく変わります。 「特許法等の一部を改正する法律案」は2019年3月1日に閣議決定され、4月16日に衆議院で可決され、5月10日に参議院で可決されました。 この法律案には、意匠法の改正が含まれています。 意匠権について、より世界的な運用基準へと準拠し、使いやすいものにするためです。 今回の法改正により、Web担当者にとって大きな影響を及ぼすのが、Webデザインの意匠権が認められたという点です。 詳細については、弁理士の渡部仁先生に寄稿頂きました「意匠法改正によるWebデザインの保護」という弊社サイトのブログ記事をご覧下さい。 今回の法改正のポイント意匠権は強力な権利Webデザインが意匠権として認められるようになったという事は、自社のWebサイトのデザインを法的に強力に保護できるようになったという事です。 その一方で、他社が意匠権を獲得したWebデザインと自社のWebデザインが似て
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
安全なWebサイトのつくりかた ざっくりまとめpart2 - Qiita
情報推進機構「安全なWebサイトのつくりかた」を読みましたが 情報量が多すぎて頭がフリーズしたので、現時点で最低限理解できる内容までを記録しておきます。 誰にでもわかるというより、僕が理解できる範囲で書いていますのでご了承ください。 Part1 https://qiita.com/E-46/items/93199f38bdacd6b6076a 2. OS コマンド・インジェクション どんな脆弱性なのか インジェクションとは「注入、投入する」の意味。 Webサイト上に設置された入力フォームにコマンド（OSへの命令文）を入力することで WebサーバのOSに対して不正な命令を実行できてしまう脆弱性が存在します。 これを利用した攻撃がOS コマンド・インジェクションです。 SQLインジェクションはデータベースへの攻撃、 OS コマンド・インジェクションはOSへの攻撃と言えます。 OSへの命令は、シ
安全なWebサイトのつくりかた ざっくりまとめpart1 - Qiita
情報推進機構「安全なWebサイトのつくりかた」を読んだけど 情報量が多すぎて頭がフリーズしたので、現時点で最低限理解できる内容までを記録しておきます。 誰にでもわかるというより、僕にでもわかる文章で書いていますのでご了承ください。 Webアプリケーションのセキュリティ実装 例として、１１種類のセキュリティ脆弱性が挙げられています。 「何がまずいのか？」「どんなアプリで注意が必要なのか？」を 噛み砕いてからまとめていきます。 SQLインジェクション Part1（本記事） https://qiita.com/E-46/items/93199f38bdacd6b6076a OS コマンド・インジェクション Part2 https://qiita.com/E-46/items/aa43b6a01de8ab205591 1. SQLインジェクション どんな脆弱性なのか インジェクションとは「注入、投
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
地方の小さなB2B企業がウェブを使って成果を出す鍵とは？ コーナーの記事一覧 | Web担当者Forum
