Tailwind CSSを使う時の疑問と解決方法

2024/01/24 17 users Tailwind CSS CSS 疑問 つまづいたポイント

2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会... 続きを読む

CSS Modulesを型安全にする仕組み

2023/11/07 6 users CSS Modules 補完 ライブラリ クラス チーム

CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス... 続きを読む

デザインやイラストに使える配色本の決定版！ 配色アイデア手帖 第2版は、Photoshopやクリスタのスウォッチデータ・ポケット版PDFなど豪華ダウンロード特典が満載

2023/07/28 73 users 満載 グリスタ 完全保存版 改訂第2版 Photoshop

配色本の中で日本一（もしかしたら世界一）売れている（担当者様談）配色アイデア手帖、現在も好調に売れ続けている中、完全保存版となるべく改訂第2版が発売されました！ この第2版では、収録されているカラーすべてのスウォッチデータ、CSSファイル、ポケット版PDFと豪華ダウンロード特典が満載で、さらに新しい配色テ... 続きを読む

CSSプロパティを自動ソートしただけで、CSSのファイルサイズを（少しだけ）減らせた話

2023/02/21 17 users CSSプロパティ CSS Slack ユビー ファイルサイズ

Ubie Discoveryでプロダクト開発をしている@jimboです。 今回は症状検索エンジン「ユビー」のCSSファイルを改善した話を紹介します。 きっかけ ある日、社内のSlackにこんなメッセージが流れてきました。 自分の中ではある程度レイアウト関連やテキスト関連にグループ化して書くようにはしていたのですが、こういう類の... 続きを読む

Reactにて、CSSファイルもCSS in JSライブラリも無しにスタイリングできないか実験し、失敗した記録 - Qiita

2022/09/24 7 users Qiita React 記録

この記事の概要 私が日頃Reactを触っている際、CSS in JSをよく使います。 一口にCSS in JSと言っても、書き味やバンドルサイズなどそれぞれ違いがあって、選定に悩むこともしばしば。 要はJavaScriptの中でCSSが書ければ良いのだから、別な方法もあるのではないか？と思って実験した内容をまとめました。 この記事自体... 続きを読む

JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI

2022/02/14 16 users モーダル アコーディオン タブ UIコンポーネント CSS

アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで... 続きを読む

CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス

2020/05/10 46 users Webクリエイターボックス Bootstrap CSS

2020年5月11日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読... 続きを読む

CSSファイルから未使用のスタイルを削除する4つの方法 | コリス

2020/02/06 20 users コリス Bootstrap フレームワーク CSS 手動

CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する... 続きを読む

CSSファイルから未使用のスタイルを削除する方法 | コリス

2019/09/26 328 users コリス CSSフレームワーク ライブラリ スタイル アプリ

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻... 続きを読む

CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS | コリス

2019/08/02 116 users コリス CSSベース HTML要素 body内 フレームワーク

当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。 かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいか... 続きを読む

CSSを非同期ロードする最も簡単な方法 - Qiita

2019/08/01 229 users Qiita ブラウザシェア stylesheet CSS 同期

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか... 続きを読む

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

2019/03/28 445 users コリス CSS HTML 便利ツール ツール

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCS... 続きを読む

はてなブログに外部CSSを当てる方法とそのメリット - はるなぴログ

2018/06/16 37 users 外部CSS ロク メリット テキストエディタ 干渉

2018 - 06 - 16 はてなブログに外部CSSを当てる方法とそのメリット はてなブログカスタマイズ ドロップボックスに外部CSSファイルを置いて共有化する head内にリンクタグを設定 外部からCSSファイルを配信するメリット テーマCSSとの干渉を避けることが可能 小さくて見にくい「デザインCSS」の窓ではなく使い慣れたテキストエディタが使用可能 ファイルを更新するだけですぐにCSSが適... 続きを読む

Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス

2018/03/28 118 users セレクタ コリス CSS Chrome デベロッパーツール

Chrome デベロッパーツールは便利ですけど、こんな便利な機能もあったのですね。 要素に適用されているCSSのセレクタ・プロパティ・値が、どのCSSファイルのどこに記述されているのか1クリックで見つけ出すことができる便利なテクニックを紹介します。 続きを読む

Sassってみよう！〜@import編〜 | 三方良し！

2017/08/02 20 users Sass import CSS コンパイル 三方

