iOS Safari の <select> 要素は密かに変わっているのをご存知ですか - マンガ〜ノ伊藤ノ〜ト
私事ですが先日引っ越した． それはよくて，引っ越しすると住所変更が面倒で 外部キーでマスターからカスケードですべて変わってくれないかと思う． それもよくて，大事な書類が届かないと大変だと 銀行口座やクレジットカードの住所変更をしていた． 起 生活に必要なものを大抵スマホのアプリで入れている． クレジットカードアプリも生体認証でログインできたりして， いまや 2段階認証なりが必要な PC よりも楽な気がする． (なんか本末転倒でダメなことをしているような気もする) なので，住所変更もキーボードのほうがやりやすいのは脳裏によぎりつつも 簡単な操作はスマホアプリからやっている． 前置きが長いけど，問題はドロップダウンで住所を選ぶ箇所で， iOS だと選択のドラムがグルグル回るやつが 住所が長いと途切れるということに気づいた: 住所の文字数が多いと選択が厳しい世の中になっていることに気づいた。 p
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
HTML標準めぐりブラウザー業界団体とW3Cが合意--主導権は業界側に
Apple、Google、Microsoft、Mozillaのブラウザーベンダー大手4社が構成する業界団体が、ワールドワイドウェブ（WWW）の標準化団体であるWorld Wide Web Consortium（W3C）と合意し、主導権争いに勝利した。これは事実上、業界団体側がサポートしなければ、W3Cがウェブ標準を規定できないことを証明するものだ。 業界団体のWeb Hypertext Application Technology Working Group（WHATWG）は2004年に結成された。団体結成は、W3Cが現代的なHTML標準を開発するペースが遅かったことと、XMLに似た構造を持つXHTMLにHTMLを移行させるW3Cの計画を受けての動きだった。ブラウザーベンダー側は当時、XHTMLに賛成していなかった。 当時Apple、Mozilla、Operaが構成メンバーだったWHATW
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
HTMLスニペット数1100以上！ウェブ制作の必要パーツをカテゴリごとにまとめた Free Frontend
ウェブサイトの制作でアイデアが欲しいとき、他のデザイナーやプログラマーが作成した作品からインスピレーションが湧いてくることがあります。 ウェブデザインに必要なパーツをカテゴリー分けし、1100種類を超えるHTML/CSS/JSスニペットをコレクションしている Free Frontend を、今回はご紹介します。 ますます重要になっているページ遷移やホバーなどのアニメーションエフェクトを筆頭に、ボタンやカード型レイアウトなどウェブサイトに必要な部品ごとに、コピー&ペーストできるHTMLスニペットをまとめられているので、制作で困ったときのアイデア出しにどうぞ。 HTMLスニペット数1100以上！ウェブ制作に必要なパーツをカテゴリごとにまとめた Free Frontend Free Frontend では、ウェブサイト制作に必要なパーツを、細かくカテゴリ分けし、コピペできるHTML/CSSスニペ
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftは2018年8月30日（米国時間）、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理する - Qiita
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理するHTMLCSSJavaScriptGo tl;dr First Paint はウェブページの何らかが描画されたタイミングのこと。これが遅いということは、初回の真っ白な状態が長いということ。 First Paint は Chrome Developer Tool の Audit で簡単に確認できる。 HTML は描画の起点になるので、ロード時間はそのまま First Paint Timing の遅延になる。 CSS は描画に必須なので ロード時間はそのまま First Paint Timing の遅延になる。 JavaScript は同期で読み込むと、ロード時間がそのまま First Paint Timing の遅延になる。 JavaScript は非同期で読み込むと、ロ
知ってると便利！HTML, CSS, JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ
フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード
HTML Cheat Sheet- List of HTML Elements by Category
Disclosure: Our content is reader-supported, which means we earn commissions from links on Digital. Commissions do not affect our editorial evaluations or opinions. Hypertext markup language (HTML), has come a long way since Tim Berners-Lee invented it in 1991. The rise of e-commerce websites in the previous years resulted in the continuous innovation of the programming language. HTML5 is the late
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
