Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
Claude Code で HTML と Tailwind CSS (CDN 版) でモックアップを作るのが便利という話をお手伝い先の CTO から教えて貰って、試したところとても良かったので雑に書いて行く。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書けないのでモックアップは今までは Figma を使って作っていた。なぜ Figma なのかというと、単に Figma 有名だし、おそらく多くの人が使ってるっぽいから情報が多いのだろうというだけ。 Figma の解説書を読んだり、Figma 公式 YouTube を見たりして色々学んで、本当に最低限は作れるようになった。実際自社サービスを作る時に開発担当者には Figma でこんなデザインがよいですみたいなものを作り、共有して作業をお願いしていた。 Claude Code でのモックアップ作成Claude Code を
HTMLとCSSだけでMinecraftを再現
「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。 CSS Minecraft https://benjaminaster.com/css-minecraft/ 上記のページにアクセスすると以下の画面が現れます。 用意されているブロックは全部で7種類。左下から選んでフィールドをクリックすると設置できます。 右下のボタンをクリックするとフィールドの位置を変えられます。「Vertical」で垂直方向への視点移動、「Horizontal」で水平方向への視点移動、「Rotation」でフィールドの回転、「View」で視点の上下移動ができます。 左下のツルハシをクリックしてからブロックをクリックすると、ブロックを削除できます。 ブロックを設置できるのは9×9×9マスの間のみ。 最初からあるブロックを横に伸ばすことはできませんが、削ったり、新しいブロックに置き
【実践解説】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日に発売されたばかりで、このタイミングでワンコインになるのはかなりレアです。
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のリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い
サイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法 - Qiita
Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。 HTMLの基礎 HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、<div>、<header>、**<nav>**などのタグを使用して、ページの構造を定義します。模写したサイトでは、ハンバーガーメニューを含むレイアウトが特徴でした。以下はその基本的なHTML構造です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイト名</title> <link rel="stylesheet" href="sty
シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示するそのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト
※本ページは、アフィリエイト広告を利用しています。 CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。 Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。 本書は、先週発売されたばかり！ Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「HTMLのスーパーセット」Svelteはこんなに進化している — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
登録不要・無料のPython学習環境「PyWeb」にWebアプリ（CGI）実行機能が追加／HTML/CSSでWebフォームを作って、Pythonプログラムと連携
A Subtle Nicety of Fault Tolerance in HTML & CSS