お役立ちCSS

お役立ちCSS Useful css おうさー : taka-no-hito

たかのひと所属：株式会社PIVOT 年齢:：29歳 (17歳と4673日) 趣味：神社と酒と旅行と酒最近の推しメン：児玉源太郎 “ “ ＃2

そんなこんなで、、、お役立ちCSS 便利な単位 caption 1 横並びの救世主 caption 2 数値の計算 caption
3 トリミング caption 4 否定の活用 caption 5 ＃3

便利な単位 caption 1 これまでの主要な単位 px,%,em 旧ブラウザでも問題なく動く昔からの主力部隊。便利な単位 rem,vw,vh 複雑なレイアウトや現在のブラウザの環境にマッチした最近の単位。＃4

便利な単位 caption 1 remとは？ emと似ている。 remはemや％と同じ相対単位。 emや％は親要素に対して相対関係にあるが、 remはrootつまりhtmlタグのサイズが基準となる。 remは主にフォントサイズに用いられる。ブラウザのデフォルトサイズがpc:16px,sp:14pxとなるため、
pcで14pxを表現する時には font-size: 0.875rem; と指定する必要がある。＃5

便利な単位 caption 1 pxだと何がダメなの？ pxは絶対単位。ユーザーの環境によってフォントサイズを変えたい場合、ズームされない。よくあるらくらくフォンなどデフォルト文字が大きい場合、レイアウトが崩れたりするので、フォントサイズを絶対パスで指定するのは好ましくない。なので、ひと昔前はemや％で指定していた。しかし、emや％は親要素に依存するので複雑に。。。
＃6

便利な単位 caption 1 remの複雑性を回避するには？ remはrootのサイズに依存するため、絶対単位のように用いることができる。しかしながら、純粋にデフォルトサイズに依存すると複雑なフォントサイズになってしまう。複雑性を回避するにはrootのフォントサイズを指定しなおせばいい。 htmlタグをfont-size: 62.5%;
というふうに指定する。こうすることにより、rootのフォントサイズは10px相当になった。この状態で14pxを表現する時には font-size: 1.4rem; と指定するすればよい。＃7

便利な単位 caption 1 vw,whとは？ vwとvhは画面サイズを基準とした単位。 width: 100vw; で画面横いっぱい。 height: 100vh;
で画面縦いっぱいとなる。％と似ているが、こちらは親要素が基準になるので、親要素がwidth: 90%; だといくらwidth: 100%; にしても画面横いっぱいにすることができない。また、vwとvhはそれぞれwidth、height専用単位ということではないので、 height: 50vw; や font-size: 10vw; などと指定することが可能。＃8

横並びの救世主 caption 2 これまでの主要な横並び方法 position,float,inline-block 旧ブラウザでも問題なく動く昔からの主力部隊。便利な単位 flex グリットデザインやカードデザインに向いている。＃9

横並びの救世主 caption 2 flexを使用した横並び今まで、横並びの主流はfloatでした。しかし、floatを用いた横並びには親要素にclearfixをかけリセットし、さらに子要素個々にfloat: left;というように方向を指定する手間がありました。しかし、flexを用いた横並びでは親要素でdisplay: flex;と指定するだけで
子要素が全て横一列に整列します。さらに、親要素、子要素に様々なオプションをつけることで様々なレイアウトが再現可能となっています。＃10

横並びの救世主 caption 2 flexを使用した中央化今までの中央化では子要素にこのような設定をしていたかと思います。 position: absolute; top: 0;bottom: 0;left:
0;right: 0; margin: auto; flexを使用すると、親要素にこのように指定すればOK。 display: flex; align-items: center; justify-content: center; また、flexで中央化すると、子要素の大きさを固定しなくても中央化できます。＃11

横並びの救世主 caption 2 flexを使用した要素のストレッチ flexの子要素にflex-growを指定することにより、余白に合わせて要素をストレッチできます。使用例としては画像とテキストが横並びになっている時、画像の大きさは変えずにテキストエリアだけ可変させる時に便利です。ストレッチさせたい要素にflex-grow: 1;を指定すればOK。
flex-growの数値によってストレッチの度合いは変更できるので便利。＃12

横並びの救世主 caption 2 flexのチートシート様々なとこができるflex要素。できることが多く、迷うこともあるかと思います。その時は下記のサイトでメジャーな設定は記載されていますので、ご参考に。 https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet ＃13

横並びの救世主 caption 2 flexのデメリットデメリットとしてはIE9以上が前提条件です。新規案件では問題ないかと思いますが、昔から続いている案件ではfloatの方が無難かもしれません。また、各ブラウザにより多少のバグが残っております。ブラウザ確認はしっかり行いましょう。どうしてもレガシーブラウザでもflex要素を使用したい場合はjsのプラグインを使用する
のもひとつの手かもしれません。＃14

数値の計算 caption 3 これまでの主要方法 jsを用いて、対象の要素を取得し計算後再度付与。基本的にpxや%など統一単位のみでの計算。便利な単位 calc css3から登場したcssのみで計算を行うことができる関数。 pxと%同士の計算を行うことができる。
＃15

数値の計算 caption 3 calcの使用場面使用場面としては、2カラム画面などの画面に便利かもしれません。使用例として、サイドメニューは200px固定、メイン画面は残りの画面いっぱいに表示させたい時などに使用できそうです。 width: calc(100% -
200px); あまり使用場面は多くないかもしれませんが、cssのみで計算ができるということを知っていると無用にjsを書く手間が省けるかもしれません。＃16

