「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？
yama @13_ya_ma エンジニア1年目｜プログラミング学習中のリアル発信中 元・人材業界→未経験からエンジニア転職（2024年） ブログで初心者向けに学びや仕事Tipsを発信しています！ ふらっと1人で海外いったりします🇹🇭🇰🇭🇻🇳🇺🇸🇰🇷🇫🇷🇧🇪🇬🇧🇹🇷🇩🇪 yyoshiblog.com yama @13_ya_ma そういや昨日「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。 これエンジニア界の常識なんか。 2025-03-28 07:18:07
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>
Chrome 135で追加された、CSSの新しい機能14個を紹介します。 今回のアップデートで目玉はスクロールオフセットのサポート、レスポンシブな自由形式のシェイプを作成できるshape()関数、インタラクティブなスクロールボタンを作成できる::scroll-button()疑似要素など、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 135 Chrome 135 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに アンカーポジショニングの記憶されたスクロール オフセット shape()関数 ::scroll-button()疑似要素 ::scroll-marker
この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この記事がAIによって書かれたこと、また公開日が4月1日であることに十分注意した上でお読みください。 皆さんこんにちは。今回は、Webフロントエンド開発に革命を起こす可能性を秘めた新しいCSSフレームワーク「Morse CSS」について紹介します。 結論 Morse CSSは、HTMLにクラスを一切追加せずにスタイリングができる革新的なCSSフレームワークです。代わりに、モールス信号のパターンを表現する空の<i>要素と<span>要素を使って、要素にスタイルを適用します。これにより、HTMLがクラス名で溢れかえることなく、コンテンツと構造に集中したマークアップが可能になります。 他のクラスレスCSSフ
cssと少しのJavaScriptで、ヘッダー追従要素あっても、それが被らないでスムーズスクロールを実装する - Qiita
まずはじめに ヘッダー部分に追従要素がある時、ページ内スクロールをすると、その追従要素が重なってくることがあると思います。 それをcssと少しのJavaScriptで解決しようという話です。 どう解決するか cssだけでスムーズスクロールとスクロールした時の余白を設定できるようになりました。 scroll-behavior https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior scroll-padding-top https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top これらを使って解決しようと思います。 <div id="content" class="content"> <nav id="nav" class="nav"> <a href="#
こんにちは！静岡県浜松市で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
（＊価格は掲載時のものです。購入時にご確認ください。）
上記は"food hidden active"という３つのクラスがあるが JavaScriptやTypeScriptではこれを classList を使ってリストして扱う事ができる よく使うclassListのメソッド一覧 ・add() クラスを追加 element.classList.add('active') ・remove() クラスを削除 element.classList.remove('active') ・toggle() クラスをON/OFF切り替え element.classList.toggle('active') ・contains() 指定のクラスを持ってるかチェック element.classList.contains('active') → true/false 具体例 const div = document.querySelector('.food') as
（＊価格は掲載時のものです。購入時にご確認ください。）
この商品が関連するクーポン・キャンペーンがあります（10件）開催中のキャンペーンをもっと見る ※エントリー必要の有無や実施期間等の各種詳細条件は、必ず各説明頁でご確認ください。 【楽天モバイルご契約者様】条件達成で100万ポイント山分け！ 本・雑誌全品対象！条件達成でポイント最大10倍(2025/4/1-4/30) 条件達成で本全品ポイント2倍！楽天ブックスの読書管理アプリを使おう 【楽天Kobo】初めての方！条件達成で楽天ブックス購入分がポイント20倍 【楽天ブックス×楽天ウェブ検索】条件達成で10万ポイント山分け！ 【楽天全国スーパーx楽天ブックス】最大1000円分クーポンプレゼント！ エントリー＆お気に入り新着通知登録で300円OFFクーポン当たる！ 楽天モバイル紹介キャンペーンの拡散で300円OFFクーポン進呈 【楽天24】日用品の楽天24と楽天ブックス買いまわりでクーポン★ 【楽
（＊価格は掲載時のものです。購入時にご確認ください。）
Leafletのマーカーを変えたい時、検索するとプラグインを使う方法がヒットします。 Leaflet入門｜プラグインでマーカーの色を変更する（leaflet.sprite） 【OpenStreetMap】Leafletでマーカーの色を変更する方法 しかし色を変えるためだけに外部ライブラリの依存関係を増やしたくありません。 色々試していたところ、CSSを使えば簡単にマーカーの色を変化させられることに気づきました。 ▲左が変更後、右が変更前（デフォルト）のアイコン CSSだけでLeafletのマーカーの色を変える方法 まずL.iconでカスタムアイコンを宣言します。 （指定するURLはデフォルトのアイコンが置いてある場所なら何でもOKです。適宜環境に合わせて変更してください。） const redIcon = L.icon({ iconUrl: "https://esm.sh/leaflet@
事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンな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
2,860円（本体 2,600円＋税10%） 品種名書籍 発売日2025/4/15 ページ数320 サイズB5変形判 著者 Mana 著 ISBN 9784295021285
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
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
今回、画面幅によるCSSの切り替えを行うにあたって、まず初めにやるべき記述がありますので、そちらから始めていきましょう。 まず初めに、HTMLのhead内に以下のものを記述します。 <meta name="viewport" content="width=device-width, initial-scale=1"> このコードが無いと後に行う作業をしても効果が出てこないので、まずはしっかりと記述します。 「viewport」とは「表示領域」のことです。「デバイスによってどんなふうに表示されるか」をこの記述で指示しています。 「width=device-width」でデバイスの幅に合わせてCSSが適用される形になります。「initial-scale」は「初期倍率」を示す値なので原則「1」を指定します。 それでは、早速下記のコードをCSSにコピペしていきます。 この@media screen
CSS チートシート
📌 セレクタ (Selectors) HTML要素を選択するためのパターンです。 セレクタは、どのHTML要素にスタイルを適用するかを指定するために使用されます。基本的なものから複雑な組み合わせまで様々です。 種類 セレクタ 説明 例 要素セレクタ element 指定されたHTML要素（例: p, div）をすべて選択します。 p { color: black; } クラスセレクタ .classname 指定されたクラス名を持つすべての要素を選択します。 .important { font-weight: bold; } IDセレクタ #idname 指定されたIDを持つ要素を選択します（IDはページ内で一意であるべきです）。 #header { background-color: lightblue; } 属性セレクタ [attribute] [attribute=value] [a
書籍執筆しました！『CSSとJavaScriptで作る動くUIアイデアレシピ』HTMLやCSS、JavaScriptの入門書を書いてきた私ですが、それらの基礎を一通り学習した方向けに『CSSとJavaScriptで作る動くUIアイデアレシピ』という本を執筆しました！2025年4月15日発売です！ Amazon ｜ 楽天ブックス ｜ 出版社公式ページ こんな人におすすめHTML、CSS、JavaScriptの基礎を学んだあと、何を勉強しようか考えていた人動きのあるWebページ作りに興味のある人既存のWebサイトをベースにもう少しアレンジしたい人Webデザイナーとしてもう一歩スキルアップしたい人基礎の書き方がわかったとて、それを実際にWebページに組み込もうとすると、とたんに手が止まってしまう…なんてことはないでしょうか？本書ではボタン／画像／背景・画面遷移／ナビゲーションメニュー／スクロール
（＊価格は掲載時のものです。購入時にご確認ください。）
本日（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日に発売されたばかりで、このタイミングでワンコインになるのはかなりレアです。
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効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？』へのコメント
テクノロジー 「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントをもっと自由に！ CSSのfont-variant活用術 - ICS MEDIA
「Google Chrome 135」が公開 ～スクリプトなし、CSSだけでカルーセルUIを実現／セキュリティ関連の修正は全14件
Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
Morse CSS入門: コードで語るクラスレスフレームワーク - Qiita
CSSだけで作る！おしゃれなボタンデザイン20選【コピペOK】
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月27日)
TypeScript:3.classListとCSSセレクタ - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月31日)
CSSとJavaScriptで作る動くUIアイデアレシピ
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月2日)
CSSだけでLeafletのマーカーの色を変える簡単な方法 - Qiita
CSSとJavaScriptで作る動くUIアイデアレシピ - インプレスブックス
【CSS】コメントの書き方ミスに注意！CSSが反映されない時の解決方法 - Qiita
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
【初心者向け】画面幅によってCSSを切り替える方法 | 名古屋のホームページ制作なら ＷＷＧ ｜ 企業のWeb制作会社
書籍執筆しました！『CSSとJavaScriptで作る動くUIアイデアレシピ』
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月28日)
Morse CSS入門: コードで語るクラスレスフレームワーク - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月29日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月1日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年3月30日)
Hugoブログのリニューアル - Tailwind CSSとClaudeのプロンプトエンジニアリングで実現したデザイン改善
