令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Automating a11y testing: Part 1 — Axe
Earlier this year I gave a talk at the John Lewis Partnership Tech Profession Conference 2023 on the topic of automating web accessibility (a11y) testing. In this series I will cover the contents of this talk, kicking off with insights into the Axe suite of tools, followed by articles covering the wider a11y testing landscape: from visual regression testing for magnification and visual deficiencie
インプットのすゝめ | 外道父の匠
絶賛成長期にあるだろう若手エンジニアは、どういう流れで自身の成長を促したら良いのだろうか、とふと思いつつ口頭で説明してみたけどよくわからんくなったので整理してみたいお気持ちです。 当ブログではアウトプットの効用みたいなものは書いてきましたが、インプットそのものについてはお初なので、自身を振り返る良い機会にもなりそうです。 はじめに これは私が二十数年間、プログラマー・インフラ・SRE といったエンジニアとして通ってきた中で、どのようにインプットをしてきたかを整理してみるチラ裏です。 自分は一般(?)と比べれば少々特殊な経歴で、情報学を学んだことも、新卒研修を受けたことも、IT系資格も、転職したこともない…… ほぼ独学による野良エンジニアとして生息してきましたので、あまり参考にはならないかもしれません。 それでも一応長く生き抜いてきたエンジニアの経験として、インターネットに数多くある参考例の
「タスクを切る能力」の本質について。
もうかなり前の話だ。 ある会社で、「会社案内・パンフレットのリニューアルをする」と言うプロジェクトが持ち上がった。 社長は一人の人物をプロジェクトマネジャーとして任命し、予算を付け、 「後はよろしく」 と、仕事をまかせた。 ところが半年後、ようやく社長は気づいた。 全くプロジェクトが進んでいないことに。 「どうなっているのか」とプロジェクトマネジャーを問い詰めたところ、彼は外注に丸投げしたまま、何もしていなかった。 外注側も、仕様が固まらず、プロジェクトは完全にスタックしていた。 社長は彼に話を聞いたが、彼は「外注から返事が無くて」の一点張り。そこで、社長は彼に要求した。「資料を出せ」と。 ところが彼は「出せない」という。 何か隠しているのではないか、おかしいのでは、ということで、皆でメールのやり取りや資料などを調べると、実質、彼が事実上、「外注に依頼をし、あとは本当に何もしていない」こと
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
Cloudflareに移行したら99％コスト削減できた話
どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち
リレーショナル・データベースの世界
序文 私の仕事は、DBエンジニアです。といっても別に望んでデータベースの世界へきたわけではなく、当初、私はこの分野が面白くありませんでした。「Web系は花形、データベースは日陰」という言葉も囁かれていました。今でも囁かれているかもしれません。 ですが、しばらくデータベースを触っているうちに、私はこの世界にとても興味深いテーマが多くあることを知りました。なぜもっと早く気づかなかったのか、後悔することしきりです。 もちろん、自分の不明が最大の原因ですが、この世界に足を踏み入れた当時、先生も、導きの書となる入門書もなかったことも事実です。 今でこそバイブルと仰ぐ『プログラマのためのSQL 第2版』も新入社員には敷居が高すぎました (2015年2月追記：その後、自分で第4版を訳出できたのだから、 人生は何があるか分からないものです)。 そこで、です。このサイトの目的は、データベースの世界に足を踏み
もうHTMLをXHTMLで書くことは推奨されないという話 | フロントエンドBlog | ミツエーリンクス
春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML（HTML Standardでは正確にはXML構文）でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい
合理的配慮の提供等事例集：障害者制度改革担当室 - 内閣府
全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合う共生社会の実現のためには、合理的配慮の提供をはじめ、障害を理由とする差別の解消の推進に関する法律（平成25年法律第65号。以下「障害者差別解消法」という。）で求められる取組やその考え方が、幅広く社会に浸透することが重要です。 また、令和３年には障害者差別解消法が改正され、令和６年４月１日から事業者による障害のある人への合理的配慮の提供が義務化されます。 障害者差別解消法の改正に伴い、今後、事業者や各相談機関が参考にできる事例の重要性が一層高まることが見込まれます。そのための一助として、このたび、「合理的配慮の提供等事例集」を改訂しました。本事例集は、関係省庁、地方公共団体、障害者団体などから収集・整理した事例を基に、想定事例も含めた事例集として取りまとめたものとなります。 この事例集を活用し、合理的配慮の提
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
Vite は使ってないけど Jest を Vitest に移行する
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
ADR – アーキテクチャ上の設計判断を記録しよう｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
ADR – アーキテクチャ上の設計判断を記録しよう はじめに 昨年、2022 年に「ソフトウェアアーキテクチャの基礎」[1] という書籍が出版されました。 これは今年、2023 年の 1 月 16 日に発表された「IT エンジニア本大賞2023」技術書部門ベスト10 に選ばれるなど、ソフトウェアエンジニアからの注目が多かった書籍であると言えるでしょう。 そこで紹介された アーキテクチャディシジョンレコード (Architectural Decision Records; ADR) という方法は、この書籍の評判が浸透するにつれ、目に耳にすることが多くなった印象があります。 本記事では、この ADR とはどのような方法であるのか、またそれに対する個人的な考察や雑感について、記述しています。 なお本記事における「判断」「決定」いずれの用語も、Decision の訳語であると解釈していただいて差し
アクセシビリティ - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
戻るボタンで「ページ遷移」させてはいけない - Qiita
UI/UXと画面遷移について、 そのボタンに割り当てるべきアクションは、「ページ遷移」なのか、「ヒストリーバック」なのか、という話です。 ヒストリーバックを用いた理想的な遷移 あなたは一覧画面と詳細画面を持つサイト/Webアプリを開発しています。 詳細画面では、ヘッダーの左に戻るボタンが表示され、ヒストリーバックが割り当てられています。 ① ユーザーは、Googleの検索結果から一覧画面にランディングし、さらに詳細画面に遷移しました。 ② ユーザーは詳細を見終わったので、左上に表示された戻るボタンを押下し、一覧画面に戻りました。 ③ ユーザーは他に見たいものがなかったので、次はブラウザのヒストリーバックを使ってGoogleの検索結果に戻りました。 ユーザーはヒストリーバックを用いて期待通りのブラウジングができました。 ヒストリーバックとページ遷移の混在した悪い例 このサイトを改修し、ヘッダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データベースでユニークキーにUUIDを使うメリットは何ですか？連番やタイムスタンプまたは複合などではいけないのでしょうか？どうも視認性が悪く使いにくく感じますし連番でも衝突しない気もします。
VUEVO（ビューボ） | みんなの会話を視覚化し、聞こえの違いをつなぐサービス
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
Refactoring UI
type-challenges/README.ja.md at main · type-challenges/type-challenges
