Libraryが物凄く使えるので紹介します。PostCSSを使うなら必ず入れておきたいパッケージです。stylesheets.google翻訳すると「postcss-utilitiesはあなたのスタイルシートで@utilルールとして使うために最もよく使われるmixins、ショートカット、ヘルパーを持つPostCSSプラグインです。」って翻訳されました。~」って書けば便利なものが使えるパッケージですね。始めて公式サイトのドキュメントを確認した時に超絶便利すぎて椅子から転げ落ちるかと思いました。小技的なものもあるので勉強にも良いと思います。準備PostCSSの環境構築についてはPostCSSとstylelintの環境構築をご参照ください。これ通りにやればpostcss-utilitiesも入っているので記事読みながらやればすぐ使えるようになります。@utilを使う公式ドキュメントでの掲載順がアルファベット順で把握しづらかったので、使いそうな頻度順で紹介します。both;}言わずと知れたfloat解除の技ですね。3%;}なんと指定しない部分はnull指定で一行で書けてしまいます。null」と個数も通常のCSSと同じように書けるので便利です。3%;}こちらはpadding版ですね。CSSの仕様に入れて欲しいレベルです。none;}リストの初期スタイルをリセットしてくれるものです。横並びにしたいリストの時に活躍してくれます。absolute;}ポジション指定と位置指定を一行で書けます。位置を指定しないものはmarignと同じくnull指定です。値をmarginと同じく2つ・3つにできますが、基本的に「左上」や「右下」などの指定が多いのではないでしょうか。なるとnull指定で4つ書いていたほうがわかりやすそうです。100px;}横幅と高さを同時に指定したい時に便利そうです。固定させてしまいたい時やautoも使用する場合などに使えそうです。-50%);}コンテンツを中心に配置する指定を一行で書けます。}を追加すればFlexboxもいけるみたいで試したんですが、やりかたがよくなかったのかうまく反映されませんでした。機会をみて挑戦してみようと思います。auto;}コンテンツの横位置を中央に寄せたい時に使えます。width指定も必要なのでお忘れなく。#268BD2;}円形を一行で書けるものです。プロフィール写真とかの画像を丸く表示させたい時とかのコンテンツを円形にする時にさっと一行で書けるのは良いですね。※ドキュメント側のcolorは試してみたらbackground-colorでした。blue;}三角形を一行で書けます。スマホのリンク一覧の右側に入れたりアコーディオンの開閉の装飾として使えそうです。ドキュメントを見てもらえばわかる通りこのまま使うより微調整したほうが良さそうです。正三角形にする、とかですね。scaleX(1.65);と指定すれば汎用的に使えそうです。※1.65は目分量で指定したので適宜調整してください。ellipsis;}テキストを切り捨てて、オーバーフローを表す省略記号を追加してくれます。複数行もいけるみたいですが、各ブラウザ・デバイスで確認したほうが良いかもしれません。#d50200;}テキストストロークを一行で書けます。文字のアウトラインに色をつけるアレですね。normal;}テキストの折り返しを調整したい時に良さそうです。この辺りは結構ややこしいので参考記事を載せておきます。normal;}テキストの既定のスタイルを削除したい時用です。これを使う時はあまり良くない時な気がします。「どうしてもここだけは一切のしがらみをなくしたい!」っていう時でしょうか。いう時は大体破綻の道を進んでいる可能性が高いので設計を改めて確認してみてください。56.25%;}Youtubeなどの動画を入れるのに良さそうです。こちらも参考記事を載せておきます。0;}スクリーンリーダーにのみコンテンツを表示します。用途としては、広告タグだと思います。下の方に仕込むことが多いですがフッターの下に謎の余白があって「なんじゃこりゃあ!!」ってなってよくよく調べたら広告タグのimgが表示されてましたてへぺろみたいなことがあります。imgはインライン要素なので1x1でも高さはfont-sizeやline-heightなどが効くので気を付けたいところです。境界線borderの個別指定をラクにしてくれるものたちです。borderを駆使するようなページでは使えるかもしれないです。頻度は少なそうなのでまとめて載せます。#666;}ホバー機能がないデバイスに対応させるためのものです。デスクトップとスマホ・タブレットで出し分けたい場合を想定していると思います。具体的な使うシーンは想像できないですが、たぶん使うシーンがあるんでしょう。※ブラウザまたはデバイスがホバーをサポートしていない場合は、htmlタグに.no-hoverクラスを追加する必要があります。#000;}JavaScriptをサポートしていない場合の出し分けですね。Modernizrとセットで使うと良いでしょう。※ブラウザまたはデバイスがJavaScriptをサポートしていない場合は、htmlタグに.no-jsクラスを追加する必要があります。}}高解像度デバイスのスタイル調整です。メディアクエリをあまり使いすぎたくはないですが、のっぴきならない理由がある場合は使うと良いと思います。100%;}コンテンツが不足している場合でも、フッターがビューポートの下部に維持されるようにします。footerの高さを決めてしまうので拡張性が気になるところです。block;}水平線の要素をつくるものです。hr要素は意味があるので、装飾のために使う場合にこちらを使う想定だと思います。1px;となるので中身は表示されないです。装飾のためだけの要素はSEO的にあまり好ましくないので、こちらをなるべく使わないように他でスタイルを設定したほうが望ましいでしょう。nowrap;}画像置換のためのセットです。こちらもSEO的に好ましくないので積極的に使うのは避けたほうが良いでしょう。さいごにPostCSSは便利なものがあって良いですね。Sassよりも便利です。良いものは積極的に取り入れていきたいですね。学習コストは若干気になるものの、フロントエンドエンジニアであればいずれ覚えるべき小技もあるので、これを機にさわっておくと良いと思います。requestStockLike11@buchiya4th空前絶後の超絶怒涛のフロントエンドエンジニア。フロントエンドを愛しフロントエンドに愛された男。HTML、CSS、JavaScriptすべてのフロントエンドの産みの親。フロントエンド界に舞い降りたキングオブ人見知り。upLoginユーザーは見つかりませんでした。