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

当ブログについて

筆者について

リンゴプロフィール

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

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


制作(Web/印刷物)

-

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

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

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

この記事は「制作(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でフォローするならこちら

ブログ全体の新着記事

No Image

未分類

ナシ婚層が5割の今、注目を浴びる『フォトウエディング』とは?

楽しく生活したい人へ

夏休み。時間を持て余して暇すぎるなら、読み放題の電子書籍を読みま…

楽しく生活したい人へ

12月発売!Switch『大乱闘スマッシュブラザーズ SPECI…

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

ホームページの作り方を調べている起業家のあなた。今やるべきことは…

Apple好きへ

iPhoneで動画撮影をする時に、音声を聞き取りやすいクリアな音…

No Image

Apple好きへ

App Storeアフィリエイト終了。やはり外部サービスへ依存し…

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

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

No Image

楽しく仕事したい人へ

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

No Image

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

ブログ全体の人気記事

Apple好きへ

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

Apple好きへ

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

楽しく仕事したい人へ

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

Apple好きへ

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

Apple好きへ

『MacBookPro Retina』に 液晶保護フィルムを貼る…

Apple好きへ

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


▲最上部へ