Anthropic で Claude Code チームにいる Thariq Shihipar が、 2026年5月8日に「Using Claude Code: The Unreasonable Effectiveness of HTML」という記事を X に公開しました。 「HTML is the new Markdown」という宣言から始まる、AI の出力フォーマットとして Markdown ではなく HTML を活用するメリットを論じた内容です。 HTML is the new markdown. I've stopped writing markdown files for almost everything and switched to using Claude Code to generate HTML for me. This is why. https://t.co/T97
Cloudflare、「Markdown for Agents」を発表 ——エージェント向けにウェブページのHTMLをオンザフライでMarkdownに変換 Cloudflareは2026年2月12日、ウェブページをエージェント向けにMarkdownにして提供できる機能「Markdown for Agents」を発表した。この機能はPro/Business/EnterpriseプランおよびSSL for SaaSで、ベータ機能として無償で提供される。 Introducing Markdown for Agents - Cloudflare Blog ウェブサイトによっては訪問者の対象として、人間に加え、AIエージェントを考慮すべき段階に来ていると、Cloudflareは指摘する。Markdown for Agentsの機能を使うことで、Cloudflareネットワークにあるウェブページ
FastAPI + htmxが最強説 - Pythonエンジニアがモック作るならReactは不要、Streamlitも捨てよう この記事はLivetoon Tech Advent Calendar 2025の12日目の記事です。 宣伝 今回のアドベントカレンダーでは、LivetoonのAIキャラクターアプリのkaiwaに関わるエンジニアが、アプリの話からLLM・合成音声・インフラ監視・GPU・OSSまで、幅広くアドベントカレンダーとして書いて行く予定です。 是非、publicationをフォローして、記事を追ってみてください。 本題 どうも、LivetoonCTOのだいちです。 今回はスタートアップでプロトタイプ開発する時の技術選定について書きます。結論から言うと、FastAPI + htmxという組み合わせがモック開発において最も効率的で効果があると思います。 モックごときでReactを
した www.3qe.us こいつは暖かみのある手打ちHTMLで作られており、AIはおろか補完といった冷たいテクノロジ〜を利用していない。なんか勘で書いて勘で動いている。 スケルトンにしたい 1990〜2000年代、あらゆるモノがスケルトンになっていたマジで謎の時代。 www.nintendo.co.jp PlayStation 2 オーシャン・ブルー【メーカー生産終了】 ソニー・インタラクティブエンタテインメントAmazon openmedia.jp 自分はそういう時代にガキ時代を過ごしたので、今もスケルトンが大好きである。 blog.3qe.us blog.3qe.us てかなんで今の製品はそんなにスケルトンにしなくなったのだろう。最近はリバイバル的にスケルトンなものも増えてる気がするけど。 そういうわけで自分のサイトもスケルトンにしよう、という話に、異動した最初のオンライン飲み会でな
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ
概要 文章をコピペしてエクセルに張り付けたときに、画面のスタイルもコピーされてしまって困ったことはありますか？ありますよね！ （↓こんな感じ） 私もよくやってしまうのですが、実際にどのような処理が行われているのかよく分かっていませんでした。理解を深めるためにも、自分で実装して謎を解いていきたいと思います。 3つパターンの処理を実装 比較のため、プレーンテキスト・HTMLテキスト・リッチテキストのコピー機能をサンプルプログラムを実装してみました。 （リッチテキストのコピーが、範囲選択してコピペしたときと同じ機能を想定しています。） HTMLファイル 画面表示されるHTMLは下記のような感じです。各コピー処理でid="message"の部分を固定でコピーするようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 Picture in Picture(以下PiP)と言えば、動画を再生しながら別のタブを開いたり別のアプリケーションを開いたりできる機能ですが、"Document" Picture-in-PictureはそれをHTML要素でも可能にするAPIです。最近Google MeetがこのAPIを使い始めて、別タブに移動したタイミングで勝手にPiPを表示するようになりました。なんか賛否あった気がしたけど僕は便利に使っています。決してミーティングに集中していないわけではないです、えぇ。 このブログサイトでも、Document Picture-in-Picture APIを使って記事をPiPで読めるようにしてみました。APIをサポート
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加するため
このサイトのGitHub Pagesへのデプロイ方式を、GitHub Actionsを使って直接デプロイする方式に変更した。 新機能の説明 2022年7月まで、GitHub Pagesにファイルをデプロイするためには、何らかのブランチにデプロイしたいファイルを配置する必要があった。これを実現するために、よくpeaceiris/actions-gh-pagesのようなカスタムアクションが使われていた。 2022年7月から、新方式として、actions/upload-pages-artifactとactions/deploy-pagesという二つのカスタムアクションを組み合わせて、ブランチにファイルを配置することなく直接GitHub Pagesにデプロイする方式も選べるようになった。この情報は、GitHubのブログ記事でも紹介されている。2023年5月時点で、この機能はβ版という位置付けになっ
<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="10"> <div style="width: 100px; h
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
メリークリスマス！ 週末もPHPを楽しんでますか？ ところでWebセキュリティはWebアプリケーションを公開する上で基礎中の基礎ですよね！ メジャーな脆弱性を作り込まないことはWeb開発においては専門技術ではなく、プロとしての基本です。 中でもXSS (Cross-Site Scriptingクロスサイトスクリプティング)やインジェクションについての考慮は常に絶対に欠いてはならないものです。 現実にはプログラミングには自動車のような運転免許制度がないため、自動車学校に通わず独学で公道に出ることができてしまいます。つまりは基礎知識がないままにWebプログラマとして就職したり、フリーランスとして案件を請けることも現実には罷り通っています。それは一時停止標識も赤信号も知らずにタクシー営業しているようなものです。 このような事情により、体系的な理解のないWeb開発初心者は (時にはn年のキャリアを
この記事は エンジニア転職活動ハックをシェアしよう！ by キャリアデザインセンター「Direct type」 Advent Calendar 2022 の 23 日目です。 転職サイトはリファラを送るのをやめた方が良いと思う という記事を 3 ヶ月ほど前に書きました。これは「転職サイトに求職者が実績として会社のテックブログへのリンクを貼った場合、会社側はブログのアクセス解析ツールを使うことで記事執筆者が転職活動中であることを見抜ける」という内容です。今日はその対策を考えます。 どうして転職活動がバレるのか 転職活動がバレる理由は、採用サイト側からその記事へ遷移した際にはリファラが付くからです。 Referer (referrer ではなく referer, typo が正しい) は、 The "Referer" [sic] header field allows the user age
調べて、整理して、発信するのが好き。「とほほのWWW入門」管理人が26年間も更新を止めない理由 #老後も楽しむ 公開日 | 2022/12/12 更新日 | 2025/08/14 インターネットが世の中に急速に普及した、1990年代後半から2000年代前半ごろ。当時はまだ、ブログやSNSといった手軽な情報発信ツールが一般的ではありませんでした。 そんな時代に情報発信をするにはWebサイトが必要で、Webサイトを制作するためには専用のHTML言語を習得する必要がありました。 書籍だけでなくインターネットにもHTMLを学べるコンテンツはさまざまありましたが、中でももっとも多くの人が参照したであろうサイトが「とほほのWWW入門」。Webサイト制作に関する膨大な情報がきれいに整理されており、素人でも分かりやすくHTMLについて学習できる「先生」のような存在です。 とほほのWWW入門は1996年に開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
