令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
「説明サイトとリファレンスサイトの両立を目指したい」 「とほほのWWW入門」管理者・杜甫々氏が執筆時に気をつけていること
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語 杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。 Perlの好きなところ、今後サポートしてほしいところ （スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかん
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
ウェブアクセシビリティハンドブック｜ましじめ株式会社
本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】：東京新聞 TOKYO Web
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】
リンク切れチェックにおすすめのツール5選と使い方を解説 | WEB集客ラボ byGMO（GMO TECH）
Webサイトを運営していると、引用・参考などでリンクを設置する場面があります。 リンクは常に有効というわけではなく、何らかの原因でリンク切れになってしまう可能性があります。リンク切れを放置しておくと、ユーザビリティが下がるだけでなくSEOでも不利になりかねないので、対策が必要になります。 今回は、リンク切れチェックツールの中でおすすめのものをご紹介します。全てのリンクを手動でチェックするのは膨大な手間が作業です。リンク切れを一括でチェックできるツールを利用しましょう。 リンク切れのチェックにはツールがおすすめ 一般的に、リンク切れとはリンク先のページに「404 not found」と表示される状態で、表示するべきページデータが見つからない状態を指します。 リンク切れは、リンク先サイト自体の削除やページの削除など様々な原因で発生します。リンク切れを放置する問題点は以下の2つです。 ユーザビリ
クラフトインターネット的な個人サイトを作ってみました。 - 世界のねじを巻くブログ
テキストサイト風なそれ 以前からはてなブログ以外の個人サイトを作ろうと思っていたのですが、 ようやく"クラフトインターネット的"なウェブサイトを 独自ドメインでひとつ作ってみました。 ・・・とりあえずは1年限定で公開しようと思います。 nejimaki.me ドメインはシンプルに「nejimaki.me」。 外観デザインはこんな感じで、 海外のテキストサイトみたいなイメージ。 ここからは、 「マイクロブログでねじを巻け」に載せている内容を軽く紹介しようかと。 TOP10リスト ねじまきの好きなバンドや 好きな食べ物、 好きなアスリート、都道府県、海外 など、 いろんなものの「トップ10リスト」を公開してます。 (恥ずかしいやつだけど、こういうのが個人サイト的なんだよね) これからも追加していく予定なのでよければたまに見てやってください。 Fediverse(ActivityPub)対応 地
「しずかなインターネット」の技術スタックを調べる - laiso
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）｜magi1125
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
個人開発したWeb制作学習サービスmosyaの技術スタック紹介
今回、個人開発で1年もの歳月をかけて mosya というコーディング学習サービスを開発しました。 主なターゲットは Web制作者を目指している方 で、Progateの次の学習に悩んでいる方や一からWeb制作を学びたい方、企業のWeb担当者の方などを想定しています。 どんなサービスか 模写を通してWeb制作の基礎を学ぶmosyaというサービスを開発しました。 専用のエディター内蔵で実際に手を動かして見本を参考にしながら模写をすることで、 体系的にWeb制作を学ぶことができます。 操作感がわかりやすいように動画を用意しましたので、ぜひご覧ください。 なぜ作ったのか 動画だけではなく手を動かして体系的に学べるサービスを作りたい Web制作を学ぶ上ですでにたくさんの教材はあるのですが、部分的な知識を学ぶに過ぎない教材が多く、実際に見本のサイトを完成させられるようになるまでには至らないと感じていまし
ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました
ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
今は、もう、動かない、その User-Agent 文字列
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか？ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
デザイナーに優しいHTMLテンプレートの開発方針をボトムアップで作った話 - 弁護士ドットコム株式会社 Creators’ blog
はじめに こんにちは。弁護士ドットコム UX エンジニアの白井です。社名にもなっている 弁護士ドットコム というサービスを運営する専門家プラットフォーム事業本部に所属し、普段は開発業務やユーザーリサーチに携わっています。 この記事では、デザイナーとエンジニアが日々の開発を行ううえで課題となっていた HTML テンプレートの実装方法について、どのようなプロセスを通じて改善していったのかについて詳しくご紹介します。 はじめに HTML テンプレートとは HTML テンプレートを扱う仕組み HTML テンプレート開発上の課題 なぜ HTML テンプレートが重要か (1) HTML マークアップの品質に悪影響がある (2) 開発効率への影響が大きい "Tech Focus Day" のテーマとして改善活動を開始 いきなりのピボット。そして本当に必要だったもの あらためて問題定義 HTMLテンプレー
Cloudflare WorkersでちゃんとしたWebを作る - ゆーすけべー日記
最近は Cloudflare Workers ばっかりいじってて、フレームワークまで作ってるのですが、これ、ちゃんとやればそれなりの立派な Web サイトができるので、紹介します。 できたサイト 「家系ラーメン食べたい！」というサイトを作りました。 管理者の僕が家系ラーメンを登録できて、トップでは一覧で見れて、 詳細ページに行くと写真と紹介文が見れます。 質素に見えますが、 コンテンツ（ラーメン屋）をどんどん追加できる。 プロパティを追加することも可能。 画像はリサイズされる。 速い。 OGP ちゃんと設定している。 favicon.icon もやってる。 と、「ちゃんと」してます。そう、ちゃんとしてます。 では、どう作っていくか。 Cloudflare Workers Cloudflare Workers 、そのユースケースについて。 CDN のエッジで実行される、ということでスクリプト
Googleが6割以上のページのタイトルを勝手に書き換えて検索結果に表示、長すぎても短すぎてもダメ
Google検索で情報を探そうとして、検索結果に並ぶページのタイトルが不自然な途切れ方をしていたり、省略されて内容がよく分からなくなったりしているのを目にしたことがある人は多いはず。Googleはよくページのタイトルを勝手に書き換えるので、コンテンツの制作者が意図したものとは違ったタイトルが検索結果に表示されることがしばしば発生します。そんなGoogleによるタイトルの書き換え対策について、検索エンジン最適化(SEO)対策ソフトウェアを手がけるZyppyのサイラス・シェパードCEOが解説しました。 We Studied 81,000 Page Titles - Google Rewrote 61% Of Them https://zyppy.com/blog/google-search-title-rewrite-study/ ページのタイトルは、Google検索をしたユーザーの目に最初に
サイトの引っ越しに対応できるQRコード登場 あとから遷移先を更新できる仕組み
QRコードリーダーの開発などを手掛けるメディアシークは1月11日、アクセス先Webサイトの引っ越しなどでドメインが変わっても常に目的のページに誘導できるQRコード生成サービスを開発したと発表した。このサービスで生成したQRコードであれば、パンフレットやポスターなどに印刷され古くなったQRコードからでも正しいWebサイトにアクセスさせられる。 サービスの管理画面であらかじめ指定した情報やWebサイトを表示できる。情報やドメインの変更時に登録情報を更新することで、同じQRコードでも常に最新の情報に案内できる。QRコードの読み取りに専用の機器やアプリは不要。 自治体や企業がWebサイトを引っ越す際に、悪意のある第三者に引っ越し前のドメインを取得され、詐欺サイトなどに作り替えられるケースもある。古いQRコードを放置していると、ユーザーが知らずに詐欺サイトにアクセスし、被害に遭ってしまう。正しい遷移
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
Web のセマンティクスにおける Push と Pull | blog.jxck.io
Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
