[B! css] sugyanのブックマーク

Tailwind CSS を使ったダークモード実装の効率的なアプローチ

はじめに現在、海外のプロダクトのほとんどがダークモードに対応しており、その普及は加速しています。ダークモード対応は単なるデザイン要素にとどまらず、プロダクトの品質や開発力の高さ、アクセシビリティへの配慮を示す効果もあります。日本ではまだまだ普及が遅れているダークモード対応ですが、効率的な実装を行えば実は少ない工数でダークモードに対応できます。この記事では Tailwind CSS におけるダークモードの効率的な実装について解説します。本記事は shadcn/ui や Tailwind UIのコードを参考にしており、著者の属人的アプローチではありません。結論 CSS 変数と Tailwind CSS の色拡張を使うことでテーマごとの配色を一元管理しつつ、Tailwind CSS の直感的な DXも維持できます。Demo実装例を用意しました。 css と tailwind.co

sugyan 2024/03/15

メモ

Tailwind
CSS

リンク

Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは。フロントエンドエキスパートチームの穴井︵@pirosikick︶です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。このブログは、6/19に福岡で開催した﹁Google I/O '19のWebをまとめる会﹂で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけとあるプロダクトのCS

sugyan 2019/08/21

リンク

モダン日本語フォント指定

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。昔からマークアップエンジニアを悩ませて…

sugyan 2016/10/18

リンク

Primer

Redirecting to primer.style

sugyan 2015/03/24

github
css

リンク

Takazudolog - OOCSSとSass

CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。OOCSS + Sass OOCSSってなんぞまず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an

sugyan 2012/12/10

リンク

Masonry

What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice

sugyan 2012/10/17

リンク

[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework

sugyan 2012/09/20

リンク

Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot

Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and

sugyan 2012/04/23

JS使わずにCSSでマインスイーパ…SUGEEEEE

css
game

リンク

TASS - Ultimate lightweight stylesheet language

Back to the source. TASS does not provide any complex syntaxes or functions, so this is just little better CSS. TASS is like SCSS in SASS and can be used with only browsers like LESS because written in JavaScript. Check it out! <link rel="stylesheet/tass" type="text/x-tass" href="styles.tass"/> <script type="text/javascript" src="tass.js"></script> Download Variables $base-color : #333; $base-back

sugyan 2012/02/25

リンク

画像のアップロードをかっこよく実装する - (ﾟ∀ﾟ)o彡 sasata299's blog

2012年02月16日11:36 Webアプリ画像のアップロードをかっこよく実装する久しぶりのブログですこんにちわ！最近は主になめこを栽培しております。なめこ図鑑46%まできたお (*´ω｀*)— ささたつ(Tatsuya Sasaki) (@sasata299) February 13, 2012 ということで、今回は画像のアップロードをかっこよくやる方法について紹介します。画像のアップロードというか、アップロードしたいファイルの選択ですかね。Twitterだとこんな感じのカメラ画像があって、それをクリックするとファイル選択画面になるんです。アップロードしたいファイルの選択って、ふつーに実装するとこんな感じのデザインです。かっこよくない！！まぁこんな感じですよね。そうじゃなくて、Twitterみたいな感じで画像をクリックするとシャキーン！とファイル選択画面が出てくる、そうい

sugyan 2012/02/18

リンク

CSSでMacBook Airを購入（CSSで加算演算） - jsdo.it - Share JavaScript, HTML5 and CSS

counter-incrementを利用しての加算演算。加算演算といっても加算した数値を表示するだけです。 iPhone Safariでも動くようにlabelにクリック属性を加えました。 Chrome15 : ok Firefox8 : ok Opera11.5 : ok Safari5 : 演算が動かない︵原因不明︶ iOS5 Safari → ok IE9 : counter-incrementも使えchecked疑似要素も使えるが、疑似要素によるcounter-incrementが効かない IE10 : wakaranaiyon todo ・iPhone最適化 <input name="mba" id="mba-none" type="radio" value="0" checked><div id="div-mba-none"> <input name="mba" id="mba

sugyan 2011/11/15

リンク

Components · Twitter Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2

sugyan 2011/08/23

リンク

Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot

Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and

sugyan 2011/07/29

すごい、それっぽい！

jsdoit
css

リンク

CSS Lint

Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi

sugyan 2011/06/16

CSSのsyntax check! "npm install -g csslint"でnode製コマンドラインツールもインストールできる！

css

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版﹁Selectivizr﹂で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

sugyan 2011/06/15

css

リンク

CSS3のvim syntaxをちょっといじった - Webtech Walker

vimでCSS書いてるとMediaQueryとかの表示がうまくいかなくてずっとほっといたんですけど、すでにやってる人がいたので使ってみたんですけど、ちょっと気になるところがあったりしたので直したり、ベンダプレフィックス追加したりしました。 hokaccha/vim-css3-syntax - GitHub 不具合的なものは本家にマージされたんですが、ベンダプレフィックスの追加は本家のほうの方針では取り入れないということだったので、ベンダプレフィックスも対応したいという人はこちらをお使い下さい。本家の元ネタはこちら。 VimのCSS3シンタックス・ファイルみたいな何か - Weblog - hail2u.net

sugyan 2011/04/20

リンク

CSS桜ひらひらはこうして作りました

都内の桜ももう散りましたね。先月、jsdo.itというJavascript, HTML5, CSSをブラウザ上でコード書いて共有できるサイトに、桜の花びらが舞うCSSアニメーションのコードをアップしました︵Webkitブラウザ限定ですが︶。さーくらー　ひらーひらー - jsdo.it これのbookmarklet版のコードも公開してます。桜ひらひらbookmarklet - jsdo.it 今SafariかChromeを利用している方なら、下記のリンクをクリックすればこのページ内を桜の花びらが舞います。桜ひらひらbookmarklet これをどうやって実現しているか今日は書きたいと思います。まあ僕がやることはいつもたいしたことじゃありません。多少手間がかかることをちまちまやってるだけです。 ■花びらまず花びら。半分ずつ作ります。下の画像はdivを加工していく過程で、左から右に

sugyan 2011/04/19

jsdoit
css

リンク

日記 | ヨモツネット

blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日ブログ作りなおそうかなーと思って、この Webサイトをみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せてみたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページはXHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき

sugyan 2011/04/13

IE10
CSS

リンク

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI- jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること

sugyan 2010/10/26

design
css

リンク

CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ

インターンシップにきています。こんにちわ。(・`д・ノ)ノ面白法人カヤックでインターンシップ中のどうもぽんたです。先週、鎌倉本社から自由が丘支社に移りました。自由が丘に来たのは初めてなので、﹁丘ないなぁ。﹂って思いました。そしてこちらはインターン研修で、書いているエントリーです。どうか柔らかいまなざしで見守って下さいませ！今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。といっても僕自身つくったことがないので、一緒に挑戦しましょう！！つづきからどうぞ！すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。ラムネのようなテイストのボタンですな。これを画像なしでつくってるっていうからスゴイ！ここまでレベルの高いボタンはつくれないので、基本重視のシンプルなCSSボタンをつくろうと思います。まずはC

sugyan 2010/09/22

ボタンの話

css
jsdoit

リンク

はてなブックマーク

タグ

関連タグで絞り込む (29)

cssに関するsugyanのブックマーク (24)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス