はてぶ・Qiita・Zennのトレンド記事を紹介
CSSはWebページのデザインやレイアウトを指定するための言語です。HTMLと組み合わせて使い、見た目を美しく整えます。
CSSグラデーションで日の丸が実装できるとは驚いた！ 日本の国旗をたった3行のCSSで実装するテクニック 🔖 26
昨日、Xで話題になっていたCSSで実装する日本の国旗、日の丸を紹介します。 HTMLはdiv一つだけで、あとはたった3行のCSSで簡単に実装できます。もちろん、レスポンシブにも対応しています。 実際の動作は、デモページで...記事の続きを読む
目次はじめにアップデートによるメリットサンプルページ解説1-スタイルの優先順位を管理解説2-擬似クラスセレクター解説3-上下限つきのレスポンシブ文字サイズ解説4-親要素いっぱいまで広げる…
ブックマークしておくと便利！ よく見かけるUIコンポーネントやUI要素を実装するCSSのまとめ -CSSnippets 🔖 58
Webサイトやスマホアプリでよく見かけるボタンやカード、フォーム、ローディングなど、UIコンポーネントやUI要素を実装するCSSのコード、Tailwind CSSのコード、さらにはReactのコードをまとめたCSSnippetsを紹介します。 これ使うかもと思ったCSSは、自分の
CSSの:visitedの仕様が変わる！ 訪問済みリンクの履歴検出攻撃を無効化する機能がChrome 136に実装されます 🔖 23
今月リリース予定のChrome 136で、訪問済みリンクの履歴検出攻撃を無効化する機能が実装される予定です。 簡単に説明すると、:visitedによるリンク履歴が分割される機能が実装され、サイトA上でクリックしたサイトBへのリンクは、サイトA上では訪問済みになりますが、サイトC上
CSSで幾何学模様や繊細なグラデーションなど、さまざまな要素の背景にパターンを実装できる -MotifyX 🔖 18
美しい幾何学模様のパターン、ドットやグリッドベースのパターン、繊細なカラーの変化が楽しめるダークグラデーション、マトリックスのような近未来のパターンなど、CSSで実装された背景パターンを紹介します。 商用プロジェクトでも完全に無料で利用できます。カラーの変更などのカスタマイズも簡
Figma オートレイアウトはDev Mode CSSにどう反映されるか 🔖 1
はじめにFigma オートレイアウトは、フレームに含まれるオブジェクトを自動配置できる機能です。Figma上で余白や配置を一括指定することが可能となり、よりCSSに近い定義が可能となりました。この記事では、オートレイアウトがDev Mode（開発モード）のCSS表示にどのよ
はじめにみなさんはカルーセルを作りたいと思ったことはありますか？今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、少し複雑なJSを書かなくちゃいけなかったりと、…
HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド 🔖 57
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が
Chrome135の新機能を使ってCSSだけで実装するカルーセルを試してみた 🔖 3
Xで「Chrome 135からCSSだけでカルーセルを実装できる」という投稿を見かけたので実際に試してみました。https://x.com/argyleink/status/1902762109047562574Chrome for DevelopersでもCSS を使用した
Morse CSS入門: コードで語るクラスレスフレームワーク 🔖 2
この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この…
【CSS】コメントアウトの書き方ミスに注意！CSSが反映されない時の解決方法 🔖 1
はじめにHTMLとCSSでLPを制作している際に、なぜかbodyにCSSが反映されず、解決に時間がかかりました。本記事では、その解決方法を紹介します。この記事は個人的なアウトプットを目的として作…
「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？ 🔖 123
yama @13_ya_ma エンジニア| 2018年一部上場人材サービス企業入社→3年で支店長→2024年エンジニアデビュー |プログラミングブログ| 資格▶︎Java Silver, Python3認定基礎|ふらっと1人で海外いったりします🇹🇭🇰🇭🇻🇳🇺🇸🇰🇷🇫🇷🇧🇪🇬🇧🇹🇷
実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック 🔖 19
CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？ 下記のデモはうまく機能していますが、角丸が汚かったり、最初が鋭角の矩形にならなかったり、角丸をスムー
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの
はじめに!修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。しかし、フロントエンドエンジニアならCSSもしっかり学
ReactとCSSで一定時間表示される通知をやるときの色々な方法 🔖 33
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを
ReactとCSSで一定時間表示される通知をやるときの色々な方法 🔖 33
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。例えば、何かをユーザー…
UIデザイン・生成AIの関係を交えながら「Tailwind CSS」を観察する 🔖 1
タイトルにもありますが、今回はUIデザインと生成AIとの関係からTailwind CSS（ユーティリティクラスを主に使用するCSSフレームワーク）について考えていこうと思います。今更Tailwind CSSの話をするのか？と考える方もいらっしゃるかもしれませんが、スタイリングの