最近発表されたこちらに衝撃を受けました。 htmzは、iframeを利用してhtmlの一部を書き換えるアイデアです（本記事ではhtmzの詳細な解説はしません）。 リポジトリはこちら。 かなり古いブラウザ環境でも動きそうなミニマルなスニペットで、個人的に非常に好みです。なぜいままで現れなかったのでしょう…。 感動したので自分でいろいろ試していたところ、パーシャルHTMLの埋め込みを思いついたので記事にしました。 やりたいこと 以下のhtmlファイルがあるとしましょう。 管理の単純化や再利用性の向上のために、ページ要素を分割しているイメージです。
JSer.info #662 - Babel v7.23.0リリースされました。 7.23.0 Released: Decorator Metadata and many new import features! · Babel Stage 3のDecorator Metadataのサポート、Stage 3のimport sourceのサポートが追加されています。 Stage 2のimport deferのサポート、Stage 1のOptional Chaining Assignmentのサポート、TypeScript 5.2のサポートされています。 またBabel 8がαリリースされています。 変更点やアップデート方法については、マイグレーションガイドが公開されています。 Upgrade to Babel 8 · Babel ReactやVueなどに対応したNext.jsやNuxtのよう
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
私は、これまで、ずーーーーーーっとHTML編集画面で登録してあるコードを貼り付けて編集して文字マーカーを付けていました。 もう、この作業が煩雑で煩雑で嫌で嫌で仕方なかったのです。 ブログを書くのに時間もかかってしまう要因の一つにもなっていて、どうにか時間短縮は出来ないもんかとモンモンとしておりました。 そこで！！ いつもブログを楽しみにしてると言ってくれているブログマダムのM:yadaさんの記事を思い出したのでございます ↓ こちら、M:yadaさんのエディタを使わないでマーカーを引く方法！初心者でも出来た！ の記事です。 mendokusainoyada.hatenablog.com M:yadaさんは、めいパパさんの記事を言及し、私はM:yadaさんの記事を言及することになります。 ご本人たちに確認せず、勝手に言及の言及をさせて頂いてしまいます。（M:yadaさん、勝手に言及して申し訳
HTMLとDOMとの違いメモ - Lambdaカクテル
フロントエンドをたまに遊びでいじっているのだが、HTMLとDOMって何が違うのかよくわかっていなかったので調べたメモ。 HTMLはMarkup Languageとあるように、ドキュメントをマークアップする一種のシリアライズフォーマットである。 DOM(Document Object Model)はより高いレベルの概念であり、シリアライズ形式を関知しないが、ドキュメントをツリーモデルとして表現するセマンティクスを提供する。 わかりやすくメンタルモデルを表現すると、ブラウザ(やnodeなどそれに準じるもの)がHTMLをパースし、対応するDOMモデルがオブジェクトとしてメモリ上に展開される、といえる。 プログラミング言語からはDOMを通じてドキュメントを操作する。 このためHTMLはDOMと等価ではない。 このためHTMLの属性といった構成要素がDOMと一対一対応するとは限らない。 HTMLの属
新しい HTML <permission>> 要素のオリジン トライアル | Blog | Chrome for Developers
ウェブアプリでの位置情報アクセスなどの強力な機能を使用するための権限をリクエストする命令型の方法はいくつかあります。これらの方法にはいくつかの課題が伴うため、Chrome の権限チームは新しい宣言型方式である専用の HTML <permission> 要素をテストしています。この要素は Chrome 126 のオリジン トライアルであり、最終的には標準化したいと考えています。 権限をリクエストするための命令型メソッド ウェブアプリが強力な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合、ブラウザはユーザーにプロンプトを表示し、多くの場合、その決定内容を保存するオプションが表示されます。これは、権限の仕様において明確に定義された概念です。 事前リクエストではな
GitHub - Kalabasa/htmz: html with targeted manipulation zones
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
=>htmz> a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. [GitHub] plain🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JS bundles to l
GitHub - webqit/oohtml: Towards a more dynamic and object-oriented HTML.
Explainer • Features • Modular HTML • HTML Imports • Data Binding • Data Plumbing • Implementation • Examples • License Object-Oriented HTML (OOHTML) is a set of features that extend standard HTML and the DOM to enable authoring modular, reusable and reactive markup - with a "buildless" and intuitive workflow as design goal! This project revisits the HTML problem space to solve for an object-orien
table td:nth-of-type(2) { background-color: red; } 上記のようなCSSで特定の列だけ背景色を赤くできます 「td:nth-of-type(x)」の「(x)」の部分に列番号を指定します 「background-color: red; 」なので背景色が赤くなっていますが ここを 「 font-size:100px;」みたいにすれば文字が大きくなりますし 「writing-mode: vertical-rl;」みたいにすれば縦書きになります 特定の列より左側だけ: td:nth-of-type(-n+x) 1-1 1-2 1-3 1-4 1-5
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
※Blazor Serverについて知らなかった人に興味を持ってもらいやすくする為、タイトルを「Blazor Serverの非同期処理がめちゃくちゃ直感的に書けて感激した件」から変更しました。 今更ですがBlazor Serverをちょっと試してみて、そのあまりのすごさに驚いたので記事にしてみます。C#があれば、ReactもVueもSvelteも要らんかったんや…（言い過ぎ）。 Blazor Serverは比較的新しいフレームワークで、「サーバ側もクライアント側も全てC#で記述しよう」という野心的なフレームワークです。2020年頃に正式リリースされ、.NET 3.1以降で使えるので、.NET6がLTSで既に.NET8がリリースされようとしている現在では、割と安定した技術と言えるでしょう。 同じBlazorブランドで展開している似た技術に「Blazor WebAssembly」というものもあ
過日、@tonyennis氏のHTML Firstという文書を拝読しました。 少し調べているとHTML Driven Development - Valuesのように似た話について言及している記事もちらほら見つかり、興味を惹かれる内容でしたので少し深堀って考えてみた事をここに残します。 いそがしい人向け HTML Firstの原則はモダンフレームワークを基盤にした開発に適用できるものではない HTML Drivenな開発とはhtmxやhyperscriptのようなライブラリを活用する開発であるといえる 技術スタック及びアーキテクチャを見直す Locality of Behaviourを重視した設計思想 課題はあるが、プロダクトの性質によっては採用の余地がありそう HTML Firstとは何か まず、件の文書からHTML Firstがどのようなものであるか見てみましょう。 概要 HTML F
最新のHTML
業務でしばらく役に立たない 最新のHTML 2023 PWA Night vol.55 ～HTML/CSS〜
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
メールクライアントごとにHTMLメールで使用できる機能を一目でわかる形式でまとめてくれるサイト「Can I email…」
世の中には多数のメールクライアントアプリが存在していますが、アプリごとにHTMLメールのどの機能に対応しているかはバラバラです。「Can I email…」ではHTMLメール作成時に「この機能は使ってもいいのかな……？」と疑問を持ったときに、世の中のメールクライアントアプリのどれくらいが機能に対応しているのかを一目で確認できます。 Can I email… Support tables for HTML and CSS in emails https://www.caniemail.com/ サイトにアクセスし、中央の入力欄に使用したい機能を入力すると下部にメールクライアントごとの対応状況が表示されます。緑色は「対応」で、黄色は「部分的に対応」、赤色は「非対応」です。同じクライアントでもバージョンごとに対応が分かれている場合は「どのバージョンから使用できるようになったのか」が表示されていま
How to Draw a Clock with SVG and JavaScript that Shows the Actual Time
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
lamplightdev - Streaming HTML out of order without JavaScript
This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, but there's a loading placeholder where the list of items will be rendered. After a second the loading placeholder is replaced with the list of items - but with each item itself having a
Markuplintを使って高品質なHTMLコーダーになる
世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
「HTMLのスーパーセット」Svelteはこんなに進化している — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 では始めさせていただきます。今日はSvelteのこの1年の最新情報をキャッチアップできるということをゴールに発表します。
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
大量にあるPDFにアクセスを集めたい。工数をかけてでもPDFをHTMLにすべきか？ | ひとりSEO担当者の疑問に答えます
大量のPDFにアクセスを集めるには？今回の相談内容は、運用しているBtoBサイトに、データを掲載したPDFが大量にあり、これにアクセスを集めたいというものです。HTML化するのがよいことはわかっているものの、何しろ大量にあるので工数をかけて実施するかどうか、悩んでおられます。今回の質問はペンネーム「ぐにぐに」さんが寄せてくださいました。いつもありがとうございます。 かけられる工数は期待できる効果で決まるSEOに限らずどんなことでも、かけられる費用は期待できる効果で決まります。今回のケースなら、PDFをHTMLにすることで売上への貢献がどれくらいになるかによって、PDFのHTML化にかけられる工数が決まってくるでしょう。 PDFのHTML化といっても、単純にファイル形式を変換してアップロードするだけの場合から、グローバルナビゲーションやパンくずリストのついた通常のHTMLページへと整形し直す
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る | Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
ググったら出てきたぞ https://oshiete.goo.ne.jp/qa/643134.html 以はその数字を含める..
ググったら出てきたぞ https://oshiete.goo.ne.jp/qa/643134.html 以はその数字を含める言葉なんだけど、外って言葉がその数字の外を指すから、以外だけその数字の外となり、その数字が外れるみたいやぞ
上記のような表があって、3列目(理由)の欄が長すぎる影響で、1・2列目(あげた人・もらった人)の欄の人名が意図しないところで改行されてしまう そういう場合は、以下のようなCSSを設定すると td:nth-of-type(-n+2) { width: 0; white-space: nowrap; } 改行せずにちょうどいい具合の列幅になってくれます
HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。 この記事では、2023年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2023 の中から、印象に残った素敵な作品をご紹介。 2023年に話題となったWebサイトでも見かける、参考にしたくなる魅力的なエフェクトやテクニックに多くのハートが集まっています。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
HTMLテンプレートを無料でダウンロードできるサイトを厳選してご紹介します。 より具体的には、CSSフレームワークに依存しないVanilla CSSテンプレートとなっています。 数あるテンプレート配布サイトの中で、これから以下に挙げるサイトが特にお気に入り。選択基準はこんな感じ。 HTMLテンプレートは、どれも個人・商用ともに無料で利用できる モダンでおしゃれな今っぽい見た目 デモページで表示、確認できる ダウンロードに必要なのは、メールアドレスによるサインアップのみ わたしはこれまでに、無料で利用できるHTMLテンプレートを１０年近く追っかけてきました。数でいうと数百は超えます。 その経験から言えるのは、多くの「無料」テンプレートは、個人利用向けライセンスがほとんど、ということ。 クライアント向けのプロジェクトや営利目的の仕事には、残念ながら使えません。 テンプレートを購入することで商用
CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
GitHub - paveldedik/ludic: Lightweight framework for building dynamic HTML pages in pure Python.
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
「君たちくらいの歳の女の子はHTMLを程よく使いこなせる子が多くて助かる」って言われた…そうかいるのか。私以外にも、元管理人が。
笑衣くん、君ってやつは。 @Wara_tter NAME : warai . 20↑︎︎ ♀ wj/wm本誌ﾊﾞﾚ , cosplay , 呪術廻戦の伏黒甚爾が好きです。︎︎︎︎ lit.link/waratter 笑衣くん、君ってやつは。 @Wara_tter 「君たちくらいの歳の女の子はHTMLを程よく使いこなせる子が多くて助かる」ってマジで言われたんだけど…そうかいるのか。私以外にも、元管理人が。 2024-01-25 13:49:00
HTMLだけで作る囲み枠・ボックス装飾￤CSSを使わずに、コピペですぐに使えます！ - yunico's fluffy life
以前、CSSとHTMLで作る囲み枠（ボックス装飾）についての記事を書きました。 その記事はこちらyunico-fluffylife.com そこで上記のコメントをいただきました。 ／ありがとうございます·͜·＼ 前回の記事に『記事の中でCSSコードを使う方法』を追記しましたが、今回は『CSSを一切使わずに、コピペで使える囲い枠』をご紹介します。 せっかくなので、前回ご紹介したデザインと同じものをHTMLのみで組み立ててみました！ 囲み枠を使うメリット コンテンツをグループ化できる。 情報の優先順位を伝えやすくなる。 ページの内容にメリハリができる。 サイトの外観を整えることができる。 はてなブログもデザインCSSの編集はスマホからの操作が大変なので、HTMLのみで作る方が楽な場合もあると思います。そんな時に参考にしてもらえると嬉しいです。 HTMLコードの使い方 シンプル系 Box1.実線
Google AdSense合格者９人目の方の部分でカスタマイズについて触れたので軽くご紹介！ ※リンクを貼るために作成しました（笑） 私が愛用しているHTMLカスタマイズ３選になります！ コピペで使える他のサイトもたくさんあるのでお好みのものをぜひ見つけてみてください！ オレンジ色枠 使用したい方は下記をコピペ！ 赤色枠 使用したい方は下記をコピペ！ テープ付き付箋 使用したい方は下記をコピペ！ 簡単使用方法説明 ①「使用したい方はコピペ」部分のコードをコピー ②「HTML編集画面」に移動 ③「HEML編集画面」に「貼り付け」 ④「編集みたまま」に戻る まとめ オレンジ色枠 ◆この記事はこんな方にオススメ◆ ここに本文を入力します。 見出し付き直線の囲み枠例です。 使用したい方は下記をコピペ！ <fieldset style="border:2px solid #ffa500;"><le
米Googleは、Webアプリ版Gmailの「簡易HTML形式」の提供を2024年1月に終了する。特に発表はないが、9月19日ごろにヘルプページにそう記載されていると、複数の米メディアが報じた。 簡易HTML形式は、Webブラウザやネット環境、PCのスペックなどの問題でGmailの「標準HTML形式」での表示ができない場合に切り替えられる表示方法だ。 必要最低限の機能しか使えないが、起動が速いので、チャットやWeb会議機能などを必要としないユーザーの中には愛用している人もいた。 関連記事 Google Podcasts、2024年に終了へ YouTube Musicに統合 Googleは、2015年リリースの「Google Podcasts」アプリの提供を2024年後半に終了すると発表した。現在米国版「YouTube Music」でのみ提供しているPodcast機能をグローバルに拡大し、現
HTML Web Components
I think the word “component” in “web components” confused a lot of people — at least it did me. “Web components” sounded like the web platform’s equivalent to “React components”. JSX had <MyComponent> and now the web had <my-component>. But when you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like Re
HTMLのaタグとキーボードによるサイバー攻撃発見、注意を
Impervaは2月15日(米国時間)、「Hacking Microsoft and Wix with Keyboard Shortcuts｜Imperva」において、HTMLのアンカータグ(＜a＞)に潜む不思議な振る舞いについて分析し、この一貫性のない動作を悪用可能か検証した結果を伝えた。 Hacking Microsoft and Wix with Keyboard Shortcuts｜Imperva アンカータグの特徴的なふるまい すべてのWebサイトのコンテンツは基本的にHTML(HyperText Markup Language)によって記述されている。ブラウザはWebサーバが応答するHTMLの内容に従い、画面上にコンテンツを可視化して表示する。コンテンツの制作者は他のコンテンツへのリンクとして、HTMLのアンカータグを使用することがある。 アンカータグはリンク以外にもJavaS
ACF 6.2.7以降でのHTMLエスケープの仕様変更への対応方法まとめ | ストレンジブレイン日報サイト
WordPressを利用している方の中でもかなりの方が利用しているのではないかと思われる有名プラグイン「Advanced Custom Fields」ですが、まだ最新版にアップデートしていない方の管理画面にはこういったアラートが出ているのではないでしょうか？ わたしも長年ACFを利用していますが、こういったアラートはおそらく初めて見たため何事か！？と驚いてしまったのですが、簡単に言うと「the_field()やthe_sub_field()で出力する内容に対してHTMLエスケープかけるようにするね！」という仕様変更に関するお知らせです。 と、書くとなんか大変なことじゃないような気がしてくるのですが、実はこのthe_field()やthe_sub_field()って、ACFで入力した値をお手軽に表示するための関数なので、めちゃくちゃお世話になっている関数だったりします。なので管理画面にアラー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLのデフォルト機能だけでパーシャルHTMLを埋め込む
2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
ストレスフリーなブログ作成！HTML編集不要で楽々マーカー引き！ #ブログ #時短 - 旅するCrosscub
rei@サブアカウント @Shanice79540635 実は総務省は各自治体に「女性がストーカー被害訴えたら速やかに住民票閲覧や写しの交付を制限しろ」と通知出してるので、男性は詐欺被害であれストーカーカード切られた時点で民事訴訟による救済ルートは事実上消滅し、連動して民事で被害確定→刑事訴訟ルートも無くなります https://soumu.go.jp/main_sosiki/jichi_gyousei/daityo/dv_shien.html
htmz - a low power tool for html
【HTML】tableの特定の列だけCSSで一括装飾する方法(nth-of-typeの使い方)
非同期なHTMLのレンダリングもサーバ側から全部やっちゃう「Blazor Server」が凄すぎる - Qiita
三浦誠・赤旗社会部長 @redbear2014 しんぶん赤旗のスクープです。 大阪府が府立学校の校長らに、教職員に対して、阪神・オリックス優勝パレード開催費用のクラウドファンディングに協力を求めるよう「事務連絡」を出していました。クラファンの強要になりかねない問題です。 記事は無料お試しキャンペーンで https://jcp.or.jp/akahata/web_daily/denshiban.html
HTML Drivenなフロントエンド開発について考える
HTMLの現状を明らかにする調査「State of HTML」が実施中
SVG Tutorial - Learn how to code images in HTML with SVG
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
Hiromitsu Takagi @HiromitsuTakagi 社会保障カード構想は2009年に既に出ていて、民主党政権が政権交代時に事業仕分けで潰したんだよね。自分たちのマイナンバー構想と重複するからって。それが今のだよ。 https://mhlw.go.jp/shingi/2008/10/s1028-1.html
【HTML】CSSでtableのtdを改行させない方法(white-space: nowrap;の使い方)
2023年Codepenベスト100発表 ロックなHTMLスニペットがずらり
【商用可】HTMLテンプレートを無料ダウンロードできる厳選サイト11個
HTML,CSS超初心者向け クラス名の付け方 - Qiita
【コピペで簡単】はてなブログで愛用しているHTMLカスタマイズ３選 - 無職ぽこのらくがき
Gmailの「簡易HTML形式」、2024年1月に終了へ