Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
inset - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【Web開発】ブラウザさえあれば使える無料オンラインエディター紹介・比較 2019 - Qiita
*アプリケーション自体は公開される 各サービスの特徴 CodeSandbox メジャーなフレームワークのテンプレートが用意されており、すばやく開発を始められる。他の人が CodeSandbox で作成したプロジェクトを Fork できるのも便利。Visual Studio Code と同じ Monaco というエディターをベースにしているため、オートコンプリート機能が充実しており、同様のショートカットを使えるので普段 VSCode を使用している人には使いやすいだろう。ただし拡張機能は使えない。 本質的に異なる2種類の開発環境が用意されている。 Client Environment ビルド処理を含め完全にブラウザ内で実行される いったんエディターを開けばインターネットに繋がらなくなっても開発を続けられる(ただし NPM パッケージの追加には当然インターネット接続が必要) Webpack の
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き最近、HTML要素をフェードイン/フェードアウトする実装をしました。 たかがフェードインアウト、と侮るなかれ。 「CSSだけで表現」「JavaScriptは極力関与しない」「とにかく簡潔に」と決めて取り掛かるといくほどか難易度がアップします（しました）。 実装を終え、なるほどなぁと思うところがあったのでそのことを書くことにしました。 よろしければお付き合いください。 # 達成条件以下を満たす、フェードイン/フェードアウトを実装します。 アニメーションをスタートす
クリックで波紋を出すエフェクト（Ripple Effect）実装メモ - Qiita
javascript エフェクト要素をクリックした座標を中心とした位置に移動させます。 エフェクトのアニメーション自体はcssで表現しています。 エフェクトを発動させるためのclassを付け替えます。 $(function() { var $clickable = $('.ripple'); /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */ $clickable.on('mousedown', function(e) { var _self = this; var x = e.offsetX; var y = e.offsetY; var $effect = $(_self).find('.ripple__effect'); var w = $effect.width(); var h = $effect.height(); /* クリックした
WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users
CSS in Action Invisible Content Just for Screen Reader Users You are here: Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, a
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法｜BLACKFLAG
ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio
apingが万能だと思ったらそうじゃなかった話
web上で使用するアニメーションは、楽をしてgifで作成していたのですがapingがかなり使えるという記事を発見し、早速使用してみた。 gifは輪郭がなめらかにならなかったり、透過に難ありだったり（アルファチャンネルがサポートされていない？）、色数に制限があったりするため、実際に使用する際はある程度の画質劣化を覚悟した上で使用していたのだが、そういった枷をぶちとばして使用できるのがapngである。 LINEスタンプでもアニメーションのあるものが出ているが、これらもapng形式にて作成されているらしい。 ということで実際に使用してみるとおどろき、データサイズも軽いので今後はapngでいくしかねえ〜と思った。 が、safariで動作チェックをしてみると「画像の色が時たま反転する・色がおかしくなる」という不具合が…。 同様の事象がないかと検索をかけてみたが、特に困っている方のページは出てこず。
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
CSS 何だったけってなりがちなメモ。initial と inherit - かもメモ
CSSのプロパティリセットする時に使うやつ。 initialとinherit CSS書かない日が続くとどっちが何だっけ？ってなることがあるのでメモ。(メモすれば忘れにくくなる！かも initial は 初期化 英語で initial は「初めの、最初の、初期の」とか。 プログラムとかでよく出てくるinitとかと同じ CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。 出典: initial - CSS: カスケーディングスタイルシート | MDN HTML <p class="text-red"> おいでよ<em>アイカツ</em>の沼！ </p> <p class="text-red"> おいでよ<em class="text-initial">アイカツ</em>の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kawamata Ryo on Twitter: "Viteと全然異なるアプローチ👀 開発サーバーでもESMではなく、バンドルするんだ。 ただ、そのバンドルをアクセスがあったファイル単位行う。必要なものだけ遅延でバンドルするために早いと。 バンドラーもesbuildを使わず自前で… https://t.co/d9UXZBO0T7"
https://twitter.com/__sakito__/status/1584963093268172800
池田 泰延 on Twitter: "Vercelがwebpackの後継を目指した「Turbopack」を発表。 ・webpackより17倍速い ・Viteより10倍速い ・Rust製 ・TypeScript, JSX, CSSもサポート ・webpackからのマイ… https://t.co/HpfBvZADmP"
Headless UI
jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。
https://twitter.com/makinko/status/1346103710733123605
タッチデバイスでCSSの:activeや:hoverを機能させる。 - Qiita
https://codepen.io/duplich/pen/qjYQEZ