どうも、tableレイアウト全盛期の時代からweb制作を生業にしてきたヒツジです。
最近のCSSはすげー便利になってまして、イニシエから制作していた人間にはビックリするレベル。
今どきのCSSで個人的に知っておくと便利だと思うものや、驚いたものをまとめてみます。
レイアウトは『flexbox』が超便利！
webサイトのレイアウトといえば、今はもう『flexbox』が主流ですね。
floatやinline-blockを駆使して横並びしていた苦労はなんだったのか、というレベル。
使い方もめっちゃ簡単です。横並びさせたい要素の親に「display:flexbox」と指定するだけ。また、それまではJavaScirptでやっていた子要素の高さを揃えることも可能です。
「justify-content」で横の並びを指定でき、「align-items」で縦を揃えることができます。
See the Pen flex-box_sample1 by Mei Koutsuki (@mei331) on CodePen.
ほかにも、flexboxのすごいところは、記述された順番に関係なく要素の並び順を変えられるというところ。「flex-direction」を使えば、横並びから縦並びに戻せるほか、表示順を逆にするということも可能です。
細かく順番を変えたい時は、子要素に「order」を指定するだけでOK。
See the Pen flex-box_sample2 by Mei Koutsuki (@mei331) on CodePen.
HTML構造上の順番と、見た目の順番を変えたい！という時や、HTML側に手を加えられない時に便利ですね。
ほかにもいろいろできるんですが、webクリエイターボックスさんのflexboxチートシート記事がわかりやすいかと。
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
『grid』も楽しい
自分の作るデザイン上、あまり出番がないんですが、「grid」もわかると楽しいですよ。 親要素で縦横のサイズと数を指定でき、子要素で複雑な配置にできます。
See the Pen grid_sample by Mei Koutsuki (@mei331) on CodePen.
雑誌風のデザインをしたい時は便利かも。コリスさんの記事がわかりやすいですね。
5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス
たまに『column』も使います
コンテンツ幅が広い時、本文だけ２段落にしたい！とかないですか？
flexboxやgridは子要素ごとに変更できますが、内容量によってほどよく２列にしたい時は『columns』を使っています。
See the Pen column_sample by Mei Koutsuki (@mei331) on CodePen.
カラムの幅の指定などについては、以下の記事がわかりやすかったです。
マルチカラムレイアウトとは？columnプロパティについて – Qiita
新しい単位『vh』『vw』とは？
ちょっと見慣れない単位でビックリしますが、vh/vwのvは『viewpoint』のv。
つまり、ウインドウ（スクリーン）のサイズ（正確にはviewpointのサイズ）に対する割合を指定できる単位です。
レスポンシブなコーディングをする時にすごく役立ちますが、個人的には画面の高さを取得できるのが一番ありがたいなって思います。height:100%はうまく取得されませんが、height:100vhならちゃんと取れるんですから。
フォントサイズの指定にも便利。以下のサイトがわかりやすいかと。
レスポンシブの単位には％よりもvw, vhが便利！フォントサイズの指定にも使える | WEMO
数値は『calc()』で計算してもらえるよ
こんな仕事してますが、実は計算がすごく苦手です。幅を計算で出さなきゃいけない時は常に電卓パチパチしてました。 しかし、そんな計算も今は必要ないのです。計算だってCSS側でやってくれます。
例えば、543pxのボックスを3分割して横並びにしたいときは、width:calc(543px / 3);と指定すればOK！
See the Pen calc_sample by Mei Koutsuki (@mei331) on CodePen.
すこし前まではベンダープレフィックスが必要でしたが、最近のブラウザではほとんど使えます！
https://caniuse.com/#feat=calc
画像は『object-fit』で切り抜けば解決することもある
WordPressのように、アイキャッチ画像が並んだりするとき、きっちり画像サイズが揃っていたほうがキレイ、ということがありますよね。
でも、使用する画像が縦長だったり横長だったり、画角が違うことも多いはず。
そういう時は、object-fitを使って画像を切り抜けばいいのです。
ここに画像が３枚あります。
この画像を使って、新着記事のような画像付きリストを作ろうと思うと、画像のサイズがバラバラで揃えづらそうですよね。それを解決できるのがobject-fitです。
See the Pen object-fit_sample by Mei Koutsuki (@mei331) on CodePen.
同じ画角の画像＋タイトルにできてますよね。 imgに指定したobject-fit:cover;部分で実現しています。
他にも画角を無視して塗りつぶすfillや、縦横の大きいサイズに収まるcontainなどがあります。
背景画像のサイズを変更できるbackground-sizeでも近いことはできますが、背景画像に対しての指定なので、使い分けていくといいですね。
以下の記事がわかりやすいと思います。
【CSS】画像のトリミングができる「object-fit」｜プラカンブログ | WEB制作会社プラスデザインカンパニー
文字の表示数制御も『line-clamp』を使えばCSSでできる時代
文字の表示を制御する場合、JavaScriptを使用することが多かったのですが、これもCSSでできる時代になりました。
以下のサンプルは、３行だけ表示して、最後は「…」になるというものです。
See the Pen line-clamp_sample by Mei Koutsuki (@mei331) on CodePen.
IEでは使用できませんが、ベンダープレフィックスを使用すればほとんどの最新ブラウザで使用可能です。
参考）
【CSS】複数行でも3点リーダーをきかせる – Qiita
Can I use… Support tables for HTML5, CSS3, etc – line-clamp
『transition』『transform』を使ってちょっとした動きをつけられる
イマドキ感のあるちょっとした動きをつけたい時は、transitionやtransformを使うと便利です。
See the Pen zYOZNgM by Mei Koutsuki (@mei331) on CodePen.
『animation』を使えばスライドショーもできるよ！
さらにanimationを使えば、簡単なスライドショーだってできるのです！
See the Pen CSS_slideshow_sample by Mei Koutsuki (@mei331) on CodePen.
animationと合わせて、transitionやtransformを使えば、かなり動きのあるCSSアニメーションも作れますよ。
以下のサイトにサンプルがたくさん載っているので、参考にしてみてください。
CSS3 アニメーション（使い方やサンプル）/Web Design Leaves
『filter』を知ればフォトショが要らない？！
実はCSSで画像の色を変えたり、ぼかしたりすることもできるんです。
See the Pen CSS_filter_sample by Mei Koutsuki (@mei331) on CodePen.
https://caniuse.com/#search=filter を見るとIE未対応となっていますが、IE独自のCSSプロパティとして『filter』は存在していましたので、IEに対応させる場合はCSSハックなどで対応できるのではないかと思います。
以下のサイトに、その他のプロパティサンプルが紹介されているので、参考にしてみてください。
Photoshopはもはや不要！？CSS3のfilterプロパティを使って画像に色々な効果を加えてみた | 株式会社アントレース／UNTRACE Co., Ltd.
できることが分かれば、情報アップデートのきっかけになると思う
CSSが普及しはじめた頃、装飾はCSSでやるものという風潮になり、tableレイアウトは淘汰されていきました。
そうして普及したCSSレイアウトでは、それまでよりも色んなことができるようになったし、文書構造を意識したマークアップをしようという動きにも貢献しました。
だからこそ、CSS2を知っていれば、ぶっちゃけCSS3を知らなくても、実はそんなに困らないんですよね。
でも、それこそが情報のアップデートの妨げになってるんじゃないかなって思います。
なので、CSS3で今はこんなことができるよ！すごいよ！ラクだよ！って分かれば、勉強してもらえるきっかけになるんじゃないかなーと思って書きました。
ラクなことを知れば、人間はラクなほうに流れるのです。
流れておいでよ。楽しいよ〜。
