あなたの発信を手伝うWebデザイナー”Ringo”が、【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】の情報を発信するブログ

当ブログについて

筆者について

Ringoプロフィール

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

RingoをSNSでフォローするならこちら


制作(Web/印刷物)

-

僕自身が携わっている制作物に関しての話題を届けます。

元々、Webデザイナーとして仕事をはじめましたが、Webサイト以外にも、ロゴ・名刺・パンフレット・メニュー表・看板・販促物・パッケージ等のデザインをしています。

「こんな事できる?」って話があれば、気軽にお声がけくださいね!

この記事は「制作(Web/印刷物)」カテゴリーの記事

Post Title

CSSを使って”縁取りされた文字”を作る方法は『text-stroke』でサッと。

  • スポンサーリンク

Webデザイナー”Ringo”おはようございます。
”あなたの発信を手伝うWebデザイナー”Ringo(@rebirth_design)です!
僕が好きな「Web」や「ガジェット」といった、デジタル関連の物達が持っている”わくわく”感を伝えたいと思って、毎朝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】で簡単に縁取りのついた文字を作れる。ただし一部対応していないブラウザも有。」

Webデザイナー”Ringo”今回は「CSSを使って”縁取りされた文字”を作る方法は『text-stroke』でサッと。」って話でした。

サイトやブログ上で縁取りのある文字を表現するには『text-stroke』が楽。

ただし、一部対応していないブラウザがあったり、線を太くしたり文字を小さくしてしまうと縁の線で文字の色が潰れてしまうこんな感じので使い方は少し気を付けて、画像や『box-shadow』を代わりに使うのが良いかなーと思います。

けど勝手を理解して上手く使うことができれば、修正の度に画像を作成する手間も省けるので助かりますね!

ということで、また明日も朝8時に記事を更新するので読んで下さいね。また明日!

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアしよう!
  • オススメ記事&スポンサーリンク


  • 当ブログと同じデザインで『発信×集客』しよう!コンサルプランならお得!

こんな記事にも興味がありませんか?

  • スポンサーリンク

Ringoから記事を読んでくれたアナタに

RingoのLINE@に登録して、いつでもどこでも何でも即相談できるように!

RingoのLINE@に登録して、いつでもどこでも何でも即相談

Ringoは、LINE@も行なってます。

聞きにくいことや相談したいこと等、何でも気軽に聞いてください!

始めたばかりの今のうちに登録してくれた方は、LINE@での相談を永久無料で対応します。

気軽に下の「友だち追加」ボタンを押して、登録をお願いします!

RingoのLINE@に登録

この記事を書いたのは「Ringo」

筆者「Ringo」について

Ringoプロフィール

RingoをSNSでフォローするならこちら

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

当ブログにて【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】の情報を発信中。

デジタル関連の物が持っている”わくわく”感を伝えたいと思っています!

【ブログでの発信〜集客までの相談】【レビュー記事等の執筆】【Webサイトや印刷物等のデザイン】を承っております。

ご依頼やご相談は問い合わせページ、各SNSにて。まずは「ブログみて」と気軽に声をかけて頂ければ返信します。

詳細プロフィールを見る

Ringoに仕事を依頼・相談する

  • 当ブログと同じテンプレートを使ってブログ始めよう!

筆者について

Ringoプロフィール

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

RingoをSNSでフォローするならこちら

ブログ全体の新着記事

No Image

Apple好きへ

Macの自動アップデートを止める方法。モバイルルーターの利用が多…

楽しく生活したい人へ

『ゼルダの伝説』シリーズをまとめて一気にプレイするなら『Wii …

No Image

ブログ運営・集客したい人へ

ブログ記事をリライトして気がついた”ダメな見出しの付け方”。

楽しく生活したい人へ

【父の日】お父さんに”新しい読書体験”をプレゼントしてみてはいか…

楽しく生活したい人へ

HDMIケーブルの差し替えは面倒…スイッチャーを使って楽に切り替…

楽しく生活したい人へ

えっ!!『クレヨンしんちゃん』しんのすけ役・矢島晶子さんが降板……

制作(Web/印刷物)の新着記事

楽しく仕事したい人へ

ロゴ作成で大切にしたいことを踏まえて、自社ロゴを作り変えました。

No Image

楽しく仕事したい人へ

WordPressオリジナルブログテーマ「ググログ」を作成中。

No Image

楽しく仕事したい人へ

ブログテーマを試験的に変更しています。

楽しく仕事したい人へ

「ロリポップ」でサイト・ブログに無料の 独自SSL設定をする手順…

楽しく仕事したい人へ

話題のオーダースーツ専門店「俺のTailor」のHPリニューアル…

楽しく仕事したい人へ

ホームページのリニューアルをするタイミングって?判断する基準は年…

ブログ全体の人気記事

Apple好きへ

【追記有】Apple PencilとiPad Proの接続が出来…

Apple好きへ

【検証】MacBookをクラムシェルで使うと、本当にバッテリー劣…

Apple好きへ

[追記あり]Apple WatchでInstagramのアプリが…

楽しく仕事したい人へ

【追記】ニコちゃんマークこと「スマイリーフェイス」。皆よく使って…

Apple好きへ

Apple Pencilが故障。壊れたら交換には出さずに新品を買…

Apple好きへ

MacBookProのディスプレイの掃除はこれ!Mac同梱『クリ…

  • スポンサーリンク


▲最上部へ