HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。 HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書
Chrome 135で追加された、CSSの新しい機能14個を紹介します。 今回のアップデートで目玉はスクロールオフセットのサポート、レスポンシブな自由形式のシェイプを作成できるshape()関数、インタラクティブなスクロールボタンを作成できる::scroll-button()疑似要素など、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 135 Chrome 135 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに アンカーポジショニングの記憶されたスクロール オフセット shape()関数 ::scroll-button()疑似要素 ::scroll-marker
font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon
CSS Carousel Configurator
Experimental Feature ⚠️ Unsupported ⚠️ This configurator requires a few CSS features that aren't present in your current browser. To try this out, download Canary and visit chrome://flags/#enable-experimental-web-platform-features in a tab, enable it, and reload this page. <ul class="carousel"> <li>…</li> <li>…</li> … <ul>
Xで「Chrome 135からCSSだけでカルーセルを実装できる」という投稿を見かけたので実際に試してみました。 Chrome for DevelopersでもCSS を使用したカルーセルとして紹介されていました。 この記事によるとCSS Overflow Module Level 5の機能として、スクロールを操作するボタンやマーカーが実装できるようになったとのこと。これを使えばJavaScriptなしのCSSだけでカルーセルが実装できるみたいです。 完成形 最初に最終的に作成したカルーセルを置いておきます。すべてJavaScriptなしで実装されています。（Google Chromeの135以降で確認してください） Xで動画も投稿しているので、動きだけだったらこちらでも確認できます。 基本的な実装 元記事ではリッチなサンプルが紹介されていますが、実装が紹介されているのは基本的な部分だった
この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この記事がAIによって書かれたこと、また公開日が4月1日であることに十分注意した上でお読みください。 皆さんこんにちは。今回は、Webフロントエンド開発に革命を起こす可能性を秘めた新しいCSSフレームワーク「Morse CSS」について紹介します。 結論 Morse CSSは、HTMLにクラスを一切追加せずにスタイリングができる革新的なCSSフレームワークです。代わりに、モールス信号のパターンを表現する空の<i>要素と<span>要素を使って、要素にスタイルを適用します。これにより、HTMLがクラス名で溢れかえることなく、コンテンツと構造に集中したマークアップが可能になります。 他のクラスレスCSSフ
CSSのmarginを使わずにWebサイト構築してみた
はじめに 2023年の6月22日に開催された「Sendai Frontend Meetup #9」で「marginを使わずにWebサイト構築してみた」という内容でLTをしました。 もはや2年近く前の登壇なんですが、記事にしようと思ったけどめんどくさくなって放置した書きかけの記事が残ってました。Cursor使って技術記事を書くのに慣れたくてちょうど良かったので供養します。 CSSでレイアウトを組むとき、display: grid や display: flex の gap プロパティで余白を調整することが多くなりました。 それで、ふと「paddingとgapがあればWebサイト組めるのでは？」と半分ネタと半分本気で考えたのでやってみることにしました。 当日のLTで使ったスライドはこちら。 ルールと素材 ルールは以下 ＿人人人人人人人人人人人＿ ＞ marginを使わない ＜ ￣Y^Y^Y^Y
30 Mar 2025 · 22 min read Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed! <img src="…" style="--lqip:192900"> The custom property above gives you this image: Try changing the property’s value (WARNING: FLASHING) Granted, it’s a very blurry placeholder especially in contrast to other leading solutions.
本日（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日に発売されたばかりで、このタイミングでワンコインになるのはかなりレアです。
こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。 ボタンデザインはサイトの印象を大きく左右する重要な要素です。 しかし、毎回デザインを考えるのは大変ですよね。 そこで今回は、CSSだけで簡単に実装できるおしゃれなボタンデザイン20種類をご紹介します！ どれもコピペOKなので、ぜひあなたのサイトで活用してください。 1. ホバーで色が変わるボタン See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen. 2. グラデーションが動くボタン See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen. 3. 3D風に押せるボタン See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on C
（＊価格は掲載時のものです。購入時にご確認ください。）
この記事には広告を含む場合があります。 記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。 sangoユーザーならお馴染ですが、サルワカさんのサイトってきれいですよね。 さるでもわかるくらい簡単にブログで役に立つ情報を発信してくれていて、月間250万PVを越えているそうですが、サイトのキレイさを見ていたら納得できます。 サルワカ 今回はサルワカさんのサイトを見ていたらよく出てくる画像に吹き出しがついてるやつを紹介します。 こんなやつです。 サルワさんの吹き出し
Leafletのマーカーを変えたい時、検索するとプラグインを使う方法がヒットします。 Leaflet入門｜プラグインでマーカーの色を変更する（leaflet.sprite） 【OpenStreetMap】Leafletでマーカーの色を変更する方法 しかし色を変えるためだけに外部ライブラリの依存関係を増やしたくありません。 色々試していたところ、CSSを使えば簡単にマーカーの色を変化させられることに気づきました。 ▲左が変更後、右が変更前（デフォルト）のアイコン CSSだけでLeafletのマーカーの色を変える方法 まずL.iconでカスタムアイコンを宣言します。 （指定するURLはデフォルトのアイコンが置いてある場所なら何でもOKです。適宜環境に合わせて変更してください。） const redIcon = L.icon({ iconUrl: "https://esm.sh/leaflet@
（＊価格は掲載時のものです。購入時にご確認ください。）
アプリケーション Obsidian のスタイルは、CSS カスタムプロパティを上書きするだけで変更できる場合があります※当サイトにはプロモーションが含まれています。 1. はじめにObsidian のスタイルをカスタマイズするには、CSSスニペットを使います。つまり、自分で書いたCSSファイルを読み込ませてスタイルを適用できます。 この CSSスニペットでCSSを書く際、自分でセレクタを指定してスタイルを書くのではなく、CSSカスタムプロパティの値をセットするだけで目的のスタイルを変更する場合があります。 そのおおまかな流れを紹介します。 ※ Obsidianが使っているCSSカスタムプロパティは、公式サイトで公開されていないようです。どこかで公開されているのでしょうか？ 2. CSSカスタムプロパティーを使ってスタイルを変える(1) Obsidianでノートを表示し、DevTools を
こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。 夏といえば、花火大会、縁日、夏祭り…。 Webサイトでも、そんな季節感を演出できたら訪れた人の印象もグッと良くなりますよね。 今回は、CSSとJavaScriptを使って夜空に花火が打ち上がるようなアニメーションを実装する方法をご紹介します。 コピペで使えるコードも用意しているので、花火大会の告知サイトやイベントLPにぜひ活用してみてください！ 完成イメージ 下記のコードを使えば、夜空にカラフルな火花がシュッと打ち上がってパッと弾けるようなアニメーションが再現できます。 See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen. 実装コード HTML <canvas id="fireworks"></canvas> CSS body { margin: 0
Awesome CSS shorthand tricks to write less code 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 フロントエンド開発者として、ウェブアプリケーションを設計する際に少ないCSSコードでより多くの効果を得たいと思うものです。 CSSテクニックに興味がある方は、ぜひこの記事を読み進めてください。より少ないコードでより最適化され、保守しやすいコードを書くのに役立つ11の素晴らしいCSSショートハンドテクニックを紹介します。 1. CSS insetプロパティ 2. min()/max()関数 3. CSSスケールプロパティ 4. :is()疑似クラス 5. :has()疑似クラス 6. margin-inline / margin-block 7. clamp()関数 8. CSSフォントプロパティ
【実践解説】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%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。
事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンなCSSフレームワーク・「StyleXui」 - かちびと.net
StyleXui StyleXuiは事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンなCSSフレームワークです。 アコーディオンや通知、バッジ、フォーム、テーブルにナビゲーションなど基本的なUIコンポーネントに加えて、フォントサイズやカラー、背景、各サイズ設定、paddingやmarginなどなど、よくあるユーティリティクラスも用意された軽量なCSSフレームワークとなっています。 さらに、画像遅延表示やローディングなどのための小さなJavaScriptも備えてあり、一般的なWebサイトの構築の際にあると捗る要素が一式揃えられている印象です。 Ads CDNも用意されていますし、そもそも依存関係も無いので気軽に試せますね。 <link rel="stylesheet" href="https://cdn.stylexui.com/@v1.0.0-sta
CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました｜BLACKFLAG
CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。 画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。 そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を確認することができる「CSS Filter Preview」を作ってみたので紹介してみます。 CSS Filter Preview 「CSS Filter Preview」を別枠で表示 フィルター一覧 画面上のドラッグエリアに画像ファイルをドラッグ＆ドロップすると、画面下にfilterプロパティで設定できるフィルター効果が一覧で表示されます。 各フィルター効果はスライダーで値を変えることができ、画像に対して効果の強弱を見ながら設定を変更させることが可能です。 調整したフィルター値は、スライダー下に表示されている［f
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
Webプラットフォームの相互運用性が向上し、ベンダープレフィックスを必要とするCSSプロパティが少なくなりつつあります。 しかし、すべてのCSSプロパティでプレフィックスが不要とまでには至っておらず、Interop 2025でもプレフィックスが必要なCSSプロパティとしてtext-decorationが挙げられていました。 そこで、2025年時点でプレフィックスが必要なCSSプロパティには何があるのか、いくつか挙げてみたいと思います。 ベンダープレフィックスの種類 まず、その前にベンダープレフィックスの種類を確認しておきたいと思います。 ベンダープレフィックスには、次のようなものがあります。 -webkit-: Chrome、Safari、新しいバージョンのOpera、iOS用のFirefoxやChromeを含むほぼすべてのiOSブラウザ、任意のWebKitまたはChromiumベースのブ
ObsidianのカスタムＣＳＳスニペットの紹介｜hrn
ここでは、わたしがObsidianを利用しているなかで、「みえ方がもう少しよくなればな」などと感じて対応したことを紹介していきます。 環境について紹介する前提としての環境を説明します。 OS： Linux Mint 21.3 Obsidian： バージョン 1.6.3 カスタムCSSについては以下の条件です。 ベーステーマ： ダーク テーマ： Minimal 注記ベーステーマ「ダーク」、テーマ「Minimal」場合のみの対応です。 それ以外はテストしていませんので、これ以外でご使用の場合はみなさんでアレンジしてください。 テーマをMinimalにする方法は「テーマをMinimalにする」の項を参照してください。 個々のＣＳＳの確認は、「ObsidianでWeb開発者ツールを開く」の項にある方法でやっています。 ここに紹介したカスタムＣＳＳスニペットは「カスタムＣＳＳスニペットの内容」の項で
CSS チートシート
セレクタは、どのHTML要素にスタイルを適用するかを指定するために使用されます。基本的なものから複雑な組み合わせまで様々です。
今回、画面幅によるCSSの切り替えを行うにあたって、まず初めにやるべき記述がありますので、そちらから始めていきましょう。 まず初めに、HTMLのhead内に以下のものを記述します。 <meta name="viewport" content="width=device-width, initial-scale=1"> このコードが無いと後に行う作業をしても効果が出てこないので、まずはしっかりと記述します。 「viewport」とは「表示領域」のことです。「デバイスによってどんなふうに表示されるか」をこの記述で指示しています。 「width=device-width」でデバイスの幅に合わせてCSSが適用される形になります。「initial-scale」は「初期倍率」を示す値なので原則「1」を指定します。 それでは、早速下記のコードをCSSにコピペしていきます。 この@media screen
PHPerKaigi 2025にて、「PHPウェブアプリケーションの脆弱性対応戦略」というテーマでパンフレット記事を入稿しました。この記事では、その過程で学んだCSS組版についての経験共有です。 パンフレット記事の特徴記事の入稿は、通常のプレゼンテーション作成と異なる特徴があります。入稿という作業が必要になるのです。 具体的には、入稿先の求める形式に合わせてデータを作成する必要があります。執筆の経験がある方は、自分の書いた文章を編集の方々がきれいな雑誌や本に仕立ててくれた経験があると思います。 解決策自分でやるとしたら、どうやっていいかわからない。自分もどうしていいかよくわからんとなりました。 そんなあたなに紹介したいのがこの本です！「Web技術で「本」が作れるCSS組版 Vivliostyle入門」（株式会社 C&R研究所） 分かりやすい解説と豊富なサンプルで、CSS組版をステップバイス
（＊価格は掲載時のものです。購入時にご確認ください。）
Speed Lineアニメーションの作り方｜CSSとJavaScriptで動きをデザイン | JavaScript初心者向け練習問題とHTML・CSS模写練習でスキルアップ！
Webサイトにスピード感を演出する「Speed Line」アニメーションは、視覚的なインパクトを与えるだけでなく、モダンなデザインとして注目されています。本記事では、CSSとJavaScriptを使ったSpeed Lineアニメーションの作成方法を初心者向けに解説します。 1. Speed Lineアニメーションとは？Speed Lineアニメーションは、画面上にスピード感のある線が描かれるエフェクトです。これを使用することで、以下のような効果が期待できます： Webサイトの視覚的インパクトを向上ユーザーの注目を引くダイナミックなコンテンツと調和このアニメーションは、CSSの@keyframesで基本的な動きを作成し、JavaScriptを使って動的な要素を追加することで実現します。
この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この記事がAIによって書かれたこと、また公開日が4月1日であることに十分注意した上でお読みください。 皆さんこんにちは。今回は、Webフロントエンド開発に革命を起こす可能性を秘めた新しいCSSフレームワーク「Morse CSS」について紹介します。 結論 Morse CSSは、HTMLにクラスを一切追加せずにスタイリングができる革新的なCSSフレームワークです。代わりに、モールス信号のパターンを表現する空の<i>要素と<span>要素を使って、要素にスタイルを適用します。これにより、HTMLがクラス名で溢れかえることなく、コンテンツと構造に集中したマークアップが可能になります。 他のクラスレスCSSフ
（＊価格は掲載時のものです。購入時にご確認ください。）
擬似的に行罫線を引けるCSSを試す 擬似的に行罫線を実装するCSSを試したらいい感じだったのでシェア。 擬似的というのは、行罫線ならば本来一行毎に引かれるべきところ、内部処理の関係でそれができていない点がネックってところでしょうか。 でも、これはこれでアリというか、書くという体験がシンプルになった気がする。薄い罫線があるだけで意味のまとまりが感じられていいな、と。 ちょっと罫線が広がるのも地味に嬉しいポイント。読みやすくなります。 ライトモードダークモード行罫線を実現するCSS（スニペット）/* 行罫線 */ .theme-light .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer>.cm-content>div { border-bottom: 1p
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
『「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？』へのコメント
テクノロジー 「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
フォントをもっと自由に！ CSSのfont-variant活用術 - ICS MEDIA
「Google Chrome 135」が公開 ～スクリプトなし、CSSだけでカルーセルUIを実現／セキュリティ関連の修正は全14件
Chrome135の新機能を使ってCSSだけで実装するカルーセルを試してみた
Morse CSS入門: コードで語るクラスレスフレームワーク - Qiita
Minimal CSS-only blurry image placeholders
CSSだけで作る！おしゃれなボタンデザイン20選【コピペOK】
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月31日)
CSSコピペでOK！画像にサルワカ風の吹き出しを入れよう
CSSだけでLeafletのマーカーの色を変える簡単な方法 - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月2日)
Obsidian のスタイルは、CSS カスタムプロパティを上書きするだけで変更できる場合があります
夏のWebデザインにぴったり！CSS＋JavaScriptで作る花火エフェクトの実装方法
CSS匠の技！コードを書く量が激減するショートハンド術11選 - コハム
【CSS】コメントの書き方ミスに注意！CSSが反映されない時の解決方法 - Qiita
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
ベンダープレフィックスが必要なCSS プロパティ 2025 | フロントエンドBlog | ミツエーリンクス
【初心者向け】画面幅によってCSSを切り替える方法 | 名古屋のホームページ制作なら ＷＷＧ ｜ 企業のWeb制作会社
hanhan's blog - CSSで組版！PHPerKaigiパンフレット記事作成
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月3日)
Morse CSS入門: コードで語るクラスレスフレームワーク - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月29日)
Obsidian Tips：擬似的に行罫線を引けるCSS｜MaybeFix
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月1日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月30日)
Hugoブログのリニューアル - Tailwind CSSとClaudeのプロンプトエンジニアリングで実現したデザイン改善
拡大されたcanvasでピクセルを綺麗に表示させたい時にCSSがいい感じだった - Qiita