数値の計算 caption 3 calcのデメリットこちらもIE9以上が前提条件です。また、使用して気が付いたのですが、IE11にはcalcに対してのtransitionがないようです。つまり、IE11ではcalcを用いたcssアニメーションが使用できないということになります。アニメーションがかからない要素には問題なく使用できるので、無駄にハマらないように知識として留め置くといいでしょう。
＃17

トリミング caption 4 様々なトリミングここでは様々なトリミング方法についてご紹介したいと思います。サムネイルを表示したいけど、どんなサイズの画像が入ってくるかわからない、などの時に活用できるかと思います。また、トリミングとはいえ機械的なトリミングになりますので、意図しない場所で画像が切れたりします。運用にあたってある程度のレギュレーションは必要かと思います。
＃18

トリミング caption 4 backgroundでのトリミング方法一番安定して使える方法がbackgroundを使用した方法かと思います。縦横の比率が変わっても破綻しないのでおすすめです。 background-image: url(./img/imgpath.png); background-size: cover;
またHTMLから画像を指定する場合はstyle属性を使いましょう。 <div style="background-image:url('./img/imgpath.png');"></div> これで、PHPなどからimageパスを受け取ることが可能です。＃19

トリミング caption 4 backgroundでのトリミングのデメリット考えられるデメリットとしては、画像が呼び出されない時の代替テキストが表示されない点が挙げられます。また、background-size: cover;の特性上、縦横どちらもぴったり100%になることがないので、そこをデメリットに感じるかもしれません。 tipsとして、backgroundのショートハンドでは一部バグが発生しますので、個別に指定
することをお勧めします。＃20

トリミング caption 4 transformでのトリミング方法意外とメジャー？なのがtransformを使用したこの方法です。親要素にoverflow: hidden;とposition: relative;を指定し、画像に下記の設定を。 width: 100%;
height: auto; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); やってる内容としては一度transformでぶっ飛ばして、positionで定位置に戻している感じです。 positionだけで行う中央化は親要素より子要素の方が大きいと使用できないので、 transformを使用したこの方法を使用します。＃21

トリミング caption 4 transformでのデメリット対応ブラウザはベンダープレフィックス付きでIE9からになっています。また、img要素単体で使用できないので、divなどでwrapしなければいけないのもデメリットに感じるかもしれません。そのほか画像は縦横長い方を100%にするのですが、途中で大きい辺の長さが入れ替わる場合にはメディアクエリなどで個別対応しなければなりません。しかし、対応ブラウザの守備範囲の広さからある程度画像のレギュレーションさえ決め
ておけば現役で対応できるかと思います。＃22

トリミング caption 4 object-fitでのトリミング方法新しいトリミング方法として注目されているのが、object-fitを使用したトリミング。画像の大きさを指定して、 object-fit: cover; これだけでOK。さらにobject-positionを使用することでbackgroundのように画像の位置まで調整でき
る優れもの！＃23

トリミング caption 4 object-fitでのデメリット最大の弱点は対応ブラウザです。 IEは全滅、edgeですら最近ようやく対応してきました。一応jsのプラグインもあるので、どうしても使用したい場合は、それを噛ませてもいいかもしれませんね。現状、安定して運用するのであれば、SP限定で使用することが無難かもしれません。＃24

トリミング caption 4 flexでのトリミング方法は？ caption 3で散々プレゼンしたflexを使った中央化はどうでしょう？結論から言うと、できなくないけど向いてないです。やろうとすると、親要素に下記を指定 display: flex;
justify-content: center; align-items: center; これだけだと子要素の横幅が親要素に合わせて可変してしまうので、さらに子要素にmin-widthを指定しなければいけません。いまいち拡張性にかけますので、トリミングは他の手段をおすすめします。＃25

否定の活用 caption 5 擬似クラスnotとは？皆さんは擬似クラスの:not()をご存知でしょうか？ notは括弧の中に除外したいセレクタを指定することで、それ以外にはスタイルが当たるという特殊な動きをします。使用例はこのようになります。 :not(p) {　
font-size: 1.8rem; }　こうすることで、pタグ以外のフォントサイズを1.8remにすることができます。＃26

否定の活用 caption 5 notの複数指定方法複数notを使いたい場合はどのようにすればいいのでしょうか？例として、pタグとspanタグ以外にスタイルを当てたい場合の指定を考えて見ましょう。 :not(p,span) {　 }　イケそう感漂いますが、残念ながらエラーです。
正しくはこう :not(p):not(span) {　 }　ちょっと気持ち悪いですが、擬似セレクタ同士を繋げます。＃27

否定の活用 caption 5 notの便利な使い方 notが一番力を発揮するのはul,liの組み合わせのときかと思います。 li要素に下線が引かれたデザインで最後のliだけ下線なしにしたい場合、今までだとliにborder-bottomを指定し、擬似要素last-childを使ってborder-bottomを解除していたかと思います。 notを使用するとこのように書くことができます。 li:not(:last-child)
{　 border-bottom: solid 1px #ccc; }　解除の必要もなく、とてもシンプルになりました。＃28

否定の活用 caption 5 notのデメリットこちらはIE9以上が推奨条件です。推奨としているのは、IE7,IE8は一部の書き方には対応しているようだからです。とはいえ、昨今の対応状況はIE11が基本となっておりますので、特に大きなデメリットではないかと思います。また、括弧内に>,+などの結合子が使用できません。 CSS4から実装予定らしいので、気長に待ちましょう。
＃29

ご成長ありがとうございました thank you fin

お役立ちCSS

お役立ちCSS

taka-no-hito

Other Decks in Technology

Featured

Transcript