挨拶という名の前書き
みなさんこんにちはFascodeのやべーやつくもことなおこです。
最近の良かったことだけ見ると画力向上のためデジタル絵の特訓をしたり食べ物系のブログを書いたりバイトしたりといろいろしています。
以前行っていたWebの管理はつくつんさんにお願いしてしまっているのですが以前までは自分がWebの管理を行っていました。
そんなわけで少し前まではガッチリとWebサイト系をいじってなかったのですがバイト先でいじる機会があり、Web系のことを触ったのですが面白くて興味深いCSSプロパティ-webkit-text-stroke-widthを見つけたのでご紹介したいと思います。
CSSプロパティ -webkit-text-stroke-width について
実際に-webkit-text-stroke-widthを用いて作った2重縁取りのページ↓画像使ってないです。
よくCSSでテキストに縁取りをする方法としてtext-shadowを使うことをよく紹介されていますが、もともとはテキストに影をつけるものだし現状特定の太さより太くすることが出来ないしフォントによってCSSのコード調整しないと使いづらいです。
ただすでにサポートが終了しているがIEに対応していないなどがあるためか、わからないけど非標準となりあまり知られていないのが残念
詳しいことはmozilaさんのサイトほうがわかりやすいと思われる。↓
ブラウザのサポート状況はCan I use…さんを見ていただければ↓
実際に-webkit-text-stroke-widthを使ってみる
HTMLを記述する
まずはシンプルにHTMLを書いて見る。とりあえず書くことがなかったのでLoveにしてみた。下単語でデバックしてたなんて言えない
h1タグを書いてその中にspanタグを記述するもしくはh1タグにdata属性をつけるというね。data属性をつける場合はcss側で疑似要素を作ります。
CSSを記述する
次にCSSを記述していきます。
文字数が４文字なのでh1セレクタのfont-sizeプロパティにビューポートの指定である20vwを指定し80vw使います。この辺はpxでも好きな単位で良いかと
色は縁取りに使いたい色をcolorプロパティに指定して疑似要素セレクタ側にも同様の指定をする。
疑似要素セレクタのcontentプロパティにはdata属性から取得した文字列をattr関数で指定します。
今回の本題である-webkit-text-stroke-widthプロパティを各セレクタに指定します。
最後にpositionで重ねてtransformで真ん中に持ってきて完成です。
positionの使い方については調べたらいくらでも出ると思うので詳しくは言いませんが要素同士を重ねてことが出来ます。
-webkit-text-stroke-colorはなぜ使わない？
ここまで書いてきたのですが-webkit-text-stroke-widthプロパティの情報を見てると-webkit-text-stroke-colorプロパティを使用することで任意の色を指定することができるとのこと。
やってみるとこんな感じで文字自体削って縁をつけてしまうという、、、
今日のサムネイル
今回のサムネイル制作をhtmlとcssで行ってみました！時間縛りしたし形が決まってない状態で書き始めたからソースコードグッチャグチャになってるけどまあなんとか出来たかなってことで
google-chrome-stable --headless --disable-gpu --screenshot --window-size=1920,1080 https://naoko1010hh.github.io/webkit-text-stroke-width-test/tutorial-04.htmlGoogleChromeのヘッターレスモードで画像生成した感じ
text-shadowは需要ないの？
結論から言えばあります。
普通にtext自体に影をかけるなどの需要はあります。
ただtext-shadowで縁取り文字をつくるのは古いと言われる時代が来るかもしれません。
最後に
画像などで処理している部分を文字にすることでページの読み込み速度を上げることはできるのではないかと予想しているが実際どうなるのかはやったことがないので時間があるときに検証したいな〜と思いました。
単純な2重縁取りにだけに注目して解説しましたが
ずれる2重縁取りや使用する言語がHTMLとCSSだけという縛りの面白さを今後伝えられたらなって思います。
The post CSSで文字を二重縁取りする 【-webkit-text-stroke-width】text-shadowは古すぎる？ first appeared on FascodeNetwork Blog.