Markdown→HTMLはこう進化したーパイプライン最前線
はじめに Zennのようなブログ記事やAstroなどの静的サイトジェネレーターが、どのようにMarkdownを受け取り、ドキュメントを生成しているのか。 その仕組みに強い関心を抱いた私はAstroの Content Collections のソースコードを読み始めました。とりわけ印象的だったのは、フロントマターを抽出する gray-matter でメタデータを取り出しつつ、本文をunifiedパイプラインへ流し込む一連の設計です。 この記事では、そうした実装を眺めた好奇心から始まり、多重パース時代の課題、ASTリレーがもたらした転換点やMDX 3・WASM・Edgeが広げる近未来までを、コードと図を交えながら俯瞰します。 第一世代：多重パース時代 Markdown変換ライブラリの草創期を支えた markdown-it や marked は、Markdown → HTML文字列 を1回だけ高
HTMLとCSSだけでMinecraftを再現
「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。 CSS Minecraft https://benjaminaster.com/css-minecraft/ 上記のページにアクセスすると以下の画面が現れます。 用意されているブロックは全部で7種類。左下から選んでフィールドをクリックすると設置できます。 右下のボタンをクリックするとフィールドの位置を変えられます。「Vertical」で垂直方向への視点移動、「Horizontal」で水平方向への視点移動、「Rotation」でフィールドの回転、「View」で視点の上下移動ができます。 左下のツルハシをクリックしてからブロックをクリックすると、ブロックを削除できます。 ブロックを設置できるのは9×9×9マスの間のみ。 最初からあるブロックを横に伸ばすことはできませんが、削ったり、新しいブロックに置き
人材プラットフォームの品質保証を推進するQAエンジニアを募集!
人材プラットフォームの品質保証を推進するQAエンジニアを募集! 株式会社メドレー @medley X as a Service Web Standards / Browsers HTML WebGL API Economy UX Design Software testing Continuous Integration I want to hear a detailed なにをやっているのか 「テクノロジーを活用して医療ヘルスケアの未来をつくる」というミッションの実現に向けて、現在は以下の事業を展開しています。 ■人材プラットフォーム事業 ・医療介護福祉の人材採用システム「ジョブメドレー」 ・介護事業所向けオンライン研修システム「ジョブメドレーアカデミー」 ・介護施設のマッチングサービス「介護のほんね」 ■医療プラットフォーム事業 ・オンライン医療事典「MEDLEY」 ・クラウド診療支援
Functional HTML — overreacted
Here’s a piece of HTML: <html> <body> <p>Hello, world</p> </body> </html> Imagine this was the only piece of HTML you’ve ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order? Where would you start? Server Tags Personally, I’d like to start by adding a way to define my own HTML tags. It doesn’t need to be complicated. We can just use JavaScrip
ツールチップの実装に役立つ！ HTMLの新属性popover="hint"の使い方 - ICS MEDIA
前回の記事『階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI』ではポップオーバーAPIについて紹介しました。今回はその続編として、Chrome 133、Edge 133で新しく追加されたpopover="hint"属性に焦点を当てます。ツールチップなどのUIの実装に便利な属性で、その特徴や使い方、他の属性との違いを詳しく説明します。 ポップオーバーAPIのおさらい まずはポップオーバーAPIについて簡単におさらいしましょう。ポップオーバーAPIはその名の通りポップオーバーを実装するためのものです。ポップオーバーとは画面上の最前面に表示させるUIで、確認メッセージやトースト、メニューなどに使えます。 ポップオーバーAPIを使わなくてもCSS、JavaScriptを駆使して同じようなUIを作れますが、ポップオーバーAPIを使えば細かなケアを実
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 - Qiita
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 はじめに 2024年春、応用情報技術者試験に独学で合格しました。 そのときずっと思っていたのが、 「もっとサクッとスマホで過去問を解けるサイトがあったらよかったのに…」 ということ。 そこで合格後、「過去の自分がほしかったもの」を形にするべく、 資格試験の過去問演習サイトを自作しました。 👇 サイトはこちら 📎 https://ap-shiken-navi.jp/ サイトの概要 応用情報技術者試験ナビというサイト名で公開中です。 現在は午前試験の過去問を対象に、以下の年度の問題を掲載しています。 令和6年 春・秋（160問） 令和5年 春・秋（160問） 令和4年 秋（80問） 📱 レスポンシブ対応で、スマホ・タブレット・PCすべてに対応しています。 ▼ トップページ画面イ
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 🔥 なぜ今このツールが注目されているのか X(Twitter)で335いいね・40リツイートを集め、GitHubでも1700スターを獲得した「solygambas/html-css-javascript-projects」が話題になっています。私も実際に3週間使ってみたところ、作業時間が約35%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。
HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。 HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書
本日（4/2）限り、HTML Living StandardとモダンCSSに完全対応した最新のリファレンス本が80％オフのワンコイン！
※本ページは、アフィリエイト広告を利用しています。 当ブログで紹介した際に大好評だったので、セールをずっとチェックしていたのですが、HTML Living StandardとモダンCSSに完全対応した最新のリファレンス本「HTML＆CSS全事典改訂4版」が本日（4/2）限り、なんと80％オフです！ 本書はHTMLとCSSのリファレンス本としてだけでなく、補足情報やテクニックの解説もかなり充実しており、Web制作者なら必ず持っておきたい一冊です。手元にあるリファレンス本が古いなと思った人には、特にお勧めします。 Kindle 日替わりセールなので、本日の4/2限り。 しかも、書籍価格2,420円が、80％オフの499円！ まさかのワンコインは絶対買いです！ 2024年12月24日に発売されたばかりで、このタイミングでワンコインになるのはかなりレアです。
【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc
Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com/al5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 しかし残念なことに、生成された図解の編集は困難を極めます。Claudeに指示を出すことである程度は修正できるものの、言うことを中々聞いてくれずトークン切れにあったり、時間がかかりすぎて時短になっていなかったり、自
HTML Emailも React + Tailwind CSS で書ける時代キテた - Qiita
gm! エルソウルラボ、Validators DAO の kishi.sol です。 フロントエンド開発の世界は、ReactやTailwind CSSをはじめとするオープンソース技術の進化によって劇的に改善され、スピーディかつ高品質なUIを構築する環境が整いました。 コンポーネントベースの開発スタイルが定着したことで、保守性が高まり、コードを資産として残せるようになったことは間違いありません。かつてレスポンシブレイアウトに苦戦したのも今や昔話で、Tailwindのエコシステムを活用すれば誰もが簡単に美しくモダンなWeb UIを作成できるようになっています。 しかし一方で、私たちを悩ませ続けてきた最後の砦があります。それが「HTMLメール」です。 HTMLメールの開発は、昔ながらの「黒魔術」こと、HTMLとインラインCSSを駆使する必要がありました。ReactやTailwindが主流となり、
VSCodeに新機能「Copilot Vision」プレビュー版が登場。モックアップ画像を読み込ませてHTML/CSSを作成、エラーのスクリーンショットから分析を依頼など
VSCodeに新機能「Copilot Vision」プレビュー版が登場。モックアップ画像を読み込ませてHTML/CSSを作成、エラーのスクリーンショットから分析を依頼など マイクロソフトはコードエディタVisual Studio Code（以下VSCode）の新機能として、Copilotでモックアップ画像の読み込みなどが可能になる「Copilot Vision」プレビュー版などの搭載を発表しました。 また、ターミナルにおいてbashやzsh、PowerShellなどの入力補完をしてくれるIntelliSenseの改善なども追加されています。 これらの新機能は3月6日付けで公開されたVSCode 1.98（February Update）に搭載されています。 Version 1.98 of @code is out now with drag and drop peek references
HTML / CSS / JavaScript 制作 Tips 番外編 - Qiita
HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
HTMLとCSSを独学で学びたい人にお勧めの解説書、現場レベルのスキルまでしっかり学べる！ -HTML＆CSS Webデザイン
※本ページは、アフィリエイト広告を利用しています。 HTMLとCSSを学ぶ近道は、手を動かすこと。本当なら制作会社で経験を積まないと身につけられないコーディングのスキルを独学で学べる解説書を紹介します。 本書は実案件をもとに作成された練習サイトを実装しながら、本格的にHTMLとCSSを学ぶことができます。デザインカンプや仕様も用意されており、かなり実践的に学べます。 本書は、HTMLやCSSのスキルを身につけるための学習サイトCodejumpの運営者である小豆沢氏による初の書籍。経験することでしか身につけられない実制作のスキルを独学でしっかり学べます。 B5判で普通の解説書とサイズは同じですが、すごいのは576ページと大ボリューム。さらにFigma, Adobe XDのデザインデータ、実装に使用する画像、HTMLやCSSのソースコードもサポートサイトからダウンロードでき、至れり尽くせりです
HTML Living StandardとモダンCSSに完全対応！ 使いやすくて見やすい、期待以上のリファレンス本 -HTML＆CSS全事典改訂4版
※本ページは、アフィリエイト広告を利用しています。 本書の改訂版がでるのを待っていた人も多いと思います。私もその一人です。 前書から2年が経ち、その間にも多くのHTMLの要素やCSSのプロパティが増え、この改訂4版では100種類以上の項目が追加されています。 本書はHTMLとCSSのリファレンス本としてだけでなく、補足情報やテクニックの解説もかなり充実しており、Web制作者なら必ず持っておきたい一冊です。手元にあるリファレンス本が古いなと思った人には、特にお勧めします。 HTMLとCSSが好きな人なら本書でご飯3杯は軽くいけます！！ 本書は2015年に刊行されて以来、ベストセラーを続けている「HTML＆CSS全事典」の最新版、改訂4版です。2024年11月現在の仕様にあわせて全面改定されており、HTMLとCSSのリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い
ReactでJavaScriptを使ってWordをHTMLに変換 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Word文書をHTML形式に変換することで、コンテンツクリエイターは、ウェブ展示に適したコンテンツを作成するために、親しみやすいWord文書編集環境を活用できます。また、Word文書の内容をウェブページに埋め込むことで、コンテンツのメンテナンス性と更新効率を向上させることができます。JavaScriptとReactを使用することで、開発者はクライアントブラウザ内で直接Word文書をHTMLに変換する機能を実現でき、開発ワークフローが簡素化され、ロード時間やサーバーコストが削減されます。この記事では、ReactアプリケーションでJavaS
Redashではクエリ結果にHTMLを使えるので便利 長いカラムをdetailsで畳める ほか - hogashi.*
Redash (https://redash.io/) でデータをクエリしたとき、長い値が入ったカラムがあると、クエリ結果が縦に長くなってしまいがち (画像では 3行しかないけど、 100行とかあると見づらいことも多い)。 長い値があるクエリ結果 / 縦に長くなりがちで見づらいこともある Redash では、なんとクエリ結果に HTML が書かれているとレンダされるので、 details タグで囲うことで畳むことができる。便利。*1 長い値をdetailsタグで畳むことができる / クリックしたら全部見れる リンクを張ることもできる。管理画面の URL などで、クエリ結果の id をクエリパラメータに入れたり、名前や時刻をリンクテキストにしたりすると便利。おもてなしとして target="_blank" をつければ、新しいタブで開くことができる。 リンクを張ることができる / target
HTML Drag and Drop APIの紹介と導入【React】
はじめに Web アプリケーション開発において、ユーザー体験を向上させる重要な機能の 1 つに、ドラッグ&ドロップが挙げられます。 シンプルなマウス操作で要素を移動したり、ファイルをアップロードしたり、 直感的な操作性を実現することができます。 今回は、HTML Drag and Drop API について調査したので、基礎的な内容をまとめました！ 時間の節約になれば、嬉しいです 🙌 HTML Drag and Drop API とは？ HTML Drag and Drop API は、ブラウザネイティブのドラッグ&ドロップ機能を実現するための API です。 要素をドラッグ可能にし、ドロップゾーンを設定することで、インタラクティブな操作を実装できます。 当記事執筆時点（2024/01/03）で、 主要なブラウザで広くサポートされており、追加のライブラリなしで実装可能です。 （01/05
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 | レバテックラボ（レバテックLAB）
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみた。 - Qiita
