HANOWAで使えそう！2022-2023年のCSS新機能3選

2023年9月20日 14:14

どうも、HANOWAでエンジニアとして働いてますかぺです。
我が家には1歳と2歳半の2人姉妹がおります。
次女が生まれてから約1年。
子育てと仕事と家事に追われる日々の中に、ちょっとだけスキマ時間ができてきました。

元WebデザイナーでCSS大好きな私。

スキマ時間にCSSを眺めていて、「HANOWAで使いたいな」と思ったCSS新機能を勝手にご紹介しちゃいます！！

HANOWAとCSS

最初に申し上げておきますが、HANOWAでは複雑なCSSを使いません。
どんなエンジニアが見てもコードの見通しが良いことを重視しており、stylesheetには必要がない限り記述しないようにしています。
HANOWAでは自社作成のBootstrapのようなものを採用しています。
これによりHTMLにスタイルを直接書き込むだけで見た目の整形が簡単にできます。
コードも直感的でわかりやすいです。
これは昔HANOWAにいたSさんというエンジニアさんが残した遺産なのですが、詳しくはいつかブログに書きたいです✨

2022-2023年のCSS新機能3選

私がCSSの新機能を追えていなかったここ1年ほどを中心にピックアップしてみました！
さらっと紹介するだけなので、気になった方はググってみてください😀

【HANOWAで使えそうなCSS その1】カスケードレイヤー

カスケードレイヤーとは、「カスケード（優先順位）」を「レイヤー（階層）」で管理することができる機能です。
CSSは、1つのCSSセレクタごとに優先順位が決まるのでちゃんと管理していないと後々大変なことになります。
例えば、CSSが効かないけど理由がよくわからないからとりあえず!importantを使うってのはわりとCSSあるあるかと思うんですが
それをやっちゃうとその後の人がやっぱり効かないから!importantを使う！そしてその後の人も・・・
というふうに!importantを!importantで洗う争いが勃発します。

しかし、このカスケードレイヤーを使えばより直感的で管理も単純になるのでいいんじゃないかな♪と思いました！
ただ、いざ使うとなると設計の時点から考えて使わないと結局!important地獄になりそうです💧

【HANOWAで使えそうなCSS その2】長い文章を3点リーダーで省略する方法

これはそこまで新しくはないと思うのですが、お気に入りなのでご紹介します！

長い文章を3点リーダーで省略するとき、JavaScriptで制御したりしますよね？
JSで文章を省略しようとすると、文字数で制御することになります。
そうなると、同じ20文字でも横の長さがバラバラになってしまいます。

↓の「Run Pen」クリックで実際の文字制御が確認できます！

そこで重宝するのが以下の方法です！
「親要素の横幅を基準にはみ出したら3点リーダーを表示する」というもので、複数行にも対応しています。

「-webkit-line-clamp: 1;」というところで行数指定できます。
-webkit-というベンダープレフィックスがついてますが、IE以外はほぼ対応してますよ😀

【HANOWAで使えそうなCSS その3】ビューポートの新しい単位

その昔、web制作において「画面いっぱい」の高さを確保するのはなかなか難しいものでした。
しかし100vhという単位が使えるようになり、「画面いっぱい」は容易に確保できるようになりました。
その100vhにも若干の問題があり、スマホでナビゲーションバーの格納などを考慮していないため、場合によっては意図した表示になりませんでした。

その問題もこの新しい単位で解決です。

svh, svw: 最小のアクティブビューポートサイズ(ナビゲーションバーなどが出た状態)の高さと幅
lvh, lvw: 最大のアクティブビューポートサイズ(ナビゲーションバーなどが隠れている状態)の高さと幅
dvh, dvw: ダイナミック（動的な）ビューポートの高さと幅

つまり、ナビゲーションバーが出ていてもいなくても同じ見た目にしたい場合はdvhを使えばいいわけです。

ちょうどスマホのキーボードが出たときの表示領域について悩んでいたので
喜々としてdvhを使ってみたんですが、キーボードの高さは考慮されていないらしく無事撃沈しました。
今度はキーボードの高さも考慮してほしいなぁ・・・

【番外編】 transformプロパティが独立してより使いやすく

アニメーションするときなどに使うtransformプロパティは、複数の動きをつけたいときは下記のようにまとめて記述する必要がありました。

img {
  transform: translate(100px, 100px) rotate(-45deg) scale(2);
}

このtransformプロパティを個別に記述できるようになりました！
これにより、なにが良くなったのかと言いますと
記述量が少なくなり、よりスッキリした状態になったので可読性が上がりました。

img {
  translate: 100px 100px;
  rotate: -45deg;
  scale: 2;
}

その他、表現の幅も広がったはずです！
まだ使い込めていないのでどういう使い方ができるのかは未知数ですが、これまで実現不可だった複雑なアニメーションもCSSで表現できるようになるかもしれません。

ちなみにHANOWAではアニメーションはほとんど使いません。
アニメショーンをあっちこっちで使っちゃうとにぎやかなイメージになるのでブランドイメージに合わないんだと思っています！
アニメーションを使うなら、ちょっと動きをなめらかにしたいときのスパイスとして少しずつ使っていけたらいいなと思います。

最後に、自分でアニメーションを個別指定してみたけどよくわからなくなったものを置いていきますね☆
スタート/ストップボタンで一時停止もできます。
それではまた😀

HANOWAでは他のメンバーもテックブログも書いています。
よかったら見に行ってください✨

この記事が気に入ったらサポートをしてみませんか？