2018/03/27
CSSを使って”縁取りされた文字”を作る方法は『text-stroke』でサッと。
”個人事業主・起業家の集客を手伝うWebデザイナー”のリンゴ（@rebirth_design）です！
僕が好きな「ブログ」や「ガジェット」といった、デジタル関連の物達が持っている”わくわく”感を伝えたいと思って、毎朝8時にブログを更新しています。
Webサイトやブログ上で、縁取りされた文字を表示させるには画像を用いていましたが、CSSでも作成できるんですよね。
こんな感じ↓のやつ。
「縁取りのある文字が出ていますか？」
方法は結構簡単で『text-stroke』というプロパティをCSS内に記述するだけでOK。
CSSの『text-stroke』を使って、簡単にサイトやブログの文字に縁取りの表現を！
『text-stroke』を使って文字を縁取る為には、CSS内に以下のように記述をします。
『text-stroke』の書き方の例
#text {
color: #fff;
font-size: 200%;
font-weight: bold;
-webkit-text-stroke: 1px #2b2b2b;
}
もしくは…
#text {
color: #fff;
font-size: 200%;
font-weight: bold;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-colorr: #2b2b2b;
}
『-webkit-text-stroke』というプロパティになります。（Firefox等も含めて）
『text-stroke』の表示例
「＃textはこうなります。」
画像や『text-shadow』を使う方法よりも簡単で良いですね。
ただ、Internet Explorer等の一部ブラウザには対応していないようなので注意。
まとめ「【text-stroke】で簡単に縁取りのついた文字を作れる。ただし一部対応していないブラウザも有。」
サイトやブログ上で縁取りのある文字を表現するには『text-stroke』が楽。
ただし、一部対応していないブラウザがあったり、線を太くしたり文字を小さくしてしまうと縁の線で文字の色が潰れてしまう（こんな感じ）ので使い方は少し気を付けて、画像や『box-shadow』を代わりに使うのが良いかなーと思います。
けど勝手を理解して上手く使うことができれば、修正の度に画像を作成する手間も省けるので助かりますね！
ということで、また明日も朝8時に記事を更新するので読んで下さいね。また明日！
この記事を書いたのは「リンゴ」
筆者「リンゴ」について
リンゴをSNSでフォローするならこちら
- Apple製品にハマった人生
- Webデザイナー×Apple好き リンゴ
当ブログは【Apple製品】【PC&ガジェット】【ゲーム】【自分の仕事】に関する情報を発信。
2015年、Webやガジェットから感じるわくわく感を伝えたくて、ブログを書き始める。
毎日投稿を続け、自分の発信が人の役に立てたこと、月間アクセス数10万超えを達成できたこと、さらに少額ながらお金も稼げたことに喜びを感じる。
ブログ運営を手伝うことを仕事にしようと試みたが大失敗。
現在は自分のスキルを活かして、人の役に立てることを模索中。
そしてWeb関連の仕事に励んでます。仕事のご依頼・ご相談は問い合わせページ、もしくは各SNSにてお待ちしております。
なお当ブログでは、この先商品やサービスのレビュー記事作成依頼は承りません。
