地味に便利なdisplay: contents; - Qiita
` 使いどき 1. フレームワークなどの都合で不要な<div>が発生してしまう 筆者がパッと浮かぶのがRuby on Railsのfield_with_errorsや、React on Railsのid="#{@name}-react-component-#{SecureRandom.uuid}"です。 不要な箇所に勝手にdivを挟まれてしまうため、flexやgridでのレイアウトが壊れてしまう場合があります。 こんなときはclass名やid名を指定してdisplay: contents;をかけてあげると解決します。 2. セマンティックとレイアウトを両立させたい 例えばこういうコードがあったとします。
CSSファイルから未使用のスタイルを削除する4つの方法
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。 4 Ways to Remove Unused CSS by Chidume Nnamdi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 再利用可能なUIコンポーネント内の未使用CSS 1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法 2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」
DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 多くの方はWebサイト全体で全てのページをチェックし、その中で未使用のCSSを削除してくれるものを求めている方が大半だとは思いますが、本ライブラリのようにWebページ単位でのツールは既存サイトのメンテナンスよりも、開発中にお世話になりそうですね。 というわけで試しに使ってみました。 動作サンプル 動作サンプルです。ダミーのHTMLはDummy HTML snippetsで、CSSはNormalize.cssを使ってテストしました。結果はサンプルの通りです。読み込まれたCSSを解析し、未使用のCSSを除去した結果が表示されています。 ChromeユーザーならDevtoolsで出来
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
