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のLINE@に登録して、いつでもどこでも何でも即相談

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

LINEでのご相談、トーク10往復を5,000円で承ります。

これまでに、こんな質問を頂いております
集客目的でブログを始める際に、まず何から始めるのか?
人が集まるブログ記事の書き方とは?
ブログに何を書けば良いのか?
ブログで商品を売る方法とは?
自分のお店のホームページは作るべきなのか?
ホームページを作るにあたって必要なものとは?
自分に適したパソコンの選び方とは?

…が、友だち50人(登録者50人)になるまでは、トーク10往復分の相談を無料で承ります。(あと10人)。

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

RingoのLINE@に登録

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

筆者「リンゴ」について

リンゴプロフィール

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

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

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

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

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

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

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

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

詳細プロフィールを見る

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

  • 埼玉県川越に格安コワーキングスペース登場。フリーランサー・経営者を繋ぐ仕事場!

    • 埼玉県川越のコワーキングスペース・バーチャルオフィス。1日1,000円の格安な理由とは…?

筆者について

リンゴプロフィール

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

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

ブログ全体の新着記事

No Image

Apple好きへ

2020年はコレで決まり!iPad/iPhoneで使うおすすめゲ…

楽しく仕事したい人へ

【初心者へ】YouTube動画編集担当の作業環境。おすすめのパソ…

楽しく仕事したい人へ

ハイクオリティなヘッドホンはNG…!?動画編集用のヘッドホン・イ…

Apple好きへ

【新型】iPhone 11 Proと一緒に買ったおすすめのアクセ…

Apple好きへ

バックアップは必須!機種変更時に失敗せずに新iPhoneへデータ…

Apple好きへ

【解決】インスタへのログイン時『不審なログイン試行が検知されまし…

新着投稿をもっと見る

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

楽しく仕事したい人へ

【初心者へ】YouTube動画編集担当の作業環境。おすすめのパソ…

楽しく仕事したい人へ

ハイクオリティなヘッドホンはNG…!?動画編集用のヘッドホン・イ…

楽しく仕事したい人へ

月額制『Adobe Creative Cloud』が700円の値…

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

楽しく仕事したい人へ

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

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

ブログ全体の人気記事

Apple好きへ

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

Apple好きへ

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

Apple好きへ

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

楽しく生活したい人へ

SFC・SS・PS・N64・GC。HDMI接続できないレトロゲー…

楽しく生活したい人へ

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

Apple好きへ

【2018年】アナタは何色派?今、人気なiPadのカラーはコレ!…


▲最上部へ