Webデザイナーでブロガーな個人事業主”リンゴ”が、【個人事業主・起業家のブログとHPでの発信&集客】【Apple中心にPC&ガジェット】【ワークスタイル】の情報を発信するブログ

当ブログについて

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら


制作(Web/印刷物)

-

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

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

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

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

2018/03/27

制作(Web/印刷物)

Post Title

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



Webデザイナー”Ringo”おはようございます。
”個人事業主・起業家の集客を手伝う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】で簡単に縁取りのついた文字を作れる。ただし一部対応していないブラウザも有。」

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

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

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

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

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


  • オススメ記事&スポンサーリンク


この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアして下さい!記事を書くモチベーションが上がります!
  • 起業家・個人事業主の発信×集客はブログを使うべき理由は…↓

  • スポンサーリンク

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

リンゴから記事を読んでくれたアナタに

ブログや仕事、PCの事で困ったことはLINEで今スグ、Ringoに相談してください!

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

WebデザイナーRingoのLINE@アカウントを開設しました。

LINEから、友人や家族にメッセージを送るのと同じくらい気軽に相談をして頂けます!

これまでに「お店でブログを始めたいけど、どうすればいいの?」や「新しくMacBookを買おうと思うけど、このスペックで失敗しないかな?」等の相談を頂いています。

友だち50人(登録者50人)になるまでは、相談は無料で乗ります!(あと41人)

今スグに「友だち追加」ボタンを押して登録&相談をして下さい!

RingoのLINE@に登録

この記事を書いたのは「リンゴ」

筆者「リンゴ」について

リンゴプロフィール

リンゴをSNSでフォローするならこちら

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

Webデザイナーでブロガーな個人事業主のリンゴ(Ringo)です。

当ブログ『リンゴノマド』では【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】に関する情報を毎日発信。

ブログを通してWebやガジェット等、デジタル関連の物が持っているワクワク感を伝えていきます!

仕事は【個人事業主・起業家のブログ発信×集客サポート】を中心に、【ブログ記事の執筆】【Webサイトや印刷物等のデザイン】をしています。

依頼・相談は問い合わせページ、もしくは各SNSにてお願いします。(返事が一番早いのでLINEがオススメです。写真下の『@』アイコンからメッセージ下さい。)

他にも、気になったことがあれば「ブログみた」と気軽に声をかけてください。

詳細プロフィールを見る

リンゴに仕事を依頼・相談する

  • 起業家・個人事業主の発信&集客は、ブログを使うべき理由は…↓

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら

ブログ全体の新着記事

楽しく生活したい人へ

【PS3】2018年12月でHuluのサービス終了になり視聴不可…

Apple好きへ

【レビュー】Webデザイナー×ブロガーが、仕事用メインマシンとし…

Apple好きへ

【作業効率UP】Macに外部ディスプレイを接続して2画面化(マル…

Apple好きへ

【検証】『27インチ iMac Retina 5K(2017)』…

Apple好きへ

Lightningケーブルの断線にはうんざり。だからiPhone…

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

無料で使えるフリー画像素材にブログ読者は飽きてる!?他と差をつけ…

新着投稿をもっと見る

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

楽しく仕事したい人へ

SafariでWebサイトを閲覧していると『Webサイトは安全で…

楽しく仕事したい人へ

埼玉県川越のウエディングプランナー『Toi et Moi Wed…

楽しく仕事したい人へ

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

No Image

楽しく仕事したい人へ

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

No Image

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

「制作(Web/印刷物)」の一覧を見る

ブログ全体の人気記事

Apple好きへ

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

Apple好きへ

【随時更新】Macで遊べるオススメのゲームをまとめて紹介!(iM…

Apple好きへ

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

楽しく生活したい人へ

MacはWindowsに比べて、ゲームに向いていない!?その通り…

楽しく仕事したい人へ

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

Apple好きへ

iPadでもIllustratorを使いたい!そんなあなたにはコ…


▲最上部へ