「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、Microsoft MVP for Visual Studio and Development Technoプロジェクト」代表。 主
ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。 デモ： https://codepen.io/ginpei/pen/dPbWQKB @ だけ見るのが良いのでは 先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。 というわけでこれでどうですか。 メールアドレスの検証 メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP ア
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは2024-12-16 Open UI Community Groupで、仕様の策定が検討されているProposalの一つに、Link Area Delegationがあります。 本エントリでは、Link Area Delegationの仕様がどのような背景から検討され、何が可能となり、これから私たちがどのように利用していけるのかを紹介します。 Link Area Delegationとは Link Area Delegation（= リンク領域の委譲）Proposal は、コンテナがインタラクティブな領域を特定の要素に委譲することで、コンテナを「クリッカブル」にする機能を標準的に導入しようとする試みです。 例えば、提案されている手法のひとつである、linkar
ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled
以前に 劇薬の The New HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.4 Google Chrome 102.0.5005.115 Web Componentsを構成する3種のUI部品があることの嬉しさと、ブラウザで再利用可能なUI部品を作るための技術「Web Components」について概要を解説しました。今回はもう少し解像度を高めて、どんな役割の技術の組み合わせによって成り立っ
この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.ement('div'); div.innerHTML = '<image src="" alt="">'; console.
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 14 日目 今日は <input> とかで使える属性 enterkeyhint です。ソフトウェアキーボードを指示できる属性 inputmode とはまた別で、エンターキーのみを対象とします。 enterkeyhint – HTML: HypervrggWQ 基本的な使い方 取り得る値。 enter done go next previous search send Android 日本語入力のエンターキー部分が紙飛行機の、メール送信アイコンになっている様子。 <input enterkeyhint="▒▒▒▒" /> の様子（右下エンターキー） pic.twitter.com/lXzMppC3
smallタグ smallタグです。 かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。 そのうちの1つが著作権の帰属を表すです。 なんでこの記事を書いたのか smallの役割って意外と知られていない気がする 最近レビューで連続でこの話をした という2つの理由から記事を書きました。 内容の補足 コピーライト表記ってありますよね？ © 2019-2021 Example Corporation All rights reserved. みたいなやつです。 色々なサイトのマークアップを見学していてspanタグで実装されていることが多いことに気がつきました。 しかしHTML Living Standardのsmallタグの章を見てみると Small print typically features disclaimers, caveats, l
JavaScriptをインライン化してみている。速い。ラスター画像もBase64で埋め込めみたくなる。しかしインライン化はやはり気持ちが悪く、落ち着かない。この気持ち悪さはウェブサイトと言う単位に意味が薄くなってしまうことにあるのではないか。 ウェブサイトは全体で一冊の本になっているようなイメージが漠然とある。フレーム全盛期を体験していることが大きい。このイメージではそれぞれのウェブページはその本のページにあたり、それぞれから参照されるJavaScriptファイルはそのページ群を留める接着剤やひもにあたる。それらをインライン化してしまうと、本のページそれぞれを切り離し、ペラペラな紙にしてしまっているような印象を持ってしまう。 実際にはそれぞれのウェブページは半ば独立したもので、ユーザーからも様々なウェブサービスからもそう扱われるようになって久しい。直帰率が限りなく100%に
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
