さらば命名規約!! だが CSS設計よ、お前は死なず俺の中で生き続ける。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる
AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 AI コーディングエージェントにフロントエンドのコードを書かせる際、デザインの正確なコンテキストを提供することが課題の 1 つです。特に何も指定せずにフロントエンドのコードを書かせると、紫色の配色やグラデーションに偏りすぎたり、Inter や Roboto など特定のフォントばかり使用する傾向があります。これは Tailwind UI のような人気の UI フレームワークの初期設定に Indigo（紫色）を採用しており、それが AI モデルの学習データに多く含まれていることが原因と考えられます。 AI によって誰でも一定水準のフロントエンドコードを書けるようになる一方で、画一的な
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【Nintendo Direct 2026.6.9】 https://www.nintendo.com/jp/nintendo-direct/20260609/index.html 【任天堂ホームページ】 https://www.nintendo.co.jp/ 動画に含まれる情報は公開日時点のものです。
![ゼルダの伝説 時のオカリナ [Nintendo Direct 2026.6.9]](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfb83cfa9bceb048138f25216a6917d287af7867/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2FYoClUOMfrCc%2Fhqdefault.jpg)
まだinputに一々disabledかけている？
フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。 普段👇 <div> <input disabled={loading} type="email" name="name" /> </div> <div> <input disabled={loading} type="password" name="password" /> </div> <div> <input disabled={loading} type="submit" value="submit" name="button" /> </div> <fieldset disabled={loading}> <div> <input
インターネット閲覧ソフトとして広く使われてきた「インターネット エクスプローラー」は、利用する人が減る中、16日、サポートが終了となります。ソフト供給元のマイクロソフトは、後継となる「マイクロソフト エッジ」など別の閲覧ソフトの利用を呼びかけています。 「インターネット エクスプローラー」は、「ウィンドウズ95」とともに1995年に登場し、インターネット上のウェブサイトを閲覧するためのソフトとして家庭や企業で広く使われてきましたが、16日でサポートが終了します。 かつては圧倒的なシェアを占めていましたが、標準規格に対応しているグーグルの「クローム」などにシェアを奪われ、最近は利用者が減っていました。 ソフトを供給するマイクロソフトは、今後、セキュリティー面で問題が発生した場合でも、更新プログラムを提供しないということで、後継の閲覧ソフト「マイクロソフト エッジ」の利用を呼びかけています。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;
Goのプロジェクト構成について
Go のコミュニティーで昔から話題になっているテーマだと思いますので、自分なりの考えを共有したいと思います。プロジェクトの内容によって構成などはかなり違ってくると思いますが、ここでは DDD を使ったWebサーバーについて紹介します。よくあるユースケースではないかと思います。 フィードバックやコメントなど大歓迎です！意見交換もしていきたいです！ ファイルとネームスペース Go ではプロジェクト構成がそのままネームスペースになります。不便だと思う方もいるかも知れませんが、僕は非常に使いやすいと思っています。他の言語ではしばしば、プロジェクトの構成をすでに大まかに決めているか、もしくはコードを書く前に決めるようにすることが基本だったりします。しかし、Go ではコードを書きながらプロジェクトの構成、パッケージの追加・削除を行うことが一般的です。 よくインターネットで Go の初心者が、「プロジェ
claude code 安くて便利。 自前 MCP を大量に持ってると、手元に用意しておいた MCP サーバーに繋ぎたくなります。 以下のドキュメントによると、 claude --mcp-config=... でローカルな MCP サーバーを叩けるみたいです。 以下、claude code に手元の MCP サーバーを登録する例です。 追記: .mcp.json プロジェクトルートの .mcp.json が自動で認識されます。 ~/.zshrc 用のエイリアスを削除 ローカル MCP につなぐ MCP サーバー実装を書きます。 これは指定した URL を本文抽出して markdown で取得する実装です。 // .claude/mcp-server.ts // npm add -D @modelcontextprotocol/sdk zod @mizchi/readability impo
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
上記の引用にはいくつかのコード例が出てきます。1つめのコード例では、リンク（<a> 要素）に role="menuitem" を付けることでスクリーンリーダーのような支援技術に「ただのリンク」ではなく「メニューのアイテム」であることを認識させたり、aria-label 属性を使ってリンクのテキストを上書きして伝えたりしています。2つめのコード例では、ボタン（<button> 要素）に aria-pressed 属性を付けることで、このボタンがトグルボタン（「押されている・押されていない」の状態をもつボタン）であることを伝え、さらに属性値が "false" であることから「押されていない」すなわち「音を消していない」状態であることを伝えられています。 role="menuitem" や aria-pressed はHTMLの仕様の範囲では表現できない、WAI-ARIAの属性を使わなければ表現
CSSだいたい理解した
CSSを書き換えて、画面のどこかにあるボタンを押すだけのゲームです。 ただし、ボタンはズレていたり、隠れていたり、押せなかったり、なぜか埋まっていたりします。 margin、position、display、overflow などを駆使して、壊れたレイアウトをさらに壊しながら正解へたどり着こう！ CSSを完全に理解している人も、だいたい理解している人も、たぶん理解していない人も遊べます。 画面右側のエディターに CSS を入力して、左側のステージ上の要素を動かしたり、隠したり、押せる状態にしたりします。 編集モード ステージ上の要素をクリックすると、その要素を選択できます。 選択した状態で右側に CSS を入力すると、選択中の要素にスタイルが反映されます。 CSS は ; まで入力すると確定します。 プレイモード 正解のボタンを押せる状態にしたら、画面上部の プレイモード を押します。 そ
Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。 それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。 HTML Forms Library HTML Forms Libraryとは HTML Forms Libraryの使い方 HTML Forms Libraryとは HTML Forms LibraryはTailwind CSSやBootstrapやBulmaなど、さまざまなCSSのフレームワークで実装されたフォームのライブラリです。テンプレートを使用して、さまざまなフォームを簡単に実装できます。 ライセンスは、下記の通りです。 商用プロジェクトで無料で使用できます。 帰属は素晴らしいですが、必須ではありません。
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
本メンバーシップでは、フリーランス向けの記事の他に、ウェブコーディングで私がよく使うものを1記事3〜4個ずつご紹介していきます。 『ウェブコーディングに挫折したけどやり直したい人』や『実装はしないけどある程度知識は入れておきたい人』などに向けた内容です。 初心者を脱出したいコーダーや、コーディングで実装可能なデザインを把握しておきたいディレクターやデザイナーに役立つように書いていきます。 あなたの現場でぜひご活用ください。 ※「divって何？」といった基礎知識がない人や、逆にコーディング実装ができる人には向かない内容です。 コンテンツの順番を入れ替えるPCとスマホのレイアウトを見比べてみると、PCは画像とテキストが横並びになっていて、スマホは見出しと文章の間に画像があります。 ここでは見出しや文章がメインで、画像が見出しや文章を補足する意図で構成されたコンテンツとします。 このレイアウトを
この記事について この記事はアドベントカレンダー2021 Rust 四日目の記事です 概要 フロントエンドエンジニアである筆者がWASM（Rust）でWebアプリを作ってみたので、 その際の技術選定（主にビルド・開発補助周り）について 作ってみた雑感、特に「ぶっちゃけフロントエンドRust[1]ってどうなの？」という点 について書いていこうと思います。 TL,DR 2021年12月現在フロントエンドでのRustの採用は技術的に可能だがエコシステムが未発達なのでそれなりに技術力とコストを要求される とはいえ伸び代はかなりあるのでエコシステムが頑張ってくれれば、数年後には十分一般的な選択肢になってるかも（なってて欲しい） 主な対象読者 フロントエンドに携わる機会がある方々 この記事を読んでいただくことで・・・ フロントエンドという文脈におけるWASMの現状を知ってもらう フロントエンドをRus
新しい HTML インストール要素でウェブアプリをインストールする | Blog | Chrome for Developers
公開: 2026 年 5 月 12 日 ウェブアプリのインストールには常に JavaScript が必要でした。beforeinstallprompt イベントを使用すると、インストール フローはスクリプト内で完結します。新しい <install>要素では、この点が変更されます。HTML 要素を 1 つページにドロップするだけで、ブラウザが信頼できるインストール ボタンをレンダリングします。JavaScript は不要です。 Microsoft Edge チームは、Chrome チームと協力して、Chromium に <install> 要素を実装しました。現在、Chrome または Edge バージョン 148 以降ではフラグの背後でテストできます。また、148 から 153 までの両方のブラウザで使用できる オリジン トライアル としても利用できます。 ぜひお試しください。独自のオリジ
記事作成時点で広く使われているHTMLレンダリングエンジンは、ChromeやEdgeの「Blink」、Safariの「WebKit」、Firefoxの「Gecko」の3種に絞られています。ごく少数の大企業や団体がウェブの将来の決定権を握る状況を打破するべく、「ゼロから書かれた新しいウェブエンジン」として「Gosub」の開発が進められています。 Gosub Web Browser Engine https://gosub.io/ Gosubは開発の初期段階で、現時点ではHTMLパーサーが「HTML5を正しく解析できる段階」まで開発が進んでおり、CSSパーサーは概念実証の段階です。また、JavaScriptのエンジンとして、記事作成時点ではGoogleが開発するV8が使用されていますが、Gosubはモジュール性を重視しており、将来的には開発者が好みのJavaScriptエンジンを選択できるよう
Flask実践入門 - 基本的なアプリ構成を問い合わせフォームをつくりながら学ぶ｜ハイクラス転職・求人情報サイト アンビ（AMBI）
コンフィグ設定 まずはapps/config.pyを作成し以下のコンフィグを追加しましょう。実践的なアプリでは開発環境の他にstaging環境、本番環境、テスト環境などが存在するのでそれぞれ専用のコンフィグ設定を行います。 from pathlib import Path basedir = Path(__file__).parent.parent class BaseConfig: """ BaseConfigクラス """ SECRET_KEY = os.environ["SECRET_KEY"] WTF_CSRF_SECRET_KEY = os.environ["WTF_CSRF_SECRET_KEY"] class LocalConfig(BaseConfig): """ BaseConfigクラスを継承してLocalConfigクラスを作成する """ SQLALCHEMY_DA
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D
モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。 IEのサポート終了（6/15）も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。 参考: Don’t wait for June 15th! Set your own IE retirement date. たとえば、左揃えのリスト要素を中央配置にしたいとします。 HTMLは、下記の通りです。 <ol> <li>Foreword</l
Intro 長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。 これにより、推奨される MIME タイプが text/javascript に統一されることになった。 かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。 JavaScript MIME Types HTTP で Response する際に指定する Content-Type は、その内容がなんであるかを Client に Indicate し、適切な処理を促すために使用される。 例えば HTML が text/html であったりするように、JS も内容はテキストなので text/javascript が自然に思える。 しかし、例えば MS が実装していた JS 互換の JScript は
これからはXのリンクカードを小さいやつにするのが良さそう
Xでの大きいタイプのリンクカード（summary_large_image）からタイトルが消えたことで、さっそく悪用する人が出てきたようです。 写真を4枚並べた投稿を装いスパムサイトに誘導するポスト、X（旧Twitter）で増殖中 - やじうまWatch summaryならこれまで通りタイトルが表示される 一方で小さいタイプのリンクカード（summary）の表示のされ方は変更されていません。サムネイルは小さな正方形ですが、Webページのタイトルはこれまで通り表示されます。 今後は基本summaryがよさそう 情報のほとんどが画像となってしまったsummary_large_imageは、新規サイトにおいてはよっぽどの理由がない限り選ばない方が良いと思います。画像の中にタイトルを入れたとしても、リンクごとに画像のレイアウトやデザインがバラバラで見る人の負担は大きくなります。悪用が増えれば、ますま
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。Vue.jsの読み込みには
【2023/11/14追記】 SPA, SSRの説明を訂正、および不必要な箇所の削除を行っています。 また、この記事はNext.js等の、具体的にフレームワークで使用されている各概念を説明するものではないので、ご留意ください。 概要 SPA, SSR, SSGという技術用語を、業務の中でも、ネットの記事の中でもよく耳にするのですが、こういう感じかな？といううっすらとした理解のままだったので、今回整理しました。 内容に誤りがあった場合はご指摘いただけますと幸いです。 (MPA) -> SPA -> SSR -> SSG という順に説明をしていきます。 SPA SPAの要旨を述べると、最初に、HTML, CSS, JSなどの必要なassetsをWebサーバーから取得し、その内のJSをもとに具体的なUIを描画し、またページ遷移の際のUIの変化も、JSをもとに再描画を行うアーキテクチャとなります。
Do you know about Progressive JPEGs? Here’s a nice explanation of what a Progressive JPEG is. The idea is that instead of loading the image top to bottom, the image instead is fuzzy at first and then progressively becomes more crisp. What if we apply the same idea to transferring JSON? Suppose you have a JSON tree with some data: { header: 'Welcome to my blog', post: { content: 'This is my article
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 ベース・リセットCSS・ノーマライズ クラスレスのCSSフレームワーク 超軽量のCSSフレームワーク 汎用性に優れたCSSフレームワーク Material DesignのCSSフレームワーク ユーティリティベースのCSSフレームワーク 特化型のCSSフレームワーク ツールキット ベース・リセットCSS・ノーマライズ sanitize.css -GitHub reset.cssと
2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ
Leaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化してくれないので注意。
ブラウザの安全性を高めるための XSLT の削除 | Web Platform | Chrome for Developers
公開日: 2025 年 10 月 29 日 Chrome では、XSLT を非推奨とし、ブラウザから削除する予定です。このドキュメントでは、2026 年後半の削除前にコードを移行する方法について詳しく説明します。 Chromium では、XSLTProcessor JavaScript API や XML スタイルシート処理命令など、XSLT が正式に非推奨になりました。バージョン 155（2026 年 11 月 17 日）からサポートを終了する予定です。Firefox プロジェクトと WebKit プロジェクトも、ブラウザ エンジンから XSLT を削除する計画を発表しています。このドキュメントでは、XSLT を削除して Chrome の安全性を高める方法について説明します。また、これらの機能がブラウザから削除される前に移行するための手順についても説明します。最新の更新については、Chr
HTML First
HTML First is a style of writing web software that favours using the native capabilities and languages of the browser and reducing layers of abstraction (languages and toolchains) on top of them. Introduction Modern web development has changed a lot in the last decade. Before libraries like React came along, the common approach was to write your interfaces with html and use something like jQuery t
海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
元ネタ 参考にしたのはFigmaのこのポストですが、結構有名なデザインで、最初に見たのはこのポストだと思います。 still laughing at this pic.twitter.com/Ny525aAuYH — Joie Chung (@hellojoie) April 28, 2023 このポストの一連の引用や返信を見ると、海外でもっと綺麗にコーディングした方がいることを念頭に伝えておきます。 コーディングにあたって 実際２層の雲の間に太陽の影があったり、ボタンにマウスオーバーアニメーションがついていますが、クリック時には一度マウスオーバー判定を解除しないといけない部分が大変ポイントかなって思います。 個人的にトグルボタン程度でJSを書きたくないので、HTMLとCSSだけでコーディングしてみるか。という考えでコーディング始めました。 また、ボタンはPCとスマートフォンで大きさを変更
CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
この実装は、完全に想定外の発想でした！ スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。 Pop-up API Off Canvas Menu w/ :has() ⚡️ 実際の動作は、下記ページでご覧ください。 ※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります（後述）。 Pop-up API Off Canvas Menu w/ :has() ⚡️ まずは、HTMLを見てましょう。 ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。pop
Simple.css Framework
Are you using Simple.css? If you are, it would be great if you considered buying me a coffee to say thanks. Things like this really help open source software thrive. You can Buy Me A Coffee or even sponsor me on GitHub. ❤️ Simple.css is a CSS framework that makes semantic HTML look good, really quickly. Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML a
Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。 Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。HTML-in-Canvas は、<canvas> 要素の子として配置した HTML 要素の描画結果を、2D Canvas や WebGL、WebGPU で利用するための実験的な API です。元の HTML は DOM として保たれるため、Canvas 上の表示と DOM の位置を適切に同期することで、ポインターやキーボードによる操作、アクセシビリティツリーへの参加を維持したまま WebGL エフェクトを適用できます。 HTML
"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などに報告する必要がある情報を作り手に直接連絡できるため、スピード感がある対応できると見込まれています。 ただし、表
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
ゼルダの伝説 時のオカリナ [Nintendo Direct 2026.6.9]
「インターネット エクスプローラー」きょうでサポート終了 | NHK
display:contents;って何？どんな時に使うと便利なの？ - Qiita
claude code でローカルなMCPサーバーを叩けるようにする
CSSでフォームの実装に悩んだら！ さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
いざという時に使えるコーディングTips集｜小林 / デザイナー
フロントエンドエンジニアがWASM(Rust)でWebアプリを作ってみた
BlinkでもWebKitでもない新開発ブラウザエンジン「Gosub」
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集 | PhotoshopVIP
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ - レバテックLAB
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方
JavaScript のメディアタイプと RFC 9239 | blog.jxck.io
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
SPA, SSR, SSGって結局なんなんだっけ？
Progressive JSON — overreacted
Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
Anchor Positioningが全対応。HTML・CSSだけのポップオーバーが完全体に
これがフロントエンドで話題になった記事！ ICS MEDIAの2024年 - ICS MEDIA
1Password のオートコンプリート機能をサービス提供側で無効化する
CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
HTML-in-Canvas コンポーネントライブラリ Canvas UI
civitai.red
www.yomiuri.co.jp
www.asahi.com
ichikawa-seitai-irodori.com
blog.livedoor.jp/reer121
ameblo.jp/momo1945815