前回のブログを作成するにあたって、デモページをいくつも用意する必要があった。これまではCodePenで作成したものを埋め込んで表示していたが、ソースコードがブログと別の場所で管理されていることが煩わしかったので、代わりにデモページを同サイトに配置してiframe要素から読み込んで表示することにした。 これをシンプルに実装すると次のようになる。 <iframe src="/2025-09-12-click-friendly-target-areas/navbar-bad.html" title="ナビゲーションバーのデモ（悪い例）" height="128" style="width: 100%" ></iframe> このうち、title属性にはそのドキュメントのタイトルを設定する。そして、iframe要素をそのドキュメントとピッタリ同じ高さにするために、ドキュメントの高さをheight属

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 見出し要素とセクショニングコンテンツについて細かい部分を毎回忘れるので記憶定着のためにまとめる。 それとまた忘れても大丈夫なように標準へのリンク集の役割も兼ねて。 「セクショニングコンテンツとセクショニングルートの要素どれがどれだっけ」 「h1ってどこで使って良いんだっけ？」 「h1って一つのHTML文書の中に複数存在してても良いの？」 「h1がないのにh2使って良いの？」 みたいに思ったら読む文章です。 ただし、再確認の趣旨が強いため、わかる人にしかわからない文章になってるかも。 参考 参考にするのはもちろんこちらのHTML5

Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だった。

Intro Referrer-Policy は、送信される Referer の値を制御することが可能だ。 このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。 では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか? 前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io https://blog.jxck.io/entries/2024-04-26/csrf.html Referer とアナリティクス Referer は、リクエストに対してその前のページの URL を送るところから始まった。 GET / H

「HTMLクイックリファレンス (htmq.com)」という老舗サイトに2024年10月下旬頃?からオンラインカジノ広告があふれかえっています。別サイトを伝手に原作者の方にご連絡したところ、2024年4月頃にコンテンツとドメイン名を譲渡したとのことでした。 かつてのHTMLクイックリファレンスを見る (Wayback Machine) サイトの変化に驚きましたが、どうやら攻撃を受けたわけではなく、運営者の変更で方針が変わったということのようです。 HTMLクイックリファレンスの原作者の方と連絡が取れました。4月頃にコンテンツと https://t.co/tEmb2KlKHk ドメイン名を譲渡したそうです。 譲渡した時点では現在のような内容への変更は知らされていなかったとのことで、現在は制作や運営からには関わっていないとのことでした。 悲しいね！😭 https://t.co/qObKWax

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月. Learn more See full compatibility Report feedback <input> 要素の type="date" は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値は yyyy-mm-dd 形式に正規化されます。 結果の値には年、月、日が含まれますが、時刻は含まれません。 time および datetime-local 入力型は時刻や日付と時刻の入力に対応しています。

ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ

これなんだけども: HTML - <a href="#top">Top of the Page</a>は該当するフラグメント（<div id="top">や<a name="name">）がなくても仕様的に正しい - Qiita 文書の先頭へのリンク · terkel.jp 仕様についてあんまり書いてなかったので自分で読んでみたまとめ書く。 href="#top"を指定すると自動的にページの先頭へのリンクになる ……というブラウザーの独自仕様があったわけなんだけども、これが正式に仕様として明記されたとの事。 MDNの説明が一発で分かる。 a 要素 - HTML | MDN href これは、ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。（中略） 補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href="

はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf

javascriptでテキストファイルやCSVファイルを読み込む方法は下記になります。 この他に、jqueryだとajaxを使用して読み込む方法などもありますが、あえて javascriptで記述しています。 rt(); function rt(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET","xxx.txt",true); xmlHttp.send(null); xmlHttp.onload = function(){ var data = xmlHttp.responseText; } } "use strict"; var csv = { load:async function(filename,id){ await fetch(filename).then(data=>data.text()).then((res)

2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで

Make sure a web view or webpage provides the correct AutoFill suggestions.

Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 3 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 > 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 WebP 従来の Web において、画像は用途毎に PNG/JPEG/GIF などを使い分けていた。 一般的には以下のような使い分けが行われている。 WebP は Google が開発した画像フォーマットであり、これら三つの用途全てに適した上で、さらに小さいサイズに圧縮できる場合が多い。 また、WebP は