こんにちは！
TANE-beエンジニアです。

過去２回にわたりIEサポートが終了後に実装できるCSSをご紹介いたしました。

IEサポート終了後にCSSで実装できるデザイン集　Vol.1

こんにちは！ TANE-beエンジニアです。 さて、2022年6月にいよいよInternet Explorerのサポートが終了します。 日本国内では馴染み深くシェアを維持してきたIEですが気がつけばサポート終了まで1年を […]

続きを読む

IEサポート終了後にCSSで実装できるclip-pathの使い方

TANE-beエンジニアです。 今回紹介するCSSプロパティは、IEのサポート終了後に実装できるCSSプロパティの一つ、clip-pathです。 clip-pathは、画像をCSSで好きな形に切り抜けたり、SVGのパスで […]

続きを読む

引き続き、IEサポートが終了した2022年6月以降に実装ができるCSSについて、今回は「テキスト」まわりに焦点を絞ってご紹介しようと思います。
今回、ご紹介するプロパティは

の3つです。
先にデモページをご覧になりたい方はコチラから↓

text-strokeとは

text-strokeは文字をフチ取るプロパティです。

strokeと名のつくプロパティはSVGなどで使用した覚えのある方も多いのではないでしょうか？

PhotoshopやIllustratorなど、デザインではワンクリックで簡単に作れる袋文字ですが、今まではCSSではデザイン通りの再現ができませんでした。
text-shadowや画像で対応していたと思います。
個人的にはtext-shadowで試してみるものの、あまり綺麗に縁取れないうえサイズなどの調整が手間取るため、断念して画像にするのがいつもの流れでした。

そんな袋文字ですが、IEを切るとtext-strokeというプロパティを使用して簡単に実装することができます。
デモページではtext-shadowとの比較や注意点などをまとめています。

ちなみにtext-shadowとの違いですが、text-strokeはフォントの縁から内側に向かって、text-shadowはフォントの縁から外側に向かって線がつくという違いがあります。
文字の内側に向かって線幅が拡張されるため、text-strokeは線幅に限界があります。

p {
　　color: transparent;
　　-webkit-text-stroke-color: #888;
　　text-shadow: 3px 3px 0 #fbca5a; //右に3px、下に3pxずれたシャドウ
}

また、text-shadowが別で使えるので、このようにフチと中身がずれたデザインも可能です。
ポップで可愛らしいデザインですが、可読性が高くテキストの変更にも柔軟に対応できるため、汎用性は高いと思います。
cssで綺麗に対応できるので投稿内のタイトルなどにも、気軽に使用できます。

background-clip: text;　とは

background-clip: text;は、テキストで画像をクリッピングできます。

今までも画像で再現することはできましたが、CSSで対応できるようになったことで、
テキストの変更があった際にも簡単に編集をすることができるようになります！
また複数箇所に同一のCSSをかける、サイズをフォントサイズで制御できるなど、
コードが簡略化され画像の数を減らせることで更新性もアップします！

また、背景画像にbackground-attachment: fixed；をかけて、パララックスのような実装も可能です。
パララックスはデモページからご覧ください！
※ ちなみにbackground-attachment: fixed;はiOSの実機ではうまく固定されないというバグがあります。そのためパララックスに意味を持たせず、あくまでデザイン上のアクセントとしての実装が良いかなと思います。

テキストの背景（background）に画像を敷き、以下のようにプロパティを指定します。

p{
  background: url(☆画像のパスが入ります☆) no-repeat center /cover;
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: fixed; //パララックス風にしたいときはこの行も追加
  color: transparent;
}

ポイントは、文字色を透明（transparent）に指定することです。

すごく簡単ですよね！
フォントとの組み合わせ次第で、MVやCVエリアなど表現の幅が広がりそうです！

line-clampとは

line-clampを使用すると、テキストに行数で制限をかけることができます。使いやすい場所としては、WPなどCMSの投稿本文の引用などでしょうか

今までもPHPを使って文字数で制限をかけることは簡単でしたが、英語の文章が入った時など、文字数では見た目で差が出てしまいます。
下の画像は同じ100文字で制限をかけているのですが、見た目では全然違う文字数で制限をかけているように見えてしまいますよね。

行数で制限をかけるとで統一感があり、デザインの再現性が高いです。
また横幅の異なる引用であっても行数で制御できます。
たとえば横幅の異なるコンテンツでも、４行という「行数」を基準に制御することは、今まででは難しかった対応だなと思います。

最近、よくみられるGridデザインとも相性がよく、
IEを切ったら積極的に使用したいプロパティの一つです。

ただし、このline-clampは単一のCSSでは対応できません。
合わせて設定すべきプロパティがあるので、以下のCSSを参考にして実装してみてください。

p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

display: -webkit-boxと、-webkit-box-orient: verticalは必ずセットで設定する必要があります。overflow: hidden;で、はみ出した分を見えないようにします。
私はスニペットに登録しました。ショートカットで一気に設定できるのでとても簡単です。

まとめ

3回にわたってデザイン面でも影響の大きいCSSをご紹介しました！
今までも画像や工夫次第で再現できるものもありましたが、CSSで簡単に再現できると

• 画像が減るのでサイトが軽くなる
• 更新性が良くなる
• jsや他のCSSと組み合わせて動きをつけることができる

など、メリットがたくさんあるなと感じました！
デザイン担当者とコーディング担当者が分かれている場合などは、デザイナーにも積極的に共有していきたいですね。

またIEを切ることで、コーディング面でもより簡単に少ないコードで対応できるものが増えます！
興味がある方は一度調べてみてください。

今後のブログではコーディング面での紹介もしていければと思います！
おたのしみに！