cssでもお馴染みの @import ですが、 Sassでは少しだけ使い方が異なります。 cssの場合、@importで指定したcssファイルはあくまで外部ファイルとしてリンクされたカタチで読み込まれますが、 Sassの場合は、@importで指定したscssファイルは ひとつのcssファイルとしてコンパイル されます。 cssの@importは、外部ファイルのリンクによりHTTPリクエストが発生... 続きを読む

アドブロックされたらブログ本文を関西のええ加減なおっちゃん化するLPO - 太陽がまぶしかったから

2015/09/24 39 users Adblock ブログカスタマイズ LPO スクリプト アド

2015-09-24 アドブロックされたらブログ本文を関西のええ加減なおっちゃん化するLPO プログラミング プログラミング-はてなブログカスタマイズ アドブロックされたら記事本文が関西弁になるスクリプト 種明かしをすると、adspace.cssというのが、どうやらAdblockが『ブロック』するCSSファイルのひとつになるようです。同CSSファイルの中に『a-alert』というクラスを非表示にす... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナー コリス Step link rel

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。 スピナーの実装 実装は、簡単です。 「弾むボール」を例に、説明します。 Step 1: 外部ファイル 各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

文章の異なる部分を比較、表示してくれるツール「difff《ﾃﾞｭﾌﾌ》」｜に助けられた件 | OZPAの表4

2014/08/12 29 users Sass OZPA difff くだちい CSS

私がSassで構築したCSSファイルを直接修正した別の方に「CSSの追加修正しておいて」と言われまして。 （↑その時の気持ち） ヤダ。CSS直接いじりたくない。ｻｽりたい。 どうにかなるまいかといろんなツールを探していたところ、2つのテキストを比較して異なる部分（差分）を比較してくれるツール、difff《ﾃﾞｭﾌﾌ》に助けられました。ﾃﾞｭﾌﾌ。 下の枠に比較したい文章を入れてくだちい。差分 (d... 続きを読む

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse | コリス

2014/08/06 125 users class フレームワーク コリス div要素 HTML

p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 [html... 続きを読む

【レビュー】CSS拡張言語“LESS”を利用したWeb開発をサポートするツール「WinLess」 - 窓の杜

2014/07/11 22 users less コンパイル フォルダ Windows 寄付歓迎

レビュー CSS拡張言語“LESS”を利用したWeb開発をサポートするツール「WinLess」 指定したフォルダにあるLESSファイルをCSSファイルへまとめてコンパイル （2014/7/11 11:00） 「WinLess」v1.8.3 「WinLess」は、登録したフォルダにあるLESSファイルをCSSファイルへまとめてコンパイルできるソフト。寄付歓迎のフリーソフトで、編集部にてWindows... 続きを読む

効率化と均質化 - Weblog - Hail2u.net

2014/05/01 15 users Weblog hail2u.net 均質化 エディタ 前者

世の様々なツールは様々な作業を自動化して実行してくれるものだ。自動化の目的は効率化と均質化に分かれる。前者がとにかく素早く作業を終えることを目的としているのに対し、後者は誰が使っても同じ結果で作業が終わることを目的としていると言い換えても良い。 LiveReloadを使ったCSSファイルの保存をトリガーとしたブラウザー上でのCSSのみの再読み込みは効率化を目的とした自動化の一例だ。エディタでCSS... 続きを読む

使われていないCSSを探す方法 | マイナビニュース

2014/04/07 310 users CSS 既存 当初 マイナビニュース ファイル

Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイ... 続きを読む

CSSプリプロセッサやポストプロセッサで出力されたCSSの整形 | Another Sky

2014/02/15 31 users インデント Sass fragmentary ベンダー接頭辞

SassなどのCSSプリプロセッサやAutoprefixerのようなポストプロセッサを利用すると、プロセッサ規定のインデントや改行方法でCSSが整形されます。これについては@myakuraさんがAutoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryの最後で懸念事項として上げられていましたし、僕も2011年の年末にSassで出力するCSSファイルを自社のCSS... 続きを読む

Webフォントの非同期読み込み - Weblog - Hail2u.net

2013/12/25 83 users Weblog hail2u.net import 並列 CSS

Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非... 続きを読む

Compassで書きだすCSSファイルを軽量化する - to-R

2013/09/02 51 users Compass to-R compress 半面 改行

Compassは便利な半面、書きだされるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書きだされるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書きだしてくれます。config.rbに以下のコードを追加するだけで圧縮できます。 output_style = :compress... 続きを読む