Claude Code で HTML を出力する際に CSS フレームワークを指定すると便利 - Qiita
HTML 出力は見やすくて自由度が高い Claude Code に成果物を出力させる際、プレーンテキストや Markdown ではなく HTML で出力させると、そのままブラウザ (Chrome など) で開くことができ、Markdown の本部プレビューと比べて人間にとって非常に見やすくなります。 HTML は見出しや箇条書きにとどまらず、各 HTML 要素や CSS, JavaScript, SVG などを組み合わせて多彩な表現ができます。Markdown と比べてはるかに自由度が高いです。 Claude Code チームも 2026/05 に、Markdown ではなく HTML を出力形式として推奨する記事を公開しています。 HTML での問題: 見た目やフォーマットがばらつく 一方で、HTML を出力するつど見た目やフォーマットにばらつきが生じて困るという問題があります。 出力の
最近のHTMLを改めてちゃんと学んでみた
この記事は、以下のモダン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属性による宣言的な記述へ ブラウザネイテ
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
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 として表示する機能を追加し、ユーザーが
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
HTML Living StandardとHTMLの歴史 - とほほのWWW入門
目次 HTML Living Standard の概要 HTML 1.0 HTML+ HTML 2.0 Netscape Navigator 1.0～4.0 Internet Explorer 1.0～4.0 HTML 3.2 HTML 4.x WHATWG W3CとWHATWGの共同作業と再分裂 HTML5 W3CからWHATWGへの移管 HTML Living Standard の概要 HTML 1.0～2.0 は IETF が、HTML 3.2～5.2 は W3C が標準化を進めていましたが、W3C とは別に、Apple, Mozilla, Opera の開発者らが設立した WHATWG という団体が独自に策定を進めている HTML 仕様です。HTML Living Standard と呼ばれ、バージョン番号や第何版という概念がなく、日々、改版が進められています。 HTML Livi
「HTML解体新書」HTMLのこれからと向き合うための本 - クラウドワークス エンジニアブログ
「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTMLのこれからについて考えていることをまとめたものである。 本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。 creators.bengo4.com まだまだHTMLについて知らないことがあった 私がHTMLについて始めて触れたのは、とあるブログサービスのHTML編集機能からだ。その頃は HTMLの仕様というものを知る由もなく、どういったタグを使うと画面上にどのように表示され
【第4弾】少しのコードで実装可能な10のCSS小技集
【第4弾】少しのコードで実装可能な10のCSS小技集CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集 目次要素の上下左右中央配置画面幅いっぱいに画像を配置リストマーカーの色を変える言語にあわせて引用符を変更クリックで文字列を選択背景画像を見切れないよう繰り返し表示入力時の縦線の色を変更ドラッグで要素のサイズを変更できるようにするfloat は flow-root で解除文章をカラム分けしてラインを入れるHTML・CSS の全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の
少しのコードで実装可能なHTML小技集
少しのコードで実装可能なHTML小技集これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ 少しのコードで実装可能な 10 の CSS 小技集 目次セレクトメニューの選択肢をグループ化type 属性値によって入力欄が変化スマートフォンでエンターキーのテキストを変える画像の遅延読み込みテキストの折り返し位置を指定する番号付きリストの順番を変更する簡単アコーディオン任意のテキストを自動翻訳させないリンク先のテキストを指定してスクロールさせる1. セレクトメニューの選択肢をグループ化複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多い場
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
"security.txt" についてまとめみた
CISSPの継続学習で知ったので忘却録としてまとめました。 security.txtとは security.txtとは、IETFが提唱している、ウェブサイトにセキュリティポリシーやサイトの脆弱性を発見したときの連絡先を記載するための標準で、robots.txt、ads.txt、humans.txtと同じようにテキスト形式で記載します。 投稿当時（2021/10/22）では、第12版のドラフトまで完成していますが、近くRFC化される見込みです。 (2023/11/1:更新) RFC 9116としてRFC化されました。 設定の効果 独自開発したWebサイトなどの脆弱性（XSSやSQLインジェクション等）の報告先を独自に設定することができます。したがって、いままでJPCERT/CCなどに報告する必要がある情報を作り手に直接連絡できるため、スピード感がある対応できると見込まれています。 ただし、表
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
HTML属性を使い、ユーザーに優しい2要素認証を実現する方法
<title>An icon of a outbound link arrow</title> <path class="icon-stroke" d="M75.3037 3.98207L3 75.5935M75.3037 3.98207L76.0435 43.3021M75.3037 3.98207L35.951 3.59351" stroke="#F22F46" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> "> 2026 Gartner® Magic Quadrant™ for CPaaS1 <title>An icon of a outbound link arrow</title> <path class="icon-stroke" d="M75.3037 3.98207L3
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
ブラウザレンダリングの仕組み
【追記】↓100秒テックでイラスト投稿してます！よかったら見てってください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップになります。 Byte
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Living Standard ｜ HTML要素チートシート
Explore DOM Events
